scenic-frontend
King KomBuild 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
Comments (0)
Sign in to leave a comment
System Requirements
System Requirements Document (SRD)
Project Name: scenic-frontend
1. Introduction
The scenic-frontend project focuses on building a professional, mobile-first frontend UI for the web application LocalKart – Hyperlocal Village Marketplace. This application aims to connect customers, shop owners, delivery agents, and administrators in a seamless hyperlocal marketplace experience. The frontend will be developed using HTML, CSS, and Vanilla JavaScript, with a modular structure to ensure scalability and ease of conversion to React in the future.
This document outlines the system requirements for the scenic-frontend project, including functional and non-functional requirements, user personas, visual themes, and technical specifications.
2. System Overview
The LocalKart – Hyperlocal Village Marketplace is a web application designed to facilitate hyperlocal commerce in villages. It allows customers to browse and purchase products from local shops, shop owners to manage their inventory and orders, delivery agents to track and fulfill deliveries, and administrators to oversee the platform's operations.
The scenic-frontend project will deliver a mobile-first, modular, and visually appealing user interface that supports the following key features:
- Role-based dashboards for customers, shop owners, delivery agents, and administrators.
- Lightweight animations for an engaging user experience.
- Modular JavaScript structure for scalability and future React integration.
- Professional design with a focus on usability and performance.
The frontend will connect to backend APIs via the Fetch API, ensuring seamless data exchange and functionality.
3. Functional Requirements
As a Customer:
- I should be able to select my village.
- I should be able to browse shops.
- I should be able to view products.
- I should be able to search for products.
- I should be able to filter products by category.
- I should be able to add products to my cart.
- I should be able to add products to my wishlist.
- I should be able to place orders.
- I should be able to track my orders.
- I should be able to leave reviews for products.
- I should be able to receive notifications.
- I should be able to manage my profile.
- I should be able to manage my addresses.
As a Shop Owner:
- I should be able to add products.
- I should be able to upload product images.
- I should be able to manage stock.
- I should be able to view and manage orders.
- I should be able to assign deliveries.
- I should be able to view analytics for my shop.
As a Delivery Agent:
- I should be able to view available orders.
- I should be able to manage active deliveries.
- I should be able to view my delivery history.
As an Admin:
- I should be able to approve shops.
- I should be able to manage users.
- I should be able to view and manage orders.
- I should be able to view platform-wide analytics.
4. User Personas
4.1 Customer
- Description: End-users who browse shops, purchase products, and track orders.
- Goals: Convenience, variety, and reliable delivery.
- Key Features: Village selection, product search, cart management, and order tracking.
4.2 Shop Owner
- Description: Local shopkeepers who sell products on the platform.
- Goals: Efficient inventory management, increased sales, and customer satisfaction.
- Key Features: Product management, order handling, and analytics.
4.3 Delivery Agent
- Description: Personnel responsible for delivering orders to customers.
- Goals: Timely delivery and efficient route management.
- Key Features: Order tracking and delivery history.
4.4 Admin
- Description: Platform administrators who oversee operations.
- Goals: Platform growth, user satisfaction, and operational efficiency.
- Key Features: User management, shop approvals, and analytics.
5. Visuals Colors and Theme
Color Palette
The visual theme for LocalKart will reflect the vibrant and earthy tones of rural India, emphasizing trust, warmth, and simplicity.
- Background:
#F9F5E7(Soft Beige) - Surface:
#FFFFFF(Pure White) - Text:
#333333(Charcoal Black) - Accent:
#FF6F3C(Bright Orange) - Muted Tones:
#A5A58D(Olive Gray)
6. Signature Design Concept
Interactive Village Map Landing Page
The homepage will feature an interactive map of villages, designed to look like a hand-drawn illustration. Users can hover over villages to see a pop-up with the number of shops available in that area. Clicking on a village will zoom into the map, transitioning smoothly to the shop listing page.
Key Features:
- Hover Animation: Villages glow softly when hovered over.
- Zoom Transition: Smooth zoom effect when a village is selected.
- Dynamic Data: Real-time shop count displayed for each village.
- Illustrative Design: Hand-drawn aesthetic with subtle animations to evoke a sense of community and warmth.
This unique design will make the platform instantly memorable and engaging for users.
7. Non-Functional Requirements
- Performance: Pages should load within 2 seconds on a 3G connection.
- Scalability: Modular structure to support future React integration.
- Accessibility: WCAG 2.1 compliance for accessibility.
- Responsiveness: Fully responsive design for mobile, tablet, and desktop.
- Security: Secure handling of user data and API communications.
8. Tech Stack
Frontend
- HTML, CSS, Vanilla JavaScript
- GSAP for animations
Backend (for API integration)
- Node.js
- Express.js
Database
- MongoDB
Tools
- Fetch API for backend communication
9. Assumptions and Constraints
- The backend APIs will be ready and functional during frontend development.
- The project will follow a mobile-first design approach.
- The frontend will be developed with scalability in mind for future React integration.
- Lightweight animations will be used to ensure performance on low-end devices.
10. Glossary
- Mobile-First Design: A design approach that prioritizes mobile devices during development.
- GSAP: GreenSock Animation Platform, a JavaScript library for animations.
- Fetch API: A browser API for making HTTP requests.
- WCAG: Web Content Accessibility Guidelines.
This document provides a comprehensive foundation for the scenic-frontend project. Let me know if you'd like to refine or expand any section further!
Welcome to LocalKart
Discover shops in your village, browse products from local sellers, and get everything delivered to your doorstep. Connecting communities, one order at a time.
Find Your Village, Discover Local Shops
Explore our hand-drawn interactive village map to navigate your neighborhood like never before. Each village comes alive with illustrated streets, familiar landmarks, and the local shops you love — all rendered in a warm, artisan style that feels as personal as your community itself. Simply tap a village to uncover the shops and products waiting just around the corner.
How It Works
Shop Local in 3 Simple Steps
From finding your village to getting products delivered at your door — it only takes a few taps.
Select Your Village
Choose your village from our interactive hand-drawn map and discover all the local shops available near you.
Browse Local Shops
Explore shops in your village, browse their products, read reviews, and add your favourites to the cart.
Order & Track
Place your order and track its journey in real time from the shop to your doorstep with live updates.
Everything You Need, Right at Your Fingertips
From browsing to delivery, LocalKart makes hyperlocal shopping simple, fast, and delightful for everyone in your village.
Search & Filter
Quickly find products across local shops with powerful search and category-based filters tailored to your village.
Cart Management
Add items from multiple shops, review quantities, and manage your cart effortlessly before placing an order.
Order Tracking
Track your orders in real-time from confirmation to doorstep delivery with live status updates and notifications.
Wishlist
Save your favourite products for later. Get notified when prices drop or items are back in stock at your local shops.
Featured Local Shops
Discover trusted shops in your village. From daily essentials to specialty items, find everything you need nearby.
Sharma General Store
Your one-stop shop for daily essentials, fresh produce, and household items. Serving the village for over 20 years.
View Shop→Priya Fashion Hub
Trendy ethnic and western wear for the whole family. Latest collections at affordable village prices.
View Shop→Annapurna Sweets
Authentic handmade sweets, snacks, and bakery items prepared fresh every day with traditional recipes.
View Shop→Krishna Electronics
Mobile phones, accessories, and electronic appliances with warranty. Authorized service center available.
View Shop→Gupta Medical Store
Licensed pharmacy with a wide range of medicines, health supplements, and personal care products.
View Shop→A Role for Everyone in Your Village
Whether you shop, sell, deliver, or manage — LocalKart has the tools to power your local marketplace journey.
Customer
Browse and shop from your village
- Browse local shops & search products
- Add to cart, wishlist & place orders
- Track orders with real-time updates
Shop Owner
Manage your shop & grow sales
- Add products & manage inventory
- Handle orders & assign deliveries
- View shop analytics & insights
Delivery Agent
Deliver orders in your village
- View & accept available orders
- Manage active deliveries live
- Track your delivery history
Admin
Oversee the entire platform
- Approve shops & manage users
- View & manage all orders
- Monitor platform-wide analytics
Ready to Transform Local Commerce?
Connect with your village marketplace. Shop from local stores, support neighborhood businesses, and get everything delivered right to your doorstep.
Frequently Asked Questions
Everything you need to know about using LocalKart — whether you are shopping or selling.
Customer FAQ
Simply visit the homepage and use the interactive village map or search bar to find your village. Once selected, you will see all the local shops available in your area, ready for you to browse and order from.
Yes! You can add products from different shops to your cart and place a combined order. Each shop will prepare their items independently, and delivery will be coordinated to bring everything to your doorstep.
After placing an order, you can track it in real-time from the Orders page. You will see status updates as your order is confirmed, packed, picked up by the delivery agent, and delivered to your address.
LocalKart supports cash on delivery for all orders. We are working on adding digital payment options including UPI, wallets, and card payments to make checkout even more convenient.
Shop Owner FAQ
You can sign up as a shop owner from the registration page. Fill in your shop details, upload product images, and set your inventory. Once approved by the admin, your shop will appear on the village map for customers to discover.
The Shop Dashboard gives you full control over your products. You can add new items, update prices, manage stock quantities, upload images, and organize products by category — all from one simple interface.
When a customer places an order, you can assign a delivery agent from the available pool in your area. Agents are notified instantly and can accept the delivery, ensuring your customers receive their orders on time.
Absolutely. The Shop Dashboard includes an analytics section where you can track sales trends, popular products, order volumes, and customer ratings to help you make informed decisions about your business.
Still have questions?
Sign in and contact our support team →
No comments yet. Be the first!