Amar Shilpi Restro Cafe Website

Introduction

The Amar Shilpi Restro Cafe website project aims to create a professional and attractive online presence for the cafe located in Kolkata, West Bengal. The website will showcase the cafe's menu, ambiance, and services, enhancing customer engagement and facilitating online interactions.

System Overview

The website for Amar Shilpi Restro Cafe will serve as a digital platform to highlight the cafe's offerings, including its menu, reviews, and location. It will provide users with the ability to view the menu, order online, and find directions. The website will also feature customer reviews and popular dishes to attract potential diners.

Functional Requirements as Story Points

• As a User, I should be able to view the full menu of Amar Shilpi Restro Cafe.
• As a User, I should be able to see detailed descriptions and images of each dish.
• As a User, I should be able to order food online from the website.
• As a User, I should be able to find the cafe's location and get directions.
• As a User, I should be able to read customer reviews and ratings.
• As a User, I should be able to view popular times and estimated wait times.
• As a User, I should be able to contact the cafe directly through the website.
• As a User, I should be able to save the cafe's information for future reference.
• As a User, I should be able to share the cafe's details on social media.

User Personas

• Diner: A customer looking to explore the menu, read reviews, and order food online.
• Visitor: A potential customer seeking information about the cafe's location, ambiance, and popular dishes.
• Reviewer: A user who wants to leave feedback and rate their experience at the cafe.

Core User Flows

• Diner views menu -> selects dishes -> places an online order -> receives confirmation.
• Visitor searches for cafe -> views location and directions -> plans a visit.
• Reviewer visits cafe -> enjoys meal -> leaves a review and rating on the website.

Visuals Colors and Theme

• primary: #8B4513 (Saddle Brown)
• primary_light: #CD853F (Peru)
• secondary: #FFD700 (Gold)
• accent: #FF4500 (Orange Red)
• highlight: #FFA500 (Orange)
• bg: #FFF8DC (Cornsilk)
• surface: rgba(255, 248, 220, 0.8)
• text: #2F4F4F (Dark Slate Gray)
• text_muted: #696969 (Dim Gray)
• border: rgba(139, 69, 19, 0.2)

Signature Design Concept

The homepage of the Amar Shilpi Restro Cafe website will feature an interactive "Culinary Journey" theme. Users will navigate through a virtual map of the cafe's menu, where each dish is represented as a destination. Hovering over a dish will reveal a pop-up with a brief description and image. Clicking on a dish will transition to a detailed view with ingredients, preparation style, and customer reviews. The map will be animated using framer-motion for smooth transitions and interactive elements.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll through the site. The virtual map will have decorative layers that move at different speeds, enhancing the storytelling aspect of the cafe's culinary offerings. Each section of the website will have a distinctive core mechanic, such as kinetic typography for dish descriptions and scroll-triggered animations for user reviews.

Non-Functional Requirements

• The website should load within 3 seconds on standard broadband connections.
• It should be responsive and accessible on all devices, including mobile phones and tablets.
• The website must comply with local data protection regulations.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target users in India, with pricing displayed in INR.
• The cafe's menu and pricing are subject to change and will need regular updates.
• The website must support high traffic during peak dining hours.

Glossary

• Diner: A customer who visits the cafe to enjoy a meal.
• Visitor: An individual seeking information about the cafe.
• Reviewer: A user who provides feedback on their dining experience.
• Parallax: A visual effect where background images move slower than foreground images, creating an illusion of depth.