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

1. Create a Supabase Project: If you haven't already, create a new project at supabase.com.
2. 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().
   

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

2. Next.js Frontend

1. 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
   

2. Install Supabase Client:

   npm install @supabase/supabase-js
   

3. 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

1. Create a Supabase client helper (lib/supabaseClient.js).
2. Implement authentication (user sign-up/login for admin access).
3. Develop UI components for adding and displaying items.
4. 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:

1. Build the image:

   docker build -t myfavstuff-app .
   

2. 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.