MVP Overview

# MVP Overview

This project is a **simple e-commerce landing page generator** for individual product sales. Sellers can create multiple **standalone product pages**, each with a "Buy Now" button leading to a universal order form. Products are not listed together in a catalog—they each live on their own unique link, allowing sellers to advertise and sell them individually.

### Key Features:
- Sellers can create and manage multiple independent products.
- Each product has its own landing page with a chosen template.
- Buyers fill out a standard form to place an order.
- Sellers manage orders and update statuses via a dashboard.
Always use pnpm
---

Always use pnpm

## Development environment

-ubuntu 24.04
Always use pnpm
---

## Tech Stack

### Frontend:
- **Next.js (App Router)** — React framework for routing and rendering
- **Tailwind CSS** — Utility-first styling
- **Radix UI** — Accessible UI primitives
- **Lucide Icons** — Modern icon set
- **React Hook Form** + **Zod** — Form management and validation
- **next-themes** — Light/Dark theme support

### Backend:
- **Next.js API Routes** — Server-side logic and APIs
- **JWT Auth (with HttpOnly cookies)** — Seller login and protected routes
- **Supabase** — PostgreSQL Database, Auth, and optional file storage

### Dev & Ops:
- **TypeScript** — Strong typing for maintainability
- **ESLint & Prettier** — Code quality and formatting
- **Docker** — Local development & potential deployment
- **Vercel** — For simple and fast frontend deployments

---

# Tasks

| Story Points | Task                                                                 | Role                                     |
|--------------|----------------------------------------------------------------------|------------------------------------------|
| 1     [x]    | Create basic frontend scaffold (Next.js + Tailwind)                  | Frontend foundation                      |
| 2     [x]    | Create basic backend scaffold (Express + JWT auth)                   | Backend foundation                       |
| 3     [x]    | Define database schema for Product and Order                         | Data modeling                            |
| 4     [x]    | Implement database migrations                                        | Data persistence                         |
| 5     [x]    | Build Seller login page with form validation                         | Authentication                           |
| 6     [x]    | Implement login API endpoint with JWT                                | Authentication                           |
| 7     [x]    | Protect dashboard routes with auth middleware                        | Security                                 |
| 8     [x]    | Build Dashboard layout with nav links (Products, Orders)             | UI structure                             |
| 9     [x]    | Create "Products" list component in dashboard                        | Product management UI                    |
| 11    [x]    | Implement `GET /api/products` endpoint                               | Product API                              |
| 12    [x]    | Fetch and display products in dashboard                              | Product management data                  |
| 13    [x]    | Create "Create Product" button and modal form                        | Product creation UI                      |
| 14    [x]    | Implement `POST /api/products` to save new product                   | Product API                              |
| 15    [x]    | Generate unique slug/ID for each product                             | Data modeling                            |
| 16    [x]    | Build TemplateSelector component with 3 template previews            | Product creation UI                      |
| 17    [x]    | Wire template choice into product creation flow                      | Product creation logic                   |
| 18    [x]    | Implement product activate/deactivate toggle                         | Product management                       |
| 19    [x]    | Create dynamic public route `/p/[slug]`                              | Routing                                  |
| 20    [x]    | Fetch product data in public page (`GET /api/products/:slug/public`) | Public product rendering                 |
| 21    [x]    | Build three React template components for product page               | UI components                            |
| 22    [x]    | Add "Buy Now" button linking to `/p/[slug]/order`                    | Buyer flow                               |
| 23    [x]    | Build Order form component with fields and validation                | Buyer flow form                          |
| 24    [x]    | Implement `POST /api/orders` to save order                           | Order API                                |
| 25    [x]    | Show order confirmation page                                         | Buyer feedback                           |
| 26    [x]    | Create "Orders" list in dashboard per product                        | Order management UI                      |
| 27    [x]    | Implement `GET /api/orders?productId=` endpoint                      | Order API                                |
| 28    [x]    | Display orders table with status and "View Details" button           | Order management data                    |
| 29    [x]    | Build OrderDetail component showing full form data                   | Order management UI                      |
| 30    [x]    | Implement `PUT /api/orders/:id/status` to update order status        | Order API                                |
| 31    [x]    | Add status dropdown in OrderDetail and wire status update            | Order management interaction             |
| 32    [x]    | Configure Tailwind theme (colors, typography)                        | Styling                                  |
| 33    [x]    | Write README with setup, env vars, run instructions                  | Documentation                            |
| 34    [x]    | Write database migration and seed scripts                            | Deployment prep   
| 35    [x]    | Extend product DB schema to support multiple sizes                   | Data modeling                            |
| 36    [x]    | Extend product DB schema to support multiple colors                  | Data modeling                            |
| 37    [x]    | Extend product DB schema to support multiple images                  | Data modeling                            |
| 38    [x]    | Update product API endpoints to handle sizes, colors, images         | Product API                              |
| 39    [x]    | Update product creation/edit form to add/remove sizes                | Product creation UI                      |
| 40    [x]    | Update product creation/edit form to add/remove colors               | Product creation UI                      |
| 41    [x]    | Update product creation/edit form to upload/manage multiple images   | Product creation UI                      |
| 42    [x]    | Update product page templates to display selectable sizes            | UI components                            |
| 43    [x]    | Update product page templates to display selectable colors           | UI components                            |
| 44    [x]    | Update product page templates to display image gallery               | UI components                            | 
| 44    [x]    | Extend product DB schema to support Quantity                         | Data modeling                            | 
| 44    [x]    | Update product creation/edit form to Quantity                        | Product creation UI                      | 
| 44    [x]    | Update product page templates to calculate and show change order Quantity  | UI components                      | 

next tasks:
 -update the colors and sizes implementation ( The implementation of colors and sizes isn't appropriate 
    Colors should be chosen from a color field or idk in the product creation and shown as colors in the product page
    Sizes can be different based on products like shoes and t-shirt not same size and all )

 -add template library with deffrent product template layout colors and design of the page but same functionalities