Next.js TypeScript PostgreSQL HTML/CSS JavaScript Tailwind
Technical TODOs:
Pages Setup: Create Pages: [x]Create Products page component. [x]Create Single Product page component. [x]Create Cart page component. [x]Create Checkout page component. [x]Create Thank You page component.
Products Page: List Products: [x]Fetch product data from the database. [x]Display at least 4 different products. [x]Ensure each product is linked to its single product page. [x]Add relevant h1 element to the page. [x]Add data-test-id="products-link" to the header link to navigate to the Products page.
Single Product Page: Display Product: [x]Retrieve product details based on the product ID from the URL. [x]Display product name inside an h1 element. [x]Display product image with data-test-id="product-image". [x]Display product price inside an element with data-test-id="product-price". [x]Add quantity input with data-test-id="product-quantity". [x]Implement add to cart functionality with data-test-id="product-add-to-cart".
Cart Page: Manage Cart: [x]Display all items added to the cart. [x]Display quantity of each item with data-test-id="cart-product-quantity-". [x]Display product subtotal (price × quantity). [x]Implement remove button for each item with data-test-id="cart-product-remove-". [x]Display total price with data-test-id="cart-total". [x]Implement checkout button with data-test-id="cart-checkout".
Checkout Page: Collect Information: [x]Collect shipping and payment information. [x]Add HTML attributes for all form inputs. [x]Ensure form prevents submission with empty fields. [x]Implement confirm order button with data-test-id="checkout-confirm-order".
Cookies: Set up Cookie Management: [x]Use cart cookie to store cart information. [x]Implement security measures to prevent unauthorized modifications.
Database: Database Configuration: [x]Set up PostgreSQL database. [x]Create necessary tables for storing product and user data. [x]Establish connection and perform CRUD operations.
TypeScript / JSDoc: Type Definitions: []Convert at least 2 pages and 4 other files to TypeScript. []Define React props types. []Ensure proper usage of JSDoc comments.
Tests: Testing Suite: []Write end-to-end tests for critical functionalities. []Write unit tests for functions related to cart management. []Set up GitHub Actions for automated testing.
Design TODOs: UX Design: User Flows: [x]Design user flows for login, signup, notification, and checkout processes. [x]Create wireframes for all pages.
Visual Design: Design System: [x]Define color palette. [x]Determine font sizes and styles. []Design individual pages including user page, friend list, and notification popup.
Data Modeling TODOs: Entity Identification: []Define entities such as User, Product, Notification. []Establish relationships between entities (e.g., User-Friend, User-Notification). []Design data models for each entity.
Deployment: Deploy Application: Deploy application to Fly.io. Update GitHub repository with deployment details. Documentation: Readme Creation: Write detailed readme including title, description, technologies used, setup instructions, and deployment guidelines. Include screenshots of key pages.