System Requirements Document (SRD)

Project Name: teal-supermarket

1. Introduction

The teal-supermarket project aims to create a modern, clean, and mobile-friendly website for "G & L Supermarket (好運超市)," a local Asian grocery store located in Blacktown, NSW, Australia. The website will serve as a digital storefront to attract local customers, showcase products and weekly specials, and provide essential store information.

This document outlines the system requirements for the project, ensuring clarity and alignment with the goals of delivering a high-quality, visually appealing, and user-friendly website.

2. System Overview

The teal-supermarket website will feature a clean and fresh design with a predominantly blue and white color scheme, complemented by tasteful accent colors. It will provide a seamless browsing experience across devices, ensuring accessibility for all age groups.

Key features include:

• A visually appealing homepage with clear calls-to-action.
• Dedicated sections for product categories, weekly specials, store information, and contact details.
• Integration of an AI chatbot to assist users with common queries, allowing typed interaction for real-time answers.
• Smooth scrolling navigation that takes users to specific sections like Products and Contact when clicked.
• Mobile-friendly design with intuitive navigation.

The website will reflect the store's commitment to quality, freshness, and community service, while incorporating cultural elements to resonate with the target audience.

3. Functional Requirements

Story Points:

• As a User, I should be able to view the homepage with a hero headline, subheading, and call-to-action buttons.
• As a User, I should be able to browse product categories such as Fresh Produce, Asian Groceries, Frozen Foods, and Snacks & Drinks.
• As a User, I should be able to see weekly specials with discounted items and deals.
• As a User, I should be able to read about the store's mission and community service in the About section.
• As a User, I should be able to access store information, including address, opening hours, phone number, and an embedded Google Map.
• As a User, I should be able to fill out a contact form with fields for name, phone, and message.
• As a User, I should be able to interact with an AI chatbot to ask questions about opening hours, product availability, directions, and weekly specials.
• As a User, I should be able to click on navigation links (e.g., Products, Contact) and be smoothly scrolled to the respective sections.
• As an Admin, I should be able to update weekly specials and product categories dynamically through a CMS.

4. User Personas

1. Admin

• Role: Store Manager
• Goals: Manage weekly specials, update product categories, and ensure accurate store information is displayed.
• Technical Skill Level: Moderate

2. User

• Role: Local Customer
• Goals: Browse products, find weekly specials, locate store information, and interact with the chatbot for quick answers.
• Technical Skill Level: Basic

3. Guest

• Role: Potential Customer
• Goals: Explore the store's offerings and decide whether to visit in person.
• Technical Skill Level: Basic

5. Visuals Colors and Theme

Color Palette:

• Background: #F0F4F8 (Soft Blue-White)
• Surface: #E1E8ED (Light Gray-Blue)
• Text: #0A3D62 (Deep Navy Blue)
• Accent: #FF6F61 (Warm Coral Red)
• Muted Tones: #B0BEC5 (Soft Gray)

This palette ensures a clean and professional look while maintaining a welcoming and vibrant feel.

6. Signature Design Concept

Concept: Interactive "Fresh Market" Homepage

The homepage will feature an interactive "Fresh Market" design that immerses users in the shopping experience.

Key Features:

1. Dynamic Hero Section:

   • A full-width hero image of fresh produce with subtle animations (e.g., fruits and vegetables gently swaying).
   • The headline "Fresh Asian Groceries in the Heart of Blacktown" will appear with a typewriter effect.
   • Call-to-action buttons ("Visit Us Today" and "View Products") will have hover effects that change their color from blue to coral red.

2. Interactive Product Carousel:

   • A carousel showcasing product categories with 3D card flipping animations.
   • Users can swipe or click to explore categories like Fresh Produce, Asian Groceries, Frozen Foods, and Snacks & Drinks.

3. Weekly Specials Banner:

   • A vibrant banner with a scrolling marquee effect to highlight deals.
   • Clicking on the banner will expand it into a grid view of discounted items.

4. Smooth Scrolling Navigation:

   • Clicking on navigation links (e.g., Products, Contact) will smoothly scroll users to the respective sections.

5. Cultural Touches:

   • Subtle Asian-inspired patterns (e.g., waves or bamboo) integrated into the background.
   • A soft gong sound effect when hovering over the menu items.

6. Interactive Chatbot:

   • A chatbot icon that animates slightly when idle, inviting users to interact.
   • Users can type questions and receive real-time AI-powered responses.

This design concept ensures the website is visually striking, engaging, and memorable.

7. Non-Functional Requirements

• Performance: The website must load within 3 seconds on standard broadband connections.
• Scalability: The backend should support dynamic updates to weekly specials and product categories.
• Accessibility: Ensure WCAG 2.1 compliance for users with disabilities.
• Localization: Use Australian English and local currency (AUD).
• Security: Implement HTTPS and secure the contact form against spam.
• Interactive Navigation: Ensure smooth scrolling transitions for section navigation.

8. Tech Stack

Frontend:

• React for Web

Backend:

• Python
• FastAPI

Database:

• MySQL (with Alembic for migrations)

AI Tools:

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

Orchestration:

• Docker for local development
• Kubernetes for server-side orchestration

9. Assumptions and Constraints

Assumptions:

• The store team will provide high-quality images of products and the store interior.
• Weekly specials and product categories will be updated regularly.
• Users primarily access the website via mobile devices.

Constraints:

• The website must adhere to Australian privacy laws.
• The design must balance cultural elements with modern aesthetics.

10. Glossary

• CMS: Content Management System, used for managing website content dynamically.
• WCAG: Web Content Accessibility Guidelines, standards for accessible web design.
• LLM: Large Language Model, AI models used for natural language processing.
• Marquee Effect: A scrolling text animation often used for banners.
• Smooth Scrolling Navigation: A feature that allows users to scroll seamlessly to specific sections of the page when clicking navigation links.

End of Document