# 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)

---