kinetic-ecommerce

byMayuresh

Create a **full-stack professional shoe e-commerce website** named **FastFeet** using **Python (Flask), HTML, CSS, and JavaScript with SQLite database**. The UI must be **minimal, clean, and professional (portfolio-level)** — similar to modern brands like Nike or Apple. Avoid flashy or gaming-style design. Use white background, dark text, light grey borders, and one soft accent color. Include smooth animations, soft shadows, proper spacing, and clean typography. On the **home page**, display multiple shoes in a grid layout with image, name, and price. Add subtle hover effects (zoom + shadow). When a user clicks a shoe, open a **product detail page** showing large image, description, price, and buttons for **Add to Cart** and **Buy Now**. At the top, create a **navbar**: * Left: hamburger menu with options → Customer Care, Track Order, Logout * Center: always show site name “FastFeet” * Right: Login and Cart icon with item count In **Customer Care**, show email and phone number; clicking email should open Gmail, clicking phone should open dialer. In **Track Order**, show order progress (Order Confirmed, Out for Delivery, Delivered) with completed steps highlighted using green indicators. Logout should log the user out and redirect to home page. Implement **authentication system**: * First-time user must register (Name, Phone, Password) * Then login * After login, show username instead of login button * If user clicks Add to Cart or Buy without login, redirect to login, then continue the action after successful login Create a **cart system**: * Show added shoes with image, name, price, and checkbox selection * At bottom show total and **Buy Selected** button Create a **checkout page**: * Show selected products * Payment options: Cash on Delivery and Online (dummy) * If COD selected → show “Confirm Order” → place order and redirect to Track Order Use Flask sessions for login state. Store data in SQLite (Users, Products, Cart, Orders). Add at least 8 sample shoe products with images. Ensure cart persists per user. Project structure must include app.py, templates folder, static folder (css, js, images), and database. Ensure responsive design, smooth UX, proper routing, and modern professional UI. Generate complete working code, not partial.

HomeCartCheckoutRegisterCustomerCareOrderTrackingProductAdminDashboardProductsOrdersLogin
Home

Comments (0)

No comments yet. Be the first!

Project Tasks18

#1

Implement Theme and Structure

To Do

