Seyon Restaurant System Requirements Document

Introduction

This document outlines the system requirements for the Seyon Restaurant project. The project aims to develop a website for a single restaurant, focusing on a streamlined user experience for menu browsing, order processing, and billing.

System Overview

The Seyon Restaurant project is designed to provide a digital platform for a single restaurant, enabling customers to view the menu, place orders, and complete transactions efficiently. The system will support core functionalities such as menu management, order processing, billing, and sales reporting, all while ensuring a mobile-responsive design.

Functional Requirements

• As a Customer, I should be able to view the menu items such as Idli, Dosa, Poori, and Vada.
• As a Customer, I should be able to add items to the cart by clicking on them.
• As a Customer, I should be able to view images of the menu items.
• As a Customer, I should be able to see the total bill in the cart.
• As a Customer, I should be able to pay using "Pay Now" or QR code options.
• As a Customer, I should be able to print the bill.
• As a Customer, I should be able to clear the cart.
• As an Admin, I should be able to view monthly sales reports.

User Personas

• Customer: A visitor to the restaurant's website who wants to browse the menu, place an order, and pay for their meal.
• Admin: The restaurant manager responsible for overseeing sales reports and managing the website's backend operations.

Core User Flows

1. Customer Browsing and Ordering:

   • Customer visits the website -> views menu items with images -> clicks on items to add to cart -> reviews cart and total bill -> selects payment option -> completes payment -> prints bill if needed.

2. Admin Sales Management:

   • Admin logs into the backend -> accesses monthly sales report -> reviews and manages sales data.

Visuals Colors and Theme

• primary: #FF5733 (a vibrant orange to reflect the warmth and energy of the restaurant)
• primary_light: #FF8F66 (a lighter tint of the primary color for hover states)
• secondary: #4A90E2 (a calming blue for headlines and links)
• accent: #FFC300 (a bright yellow for call-to-action buttons and active states)
• highlight: #FF6F61 (a warm coral for hover states and notifications)
• bg: #FFFFFF (a clean white background for clarity)
• surface: rgba(255, 255, 255, 0.8) (a semi-transparent white for card backgrounds)
• text: #333333 (a dark gray for primary text)
• text_muted: #777777 (a softer gray for secondary text)
• border: rgba(200, 200, 200, 0.5) (a subtle gray for borders)

Signature Design Concept

The homepage will feature an interactive "Culinary Carousel" where users can explore the menu items in a 3D rotating carousel. Each dish will be represented as a card that users can click to flip and reveal more details, including ingredients and nutritional information. The carousel will be built using @react-three/fiber for 3D rendering and framer-motion for smooth animations. As users hover over each card, the card will gently tilt, and a subtle glow will highlight the selected item, creating an engaging and dynamic browsing experience.

Interaction Model & Motion Direction

• Landing/Home Page: Parallax interaction model with layered depth via scroll. Decorative elements like atmospheric blobs and distant shapes will translate at different speeds, while real content scrolls naturally.
• Internal Pages: Static interaction model for clarity and ease of use, focusing on reading speed and data presentation.

Non-Functional Requirements

• The website must be mobile responsive to ensure usability across devices.
• The system should not include tax calculations.
• The website should be developed using HTML, CSS, and JavaScript.

Tech Stack

• Frontend: HTML, CSS, JavaScript
• Backend: Not specified, but assumed to be managed by an API supervisor for single restaurant support.

Assumptions and Constraints

• The system is designed for a single restaurant.
• The API supervisor will handle any backend integrations required for single restaurant support.

Glossary

• Cart: A virtual basket where customers can add items they wish to purchase.
• QR Code: A machine-readable code used for quick payment processing.
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.
• 3D Rotating Carousel: An interactive element that allows users to explore content in a circular, rotating manner.