75 lines
2.0 KiB
Markdown
75 lines
2.0 KiB
Markdown
# 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)
|
|
|
|
---
|