MyStuff/Input/project plan.md

Project Plan: Favorites Website

Goal

Create a responsive website showcasing personal favorites (books, movies, series, etc.) in a clean, chronological grid view.

1. Setup

• Create a new project in Windsurf.
• Choose the "Next.js Starter" template with TailwindCSS preinstalled.

2. Database

• Set up Supabase project.
• Create a favorites table with the following columns:
  • id (UUID, PK)
  • title (Text)
  • author (Text)
  • consumption_date (Date)
  • type (Enum: book, movie, series, etc.)
  • cover_image (Storage URL or blob)
  • created_at (Auto timestamp)
  • updated_at (Auto timestamp)
• Enable Supabase Storage for cover images.

3. Authentication

• Configure basic_auth on Caddy (reverse proxy).
• Restrict Admin routes (/admin/*) to authenticated users.

4. Frontend Pages

Public Pages

• / Home - grid layout displaying all favorites.
• Card component for each favorite:
  • Cover image
  • Title
  • Author
  • Consumption month/year
• Sorting:
  • Primary: consumption_date DESC
  • Secondary: title ASC

Admin Pages

• /admin
  • Upload a new favorite (form)
  • Edit existing favorite
  • Delete favorite
• Upload cover images directly to Supabase Storage.

5. Styling

• Apply a clean minimalist theme:
  • Light beige background
  • Bold sans-serif fonts
  • Adequate white space
• Responsive design (mobile, tablet, desktop).

6. Deployment

• Deploy to Coolify.
• Connect domain.
• Set up environment variables (Supabase URL, keys).

7. Bonus Enhancements

• Add loading states (skeletons).
• Implement a graceful fallback for missing images.
• Pagination or infinite scrolling for large collections.
• (Optional) Search and filtering (by type, date).

8. Testing

• Manual testing across devices.
• Accessibility checks (alt text on images, contrast).

9. Documentation

• Update README with:
  • Setup instructions
  • Tech decisions
  • Contribution guide (if public)

---