eagle-make System Requirements Document

Introduction

The eagle-make project is focused on developing a comprehensive food delivery application. This document outlines the system requirements for the project, including the newly added requirement for a website interface to enhance user interaction and accessibility.

System Overview

The eagle-make project aims to provide a seamless and efficient food delivery service. The system will include a mobile application and a newly added website interface to cater to a broader audience. The website will allow users to browse menus, place orders, and track deliveries, complementing the existing mobile app functionalities.

Functional Requirements as Story Points

• As a User, I should be able to browse the menu on the website.
• As a User, I should be able to place an order through the website.
• As a User, I should be able to track my order status on the website.
• As a User, I should be able to create and manage my account on the website.
• As an Admin, I should be able to update menu items and prices on the website.
• As an Admin, I should be able to view and manage orders through the website interface.

User Personas

• User: A customer who uses the website or mobile app to order food.
• Admin: A staff member who manages menu items, prices, and orders through the website.

Core User Flows

• User browses menu -> selects items -> places order -> tracks order status.
• Admin logs in -> updates menu items/prices -> views orders -> manages order status.

Visuals Colors and Theme

[Default — not specified by user]

• primary: #FF5722 (a vibrant orange to reflect energy and appetite)
• primary_light: #FF8A50 (a lighter tint for hover states)
• secondary: #FFC107 (a warm yellow to complement the primary color)
• accent: #4CAF50 (a green for CTAs and active states)
• highlight: #FFEB3B (a bright yellow for notifications and alerts)
• bg: #FFFFFF (a clean white background for clarity)
• surface: #F5F5F5 (a light grey for card/panel backgrounds)
• text: #212121 (a dark grey for primary text)
• text_muted: #757575 (a softer grey for secondary text)
• border: #E0E0E0 (a subtle grey for borders)

Signature Design Concept

The eagle-make website will feature an interactive "Food Journey" animation on the homepage. Users will see a dynamic illustration of a food delivery journey, starting from selecting ingredients, cooking, packaging, and finally delivering to the user's doorstep. This animation will be interactive, allowing users to click on different stages to learn more about the process. The animation will be created using motion/react for smooth transitions and interactions.

Landing Hero Motion Brief

The homepage will feature a continuously moving 2D composition built with inline SVG and CSS. The animation will depict a food delivery process: ingredients are gathered, cooked, and packaged, transforming into a delivery vehicle that moves towards a happy customer. This loop will last 10 seconds, with interactive elements allowing users to explore each stage. The animation will be responsive, ensuring a seamless experience across devices.

Interaction Model & Motion Direction

• Intended Interaction Model: Animated
  • The landing page will feature moderate scroll-triggered reveals and hover transitions, enhancing user engagement without overwhelming them.
• Internal Pages: Static
  • Focus on layout clarity for menus, order management, and account settings.

Non-Functional Requirements

• The website must be responsive and accessible across various devices and screen sizes.
• The system should ensure secure transactions and data protection.

Tech Stack

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

Assumptions and Constraints

• The website will be developed using React to ensure a dynamic and responsive user interface.
• The backend will utilize FastAPI for efficient API management.
• The system will be hosted on a scalable infrastructure to handle varying loads.

Glossary

• User: An individual who uses the website or mobile app to order food.
• Admin: A staff member responsible for managing the website's content and orders.
• CTA: Call to Action, an element that prompts user interaction.

This document provides a comprehensive overview of the eagle-make project's requirements, ensuring a cohesive and user-friendly food delivery application.