ZNIXA System Requirements Document

1. Introduction

This document outlines the system requirements for the ZNIXA project, a responsive grocery store e-commerce website designed to enhance online sales, manage stock digitally, simplify ordering processes, and provide options for delivery or store pickup. The system will include features for both customers and administrators to ensure efficient operation and management.

2. System Overview

ZNIXA aims to provide a comprehensive platform for grocery shopping online, offering a seamless experience for customers to browse, order, and receive groceries either through delivery or store pickup. The system will also include an admin panel for managing products, orders, and inventory efficiently.

2a. Source Content Inventory

• Frontend Technology: React/Next.js
• Backend Technology: Node.js
• Database: MySQL/PostgreSQL
• Payment Gateways: Razorpay/Stripe
• Notifications: FCM/WhatsApp/Email

3. Functional Requirements as Story Points

• As a Customer, I should be able to browse and search for products and categories.
• As a Customer, I should be able to add products to a cart and proceed to checkout.
• As a Customer, I should be able to choose between delivery or store pickup.
• As a Customer, I should be able to make payments using various options.
• As a Customer, I should be able to view order history and track current orders.
• As an Admin, I should be able to manage products and categories.
• As an Admin, I should be able to manage inventory and receive low-stock alerts.
• As an Admin, I should be able to manage customer orders and update their status.
• As an Admin, I should be able to manage customer information and generate reports.
• As a User, I should be able to place orders.
• As an Admin, I should be able to manage orders placed by users.

4. User Personas

• Customer: Individuals who browse, order, and purchase groceries online.
• Admin: Personnel responsible for managing the website's backend operations, including inventory, orders, and customer management.

5. Core User Flows

• Customer browses products -> adds to cart -> selects delivery/pickup -> makes payment -> receives order confirmation.
• Admin logs into dashboard -> checks inventory -> receives low-stock alert -> updates stock -> manages new orders -> updates order status.

6. Visuals Colors and Theme

• primary: #FF5722 (a vibrant orange for brand identity)
• primary_light: #FF8A50 (lighter tint for hover states)
• secondary: #4CAF50 (a green for success messages and confirmations)
• accent: #FFC107 (a yellow for call-to-action buttons)
• highlight: #03A9F4 (a blue for notifications and active states)
• bg: #FFFFFF (white for page background)
• surface: #F5F5F5 (light grey for card/panel backgrounds)
• text: #212121 (dark grey for primary text)
• text_muted: #757575 (grey for secondary text)
• border: #E0E0E0 (light grey for borders)

7. Signature Design Concept

Interactive Grocery Aisle Experience

The homepage will feature an interactive grocery aisle where users can virtually "walk" through and select products. As users hover over products, they will animate slightly forward, providing a 3D effect. Clicking on a product will flip it to reveal detailed information and an "Add to Cart" button. This concept will be implemented using @react-three/fiber for 3D interactions and motion/react for smooth animations.

LANDING HERO MOTION BRIEF

The landing page will feature a dynamic scene where a shopping cart moves through a virtual grocery aisle. Products will appear and disappear as the cart moves, symbolizing the addition and removal of items. The animation will loop every 10 seconds, with interactive elements allowing users to click on products to learn more. The scene will adapt responsively to different screen sizes, ensuring a consistent experience across devices.

8. Interaction Model & Motion Direction

• Intended Interaction Model: Parallax
  • The landing page will utilize a parallax effect to create depth as users scroll, with product images and background elements moving at different speeds.
  • Interactive elements will feature hover transitions and spring physics for a polished user experience.

9. Non-Functional Requirements

• The system must be responsive and accessible across all devices and browsers.
• The website should load within 3 seconds on a standard internet connection.
• The system must handle up to 10,000 concurrent users without performance degradation.

10. Tech Stack

• Frontend: React/Next.js
• Backend: Node.js
• Database: MySQL/PostgreSQL
• Payment Integration: Razorpay/Stripe
• Notification Services: FCM/WhatsApp/Email

11. Assumptions and Constraints

• The system will initially support English and Hindi languages.
• Payment gateways will be limited to Razorpay and Stripe for the initial launch.
• The system will comply with local data protection regulations in India.

12. Glossary

• Admin: A user with privileges to manage the backend operations of the website.
• Customer: A user who interacts with the website to purchase groceries.
• FCM: Firebase Cloud Messaging, a service for sending notifications.
• Razorpay/Stripe: Payment gateways for processing online transactions.