System Requirements Document (SRD)

Project Name: azure-candy

1. Introduction

Welcome to the System Requirements Document (SRD) for azure-candy, a vibrant and responsive website designed for Bachi's Candy, a delightful candy shop located in Rajkot, Gujarat, India. This document outlines the functional and non-functional requirements, design concepts, technical specifications, and assumptions necessary to bring this project to life.

The goal of azure-candy is to create an immersive, playful, and nostalgic online experience for customers, showcasing Bachi's Candy's wide variety of shakes, ice golas, stuffed golas, and flavored candies. The website will be optimized for mobile-first design, ensuring accessibility and responsiveness across all devices.

2. System Overview

azure-candy will serve as the digital storefront for Bachi's Candy, enabling customers to browse the menu, learn about the shop's unique offerings, and place online orders seamlessly. Key features include:

• A sticky navigation bar for easy access to major sections (Home, Menu, Order, About, Contact).
• A hero section with a rotating carousel of high-quality candy images and the tagline "Sweet Treats That Melt Your Heart!"
• A menu section showcasing detailed categories (Thick Shakes, Ice Golas, Candies) with expandable accordions or tabs, fun descriptions, and add-to-cart functionality.
• An order section with an interactive cart system, WhatsApp integration for checkout, and payment options placeholder.
• A footer with shop location, hours, social links, and a quick "Order Now" button.
• Selective SRD Re-run Capability: A feature allowing user-triggered regeneration of the SRD for updates or modifications.

The website will be built using modern technologies such as React, Tailwind CSS, and FastAPI, ensuring scalability, performance, and ease of maintenance.

3. Functional Requirements

User Stories:

• As a User, I should be able to view a rotating carousel of candy images in the hero section.
• As a User, I should be able to browse the menu categories (Thick Shakes, Ice Golas, Candies) with expandable accordions or tabs.
• As a User, I should be able to see detailed descriptions, prices (in ₹), and images for each menu item.
• As a User, I should be able to add items to my cart and adjust quantities.
• As a User, I should be able to see the total cost of my order dynamically calculated.
• As a User, I should be able to fill out a form with my name, phone number, address, and delivery notes.
• As a User, I should be able to send my order via WhatsApp for checkout.
• As a User, I should be able to access the website seamlessly on mobile devices.
• As an Admin, I should be able to update menu items, prices, and descriptions easily.
• As an Admin, I should be able to trigger selective re-runs of the SRD to regenerate updated requirements.

4. User Personas

1. Customer

• Description: Individuals looking to order shakes, golas, and candies from Bachi's Candy.
• Goals: Browse the menu, place orders, and enjoy a seamless online experience.
• Pain Points: Difficulty navigating or ordering online.

2. Admin

• Description: The shop owner or manager responsible for maintaining the website.
• Goals: Update menu items, prices, and descriptions; manage orders; regenerate SRD for updates.
• Pain Points: Complicated backend systems or lack of flexibility in updates.

5. Visuals Colors and Theme

Color Palette:

The azure-candy website will feature a playful, candy-inspired color scheme:

• Background: #FFEBF0 (Soft Strawberry Pink)
• Surface: #FFF8E1 (Vanilla Cream)
• Text: #5D4037 (Rich Chocolate Brown)
• Accent: #FFD54F (Golden Yellow)
• Muted Tones: #B0BEC5 (Cool Gray)

This palette evokes a fun, nostalgic feel while maintaining readability and visual appeal.

6. Signature Design Concept

Interactive Candy Wonderland Homepage

The homepage will feature a 3D candy wonderland design, where the sections of the website appear as floating candy islands.

• Hero Section: A rotating carousel of candy images will be surrounded by animated candy elements (lollipops, chocolate bars, ice golas) that subtly bounce and sway.
• Navigation Bar: Sticky and candy-themed, with hover effects that resemble candy wrappers unfolding.
• Micro-Interactions: Buttons will "pop" like bubblegum when clicked, and hover effects will include smooth color gradients resembling melting chocolate.
• Animations: The background will feature a subtle gradient shift, mimicking the transition of flavors (e.g., strawberry to vanilla).
• Interactive Elements: Users can "grab" candies from the floating islands to add them to their cart, with a playful animation showing the candy being dropped into a basket.

This bold and eccentric design will make the website unforgettable, creating a delightful first impression for customers.

7. Non-Functional Requirements

• Performance: The website must load within 3 seconds on mobile devices.
• Scalability: The system should handle up to 10,000 concurrent users.
• Security: Ensure secure data handling for customer information and orders.
• Accessibility: Comply with WCAG 2.1 standards for web accessibility.
• SEO: Optimize for search engines with meta tags and structured data.
• Selective SRD Re-run Capability: The system must allow admins to regenerate the SRD dynamically for updates or modifications.

8. Tech Stack

Frontend:

• React for Web
• Tailwind CSS for styling

Backend:

• FastAPI (Python)

Database:

• MySQL (preferred for structured menu and order data)

AI Tools:

• GPT 5.4 for user-friendly responses
• Litellm for LLM Routing

Local Orchestration:

• Docker and docker-compose

Server-Side Orchestration:

• Kubernetes

9. Assumptions and Constraints

Assumptions:

• Customers primarily access the website via mobile devices.
• WhatsApp integration is preferred for local orders in Rajkot.
• Payment options will initially include UPI and COD.

Constraints:

• Limited budget for hosting and development.
• High-quality candy images must be provided by the shop owner.

10. Glossary

• Sticky Navigation Bar: A navigation bar that remains visible at the top of the page as the user scrolls.
• Hero Section: The prominent section at the top of the homepage, typically featuring a large image or carousel.
• Accordion: A UI component that expands or collapses to show or hide content.
• LocalStorage: A web storage API that allows data to be stored persistently in the browser.
• WCAG: Web Content Accessibility Guidelines, a standard for making web content accessible to people with disabilities.
• Selective SRD Re-run Capability: A feature allowing admins to regenerate the SRD dynamically for updates or modifications.

This document serves as the foundation for the development of azure-candy. Let me know if there are any additional requirements or adjustments needed, Dinesh!