MyFavStuff Project

This project is a curation site for favorite items like books, movies, and TV series, built with Next.js, Tailwind CSS, and Supabase.

Project Setup

1. Supabase Backend

Create a Supabase Project: If you haven't already, create a new project at supabase.com.

Database Schema: Use the SQL Editor in your Supabase dashboard to create the items table. The schema is designed to store item details and support features outlined in the Product Vision document.

-- Create the items table
CREATE TABLE public.items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    created_at TIMESTAMPTZ DEFAULT now() NOT NULL,
    title TEXT NOT NULL,
    item_type TEXT NOT NULL, -- 'book', 'movie', 'series'
    rating SMALLINT CHECK (rating >= 1 AND rating <= 5),
    tags TEXT[], -- Array of tags
    comments TEXT,
    picture_url TEXT, -- URL for the item's picture
    item_url TEXT,    -- URL related to the item (e.g., IMDB, Goodreads)
    metadata JSONB     -- For type-specific fields
);

COMMENT ON COLUMN public.items.item_type IS 'Type of item, e.g., ''book'', ''movie'', ''series''';
COMMENT ON COLUMN public.items.metadata IS 'JSONB field for type-specific attributes like author, director, season, etc.';

-- Enable Row Level Security (RLS)
ALTER TABLE public.items ENABLE ROW LEVEL SECURITY;

-- POLICIES (Example: public read, authenticated insert)
CREATE POLICY "Allow public read access"
ON public.items
FOR SELECT
USING (true);

CREATE POLICY "Allow authenticated insert access"
ON public.items
FOR INSERT
TO authenticated
WITH CHECK (true);

-- Add other policies for update/delete as needed, typically checking user ownership.
-- For admin-only write access, refine the INSERT policy to check against a specific admin auth.uid().

API Keys: Note your Project URL and anon key from Supabase Project Settings > API.

2. Next.js Frontend

Initialize Next.js App (if not done):

npx create-next-app@latest MyFavStuff
# Follow prompts: No TypeScript (or Yes if preferred), Yes ESLint, Yes Tailwind CSS, No src/, Yes App Router.
cd MyFavStuff

Install Supabase Client:
```
npm install @supabase/supabase-js
```
Environment Variables: Create a .env.local file in the project root (d:\Projects\MyFavStuff\.env.local) with your Supabase credentials:
```
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_PROJECT_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
```
Replace placeholders with your actual Supabase URL and anon key. (An example file .env.local.example has been created).

3. Running the Development Server

Once setup is complete:

npm run dev

Open http://localhost:3000 in your browser.

Next Steps

Create a Supabase client helper (lib/supabaseClient.js).
Implement authentication (user sign-up/login for admin access).
Develop UI components for adding and displaying items.
Build API routes or server actions in Next.js to interact with Supabase for CRUD operations.

Docker Usage

You can run this Next.js app in a Docker container for production:

Build the image:
```
docker build -t myfavstuff-app .
```
Run the container (make sure to provide your .env.local file for Supabase config):
```
docker run --env-file .env.local -p 3000:3000 myfavstuff-app
```

The app will be available at http://localhost:3000.

For development, it's best to use npm run dev locally.
For production, use Docker as above or deploy to Vercel/Netlify.

3.7 KiB Raw Blame History