scenic-frontend

byKing Kom

Build a professional mobile-first frontend UI for a web application called **LocalKart – Hyperlocal Village Marketplace** using **HTML, CSS, and Vanilla JavaScript** with a modular structure so it can later be converted into React. ## Pages Required Create the following pages: * index.html (Landing Page) * shopListing.html (All Shops) * productListing.html (Shop Products) * cart.html (Cart) * orders.html (Orders) * shopDashboard.html (Shop Owner Dashboard) * deliveryDashboard.html (Delivery Dashboard) * adminDashboard.html (Admin Dashboard) * login.html * register.html * profile.html * wishlist.html ## UI Requirements * Mobile First Design * Professional Dashboard Layout * Sidebar Navigation for Dashboards * Sticky Navbar * Product Cards UI * Shop Cards UI * Cart UI like Blinkit * Order Timeline UI * Status Badges (Placed, Accepted, Preparing, Ready, Picked, Delivered) * Modal Popup for Product Details * Toast Notification System * Search Bar with Suggestions * Category Scroll Bar * Village Selector Modal * Multi-step Checkout UI ## Animations (Lightweight Only) Use **GSAP** for lightweight animations: Add animations on: * Page load fade-in * Product cards hover animation * Shop cards hover animation * Sliding sidebar animation * Add to cart animation * Order success animation * Category scroll slider animation * Image hover zoom animation Animation should be fast and lightweight, not heavy. ## Frontend Structure ```id="fe1" frontend/ │ ├── pages/ ├── css/ ├── js/ │ ├── api/ │ ├── core/ │ ├── modules/ │ └── dashboard/ ├── assets/ └── components/ ``` ## Frontend Modules (JS) Create modular JavaScript files: * auth.js * shops.js * products.js * cart.js * orders.js * wishlist.js * profile.js * village.js * notification.js * payment.js * analytics.js * map.js * admin.js * shopOwner.js * delivery.js ## Frontend Features Customer: * Select Village * Browse Shops * View Products * Search * Filter by Category * Add to Cart * Wishlist * Place Order * Track Order * Reviews * Notifications * Profile * Addresses Shop Owner: * Add Product * Upload Image * Manage Stock * Orders * Assign Delivery * Analytics Delivery: * Available Orders * Active Delivery * Delivery History Admin: * Approve Shops * Manage Users * Orders * Analytics Use fetch API to connect backend APIs. Build a backend for **LocalKart – Hyperlocal Village Marketplace** using **Node.js, Express.js, MongoDB**. Use **MVC architecture**. ## Backend Features Authentication: * JWT Login * Register * Role based access * Forgot Password * Middleware authentication User Roles: * customer * shop * delivery * admin ## API Modules Create REST APIs for: ### Auth APIs * POST /api/auth/register * POST /api/auth/login * POST /api/auth/forgot-password ### User APIs * GET /api/users/profile * PUT /api/users/profile * GET /api/users/orders * GET /api/users/wishlist ### Shop APIs * POST /api/shops/register * GET /api/shops * GET /api/shops/:id * PUT /api/shops/status * PUT /api/shops/location * GET /api/shops/pending * PUT /api/shops/approve ### Product APIs * POST /api/products * PUT /api/products/:id * DELETE /api/products/:id * GET /api/products/shop/:shopId * GET /api/products/:id ### Cart APIs * POST /api/cart * GET /api/cart * DELETE /api/cart/:id ### Order APIs * POST /api/orders * GET /api/orders/customer * GET /api/orders/shop * GET /api/orders/delivery * PUT /api/orders/status * PUT /api/orders/assign-delivery ### Review APIs * POST /api/reviews * GET /api/reviews/:productId ### Notification APIs * GET /api/notifications * POST /api/notifications ### Analytics APIs * GET /api/analytics/admin * GET /api/analytics/shop ## Order Status Flow Order status must follow this sequence: placed → accepted → preparing → ready → picked_up → out_for_delivery → delivered → cancelled ## Additional Backend Features * Image upload using Cloudinary * Payment integration using Razorpay * Distance calculation using Haversine formula * Delivery ETA calculation * Notification system * Village based filtering Design MongoDB database schema for **LocalKart – Hyperlocal Village Marketplace**. ## Collections Required ### users * name * email * phone * password * role * village * address * profilePhoto * createdAt ### shops * shopName * ownerId * category * village * address * location (lat, lng) * shopImage * status (pending, approved, rejected) * shopStatus (open, closed, busy) ### products * productName * shopId * category * price * discount * stock * imageUrl * description ### cart * userId * items [productId, qty] ### orders * customerId * shopId * items * totalAmount * status * deliveryAddress * deliveryPersonId * paymentMethod * createdAt ### reviews * userId * productId * rating * comment ### wishlist * userId * productId ### notifications * userId * title * message * type * read * createdAt ### productRequests * userId * productName * village * status ### analytics * shopId * totalOrders * totalRevenue * topProducts ### payments * orderId * paymentId * amount * method * status ## Important Features * Use ObjectId relations * Use indexes for search * Use aggregation for analytics * Store location in latitude and longitude