103 lines
3.7 KiB
Markdown
103 lines
3.7 KiB
Markdown
# 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](https://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.
|
|
```sql
|
|
-- 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):
|
|
```bash
|
|
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**:
|
|
```bash
|
|
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:
|
|
```env
|
|
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:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
Open [http://localhost:3000](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:
|
|
```bash
|
|
docker build -t myfavstuff-app .
|
|
```
|
|
2. Run the container (make sure to provide your `.env.local` file for Supabase config):
|
|
```bash
|
|
docker run --env-file .env.local -p 3000:3000 myfavstuff-app
|
|
```
|
|
|
|
The app will be available at [http://localhost:3000](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.
|