Sonic-System

Introduction

The Sonic-System project aims to develop a premium quick-commerce grocery delivery platform named "Shivam Mart," specifically designed for the Bhatapara region in India. This platform will provide a seamless and fast grocery delivery experience, maintaining an original brand identity and user interface.

System Overview

Sonic-System is a full-stack grocery delivery platform that operates exclusively in Bhatapara, India. It features a customer-facing website and an admin dashboard for managing orders, products, and deliveries. The platform does not maintain inventory but facilitates the purchase and delivery of products from local shops to customers.

Functional Requirements

• As a Customer, I should be able to place an order for groceries.
• As a Manager, I should receive orders on the dashboard.
• As a Manager, I should be able to purchase products from local shops.
• As a Delivery Partner, I should be able to deliver orders to customers.
• As a Customer, I should be able to search for products.
• As a Customer, I should be able to view product categories.
• As a Customer, I should be able to view product details.
• As a Customer, I should be able to add products to a cart.
• As a Customer, I should be able to create a wishlist.
• As a Customer, I should be able to proceed to checkout.
• As a Customer, I should be able to sign up and log in.
• As a Customer, I should be able to view my order history.
• As a Customer, I should be able to track my live orders.
• As a Customer, I should receive notifications about my orders.
• As a Customer, I should be able to manage my profile and saved addresses.
• As an Admin, I should be able to manage products (add, edit, delete).
• As an Admin, I should be able to manage orders (accept, reject, pack, assign delivery, mark delivered).
• As an Admin, I should be able to manage delivery partners.
• As an Admin, I should be able to track deliveries and view delivery history.
• As a Customer, I should be able to make payments via Cash on Delivery, Razorpay, or online payments.
• As a Customer, I should be able to use filters and search for offers and coupons.

User Personas

• Customer: Individuals using the platform to order groceries.
• Manager: Admin users managing orders and purchasing products from local shops.
• Delivery Partner: Individuals responsible for delivering orders to customers.
• Admin: Users with access to the admin dashboard for managing the platform.

Core User Flows

• Customer places an order -> Manager receives order -> Manager purchases products -> Delivery Partner delivers order -> Customer receives order.
• Customer searches for a product -> Adds to cart -> Proceeds to checkout -> Completes payment -> Receives order confirmation.
• Admin logs in -> Manages products/orders/delivery partners -> Tracks deliveries.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Indigo)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F59E0B (Amber)
• accent: #EF4444 (Red)
• highlight: #FBBF24 (Gold)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Gray)

Signature Design Concept

The homepage of Shivam Mart will feature an interactive 3D cityscape of Bhatapara, created using @react-three/fiber and @react-three/drei. Users can navigate through the virtual city to explore different product categories represented as storefronts. Hovering over a storefront will reveal product highlights and offers. The cityscape will transition from day to night mode based on the user's local time, enhancing the immersive experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, with layered depth effects as users scroll through the page. Decorative elements like clouds and birds will move at different speeds, creating a dynamic and engaging experience. Internal pages, such as the dashboard and profile settings, will adopt a "static" model for clarity and ease of use.

Non-Functional Requirements

• The platform must support high traffic and ensure fast loading times.
• Ensure secure transactions and data protection.
• Provide a responsive design compatible with mobile and desktop devices.
• Maintain high availability and reliability.

Tech Stack

• Frontend: React + Vite, Tailwind CSS
• Backend: Node.js + Express
• Database: MongoDB
• Authentication: JWT
• Image Storage: Cloudinary
• Payments: Razorpay
• Deployment: Vercel + Render + MongoDB Atlas

Assumptions and Constraints

• The platform will initially operate only in Bhatapara, India.
• The business model does not include maintaining inventory.
• The platform should be scalable for future expansion to other cities.

Glossary

• Quick Commerce: Fast delivery service for groceries and essentials.
• Bhatapara: A town in Chhattisgarh, India, where the platform will operate.
• Razorpay: An online payment gateway used for processing transactions.