As a developer, I want to implement the global theme, color palette, typography, and layout structure across all pages so that the app matches the FastFeet mock-design pages exactly. This includes: applying the color palette (#FFFFFF background, #F5F5F5 surface, #333333 text, #FF6F61 accent, #B0BEC5 muted), setting up Roboto/Open Sans typography, configuring sticky navbar with scroll color transition, adding smooth animations (≤300ms), soft shadows, and removing any scaffold pages not present in the design. Scope: align all existing scaffold pages (home, login, signup, welcome, dashboard/overview, dashboard/ai-assistant, dashboard/settings) to the FastFeet design system and remove unneeded pages.

AI 80%
Human 20%
High Priority
2 days
Frontend Developer
#13

Implement Auth API

To Do

As a user, I want to use backend API for registration and login so that my credentials are securely stored and sessions managed. Features: POST /register (name, phone, password), POST /login (phone, password), POST /logout, Flask session management, SQLite Users table. Blocks all protected frontend flows.

AI 85%
Human 15%
High Priority
1.5 days
Backend Developer
#14

Implement Products API

To Do

As a user, I want to use backend API for products so that I can browse the shoe catalog and view product details. Features: GET /products (list with image/name/price), GET /products/<id> (detail), seed 8+ sample shoe products in SQLite. Supports Home and Product detail pages.

AI 85%
Human 15%
High Priority
1.5 days
Backend Developer
#2

Build Home Page

To Do

As a user, I want to browse a dynamic shoe showcase grid on the Home page so that I can discover products with hover effects and scroll-triggered animations. Implement based on the existing Home (v2) JSX design. Features: sticky navbar (hamburger left, 'FastFeet' center, login+cart right), shoe grid with image/name/price, zoom+shadow hover effects, scroll-triggered cascading fade-in animation, responsive layout. Links to: Product detail page, Login, CustomerCare.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#3

Build Login Page

To Do

As a user, I want to sign in on the Login page so that I can access cart and purchase features. Implement based on the existing Login (v2) JSX design. Features: phone/password form, link to Register page, redirect to previous action after login, show username in navbar post-login. Links to: Home, Register.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#4

Build Register Page

To Do

As a user, I want to create an account on the Register page so that I can log in and shop. Implement based on the existing Register (v2) JSX design. Features: Name, Phone, Password fields, submit to backend, redirect to Login on success. Links to: Login.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#5

Build Product Detail Page

To Do

As a user, I want to view detailed information about a shoe on the Product page so that I can decide to add it to cart or buy immediately. Implement based on the existing Product (v2) JSX design. Features: large image, description, price (INR), Add to Cart button, Buy Now button, redirect to Login if not authenticated. Links to: Cart, Login, Home.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#6

Build Cart Page

To Do

As a user, I want to manage my cart on the Cart page so that I can review selected items and proceed to checkout. Implement based on the existing Cart (v2) JSX design. Features: list of added shoes with image/name/price/checkbox, total price of selected items, Buy Selected button. Links to: Checkout, Product, Home.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#7

Build Checkout Page

To Do

As a user, I want to complete my purchase on the Checkout page so that I can choose a payment method and place my order. Implement based on the existing Checkout (v2) JSX design. Features: display selected products, COD and dummy Online Payment options, Confirm Order button for COD, redirect to OrderTracking on success. Links to: OrderTracking, Cart.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#8

Build Order Tracking Page

To Do

As a user, I want to track my order status on the OrderTracking page so that I know when my shoes will arrive. Implement based on the existing OrderTracking (v2) JSX design. Features: progress steps (Order Confirmed, Out for Delivery, Delivered), completed steps highlighted in green. Links to: Home.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#9

Build Customer Care Page

To Do

As a user, I want to access contact information on the CustomerCare page so that I can reach support via email or phone. Implement based on the existing CustomerCare (v2) JSX design. Features: display email (opens Gmail on click) and phone number (opens dialer on click), accessible from hamburger menu. Links to: Home.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#10

Build Admin Dashboard Page

To Do

As an admin, I want to view an overview on the AdminDashboard page so that I can manage products and orders. Implement based on the existing AdminDashboard (v2) JSX design. Features: overview stats, navigation to Products and Orders management sections. Links to: Products, Orders.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#15

Implement Cart API

To Do

As a user, I want to use backend API for cart management so that my cart persists per user session. Features: POST /cart/add, GET /cart, DELETE /cart/remove/<id>, cart persisted per user in SQLite. Requires auth.

Depends on:#13
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Backend Developer
#17

Implement Admin Products API

To Do

As an admin, I want to use backend API for product catalog management so that I can add, update, and remove shoes. Features: POST /admin/products, PUT /admin/products/<id>, DELETE /admin/products/<id>, admin auth guard.

Depends on:#14#13
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Backend Developer
#11

Build Products Management Page

To Do

As an admin, I want to manage the product catalog on the Products page so that I can add, update, or remove shoes. Implement based on the existing Products (v2) JSX design. Features: product list, Add Product form, Update Product, Remove Product actions. Links to: AdminDashboard.

Depends on:#10
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#12

Build Orders Management Page

To Do

As an admin, I want to view and update order statuses on the Orders page so that I can manage fulfillment. Implement based on the existing Orders (v2) JSX design. Features: list of all orders, update order status (Confirmed, Out for Delivery, Delivered). Links to: AdminDashboard.

Depends on:#10
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#16

Implement Orders API

To Do

As a user, I want to use backend API for placing and tracking orders so that I can checkout and monitor order status. Features: POST /orders/place (COD/Online), GET /orders/<id>/status, admin PUT /orders/<id>/status. SQLite Orders table.

Depends on:#15#13
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Backend Developer
#18

Integrate Frontend with Backend

To Do

As a developer, I want to wire all frontend pages to their respective backend APIs so that the application is fully functional end-to-end. Tasks: connect Home/Product pages to Products API, Login/Register to Auth API, Cart page to Cart API, Checkout/OrderTracking to Orders API, Admin pages to Admin APIs. Ensure session-based auth guards on protected routes and proper error handling throughout.

Depends on:#10#11#8#9#13#14#4#17#12#6#16#5#7#2#3#15
Waiting for dependencies
AI 80%
Human 20%
High Priority
2 days
Frontend Developer
Home design preview
Login: Sign In
AdminDashboard: View Overview
Products: Add Product
Products: Update Product
Products: Remove Product
Orders: View Orders
Orders: Update Status