System Requirements Document (SRD)

Project Name: Zinc-Gadgets

1. Introduction

Welcome to the System Requirements Document for Zinc-Gadgets, an innovative full-stack e-commerce platform designed to showcase and sell electronic gadgets. This document outlines the functional and non-functional requirements, user personas, design concepts, and technical specifications necessary to bring this project to life.

The platform will cater to users in India (IN), with a focus on modern, responsive design and seamless user experience. The integration of WhatsApp for checkout ensures accessibility and convenience for the target audience.

2. System Overview

Zinc-Gadgets is a full-stack e-commerce website built using the MERN stack (MongoDB, Express.js, React.js, Node.js). The platform will feature:

• A clean and responsive UI for browsing and purchasing electronic gadgets such as TVs, earbuds, batteries, laptops, and smartwatches.
• A WhatsApp-integrated checkout system to simplify order placement without requiring a payment gateway.
• An admin panel for managing products, ensuring ease of operation for the business owner.

The system is designed to be modular, scalable, and beginner-friendly, with a focus on delivering a seamless experience for both users and administrators.

3. Functional Requirements

User Stories

General User Features:

• As a User, I should be able to view a homepage with a hero section, featured products, and categories.
• As a User, I should be able to browse a product listing page with category-wise filters.
• As a User, I should be able to view detailed product information, including images, descriptions, prices, and specifications.
• As a User, I should be able to add products to my cart.
• As a User, I should be able to view my cart with a summary of selected products.
• As a User, I should be able to place an order by providing my name, phone number, and address.
• As a User, I should be redirected to WhatsApp with a pre-filled order message upon checkout.

Admin Features:

• As an Admin, I should be able to log in to an admin panel.
• As an Admin, I should be able to add new products with fields like name, price, category, image, and description.
• As an Admin, I should be able to view all existing products in a tabular format.
• As an Admin, I should be able to edit or delete products.

Bonus Features:

• As a User, I should be able to search for products.
• As a User, I should see loading states while data is being fetched.
• As a User, I should receive toast notifications for actions like adding products to the cart or placing an order.

4. User Personas

1. General User

• Description: Individuals looking to purchase electronic gadgets.
• Goals: Browse products, view details, add items to cart, and place orders easily.
• Pain Points: Complicated checkout processes, lack of product information, and unresponsive design.

2. Admin

• Description: Business owners or managers responsible for managing the product catalog.
• Goals: Add, edit, and delete products efficiently through an intuitive admin panel.
• Pain Points: Complex backend systems, lack of user-friendly interfaces for product management.

5. Visuals Colors and Theme

Color Palette

• Background: #F5F5F5 (Soft Gray)
• Surface: #FFFFFF (Pure White)
• Text: #333333 (Dark Charcoal)
• Accent: #FF5722 (Vivid Orange)
• Muted Tones: #B0BEC5 (Cool Gray)

This palette reflects a modern and clean aesthetic, ensuring readability and visual appeal.

6. Signature Design Concept

Concept: Interactive Gadget Showcase

The homepage will feature an interactive gadget showcase where users can explore products in a dynamic, engaging way:

• Hero Section: A rotating 3D carousel displaying featured gadgets. Users can swipe or click to rotate the carousel and view products from different angles.
• Category Tiles: Animated tiles that expand slightly when hovered over, revealing subcategories.
• Micro-Interactions: Buttons and links will have subtle hover effects, such as color shifts or slight scaling.
• Checkout Animation: When users click "Place Order," the cart items will visually "pack" into a box animation before redirecting to WhatsApp.

This design ensures the website feels alive and interactive, leaving a lasting impression on users.

7. Non-Functional Requirements

• The system must be fully responsive across devices (mobile, tablet, desktop).
• The platform should load within 3 seconds on a standard 4G connection.
• The admin panel must be secure, requiring authentication for access.
• The codebase should follow modular principles for maintainability.
• The system should support scalability to handle increased traffic and data.

8. Tech Stack

Frontend

• React.js for web development.
• Tailwind CSS for styling.
• React Router for navigation.

Backend

• Node.js with Express.js for server-side logic.

Database

• MongoDB for storing product data.

Additional Tools

• Axios for API calls.
• WhatsApp API for checkout integration.

9. Assumptions and Constraints

Assumptions

• Users are familiar with WhatsApp and comfortable using it for order placement.
• The admin panel will be accessed by authorized personnel only.

Constraints

• No payment gateway integration is required.
• The system must use dummy data initially for development and testing.

10. Glossary

• MERN Stack: A technology stack comprising MongoDB, Express.js, React.js, and Node.js.
• WhatsApp API: A service that allows redirection to WhatsApp with pre-filled messages.
• Responsive Design: A design approach ensuring the website adapts to various screen sizes.
• Toast Notifications: Small popup messages used to inform users of actions or events.

This document serves as the foundation for the development of Zinc-Gadgets. Let’s bring this vision to life, Riya!