Restaurant Web Application

Overview

This project is a restaurant management web application that allows users to browse dishes, place orders, and manage them. It consists of a frontend built with Astro, Svelte, and Tailwind CSS, and a backend built with FastAPI and SQLAlchemy.

Features

Frontend

• Dynamic Dish Display: Fetch and display dishes based on categories.
• Cart Management: Add, update, and remove items from the cart.
• Order Placement: Send orders to the backend.
• Order History: Track previously ordered items.
• Responsive Design: Optimized for various screen sizes.

Backend

• Dish Management: CRUD operations for dishes.
• Order Management: Create, retrieve, and delete orders.
• Database Integration: Uses MySQL with SQLAlchemy ORM.
• API Endpoints: RESTful APIs for frontend communication.

Tech Stack

Frontend

• Astro: Static site generator.
• Svelte: Component-based framework.
• Tailwind CSS: Utility-first CSS framework.

Backend

• FastAPI: Python web framework.
• SQLAlchemy: ORM for database operations.
• MySQL: Relational database.

Installation

Prerequisites

• Node.js (v16+)
• Python (v3.10+)
• MySQL Database

Backend Setup

1. Navigate to the backend directory:

   cd backend
   

2. Create a virtual environment:

   python -m venv venv
   

3. Activate the virtual environment:
   • On Windows:

     venv\Scripts\activate
     

   • On macOS/Linux:

     source venv/bin/activate
     

4. Install dependencies:

   pip install -r requirements.txt
   

5. Set up the database:
   • Update the DATABASE_URL in .env with your MySQL credentials.
   • Run the database migrations:

     alembic upgrade head
     

6. Populate the database with sample data:

   python app/populate_db.py
   

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

Running the Application

To start both the backend and frontend simultaneously:

1. Run the provided batch script:

   ./runBEandFE.bat
   

2. Access the application:
   • Frontend: http://localhost:4321
   • Backend API: http://127.0.0.1:8000/docs

Project Structure

Backend

• app/: Contains the main application logic.
  • routers/: API route definitions.
  • models.py: Database models.
  • schemas.py: Pydantic schemas for data validation.
  • crud.py: Database operations.
• alembic/: Database migration scripts.
• .env: Environment variables.

Frontend

• src/: Source code.
  • components/: Svelte components.
  • utils/: Utility functions and stores.
  • pages/: Astro pages.
  • styles/: Global CSS styles.
• astro.config.mjs: Astro configuration.
• tailwind.config.js: Tailwind CSS configuration.

API Endpoints

Dishes

• GET /api/dishes: Fetch dishes with optional filters.
• POST /api/orders: Create a new order.

Orders

• GET /api/orders: Retrieve all orders.
• DELETE /api/orders/{order_id}: Delete an order by ID.

Commands

Backend

Frontend

Contributing

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name
   

3. Commit your changes:

   git commit -m "Add your message"
   

4. Push to the branch:

   git push origin feature/your-feature-name
   

5. Open a pull request.

License

This project is licensed under the MIT License.

Acknowledgments

• Astro
• Svelte
• Tailwind CSS
• FastAPI
• SQLAlchemy