Restaurant Booking Website - Client

Overview

This is the frontend for the Restaurant Booking Website. It is built using React and ViteJS for a modern, fast user interface. The application uses Material UI for consistent and responsive design. It is deployed on Vercel with continuous deployment enabled.

---

Screenshots

---

Features

• Responsive Design: Mobile-friendly and accessible UI.
• Booking Interface: Allows users to browse and book available slots.
• Restaurant Registration: Allows users to register their own restaurants.
• Reservation Management: Allows restaurant owners to list and manage reservations.
• Restaurant Management: Allows restaurant owners to manage their restaurant's information, photos and menu.
• Authentication: Integrates with the backend for user login and registration.
• Real-Time Feedback: Dynamic updates and feedback for user actions.
• Google Maps Integration: Show restaurants location in embedded Google Maps using restaurant's address.
• Continuous Deployment: Deployed on Vercel with continuous deployment.

---

Tech Stack

• Frontend Framework: React (ViteJS)
• UI Library: Material UI
• State Management: TanStack React Query
• Routing: React Router
• Deployment: Vercel
• Testing: Vitest
• CI/CD: Continuous deployment using GitHub Actions

---

Setup and Installation

Prerequisites

• Node.js 20+
• npm or yarn

Installation Steps

1. Clone the Repository:

   git clone https://github.com/ozlemhafalir/restaurant-booking-client
   cd restaurant-booking-client

2. Install Dependencies:

   npm install
   # or
   yarn install

3. Set Environment Variables: Copy .env file in the project root to .env.local and update with correct local configuration:

   cp .env .env.local

   Example local configuration:

   VITE_API_HOST=http://127.0.0.1:8000

4. Run the Development Server:

   npm run dev
   # or
   yarn dev

---

Deployment

The client is deployed on Vercel. Continuous deployment is set up to trigger whenever changes are pushed to the main branch.

Folder Structure

client/
├── src/
│   ├── components/    # Reusable components
│   ├── pages/         # Application pages
│   └── main.jsx       # Main app component
├── public/            # Static assets
├── .env               # Environment variables
├── vite.config.js     # Vite configuration
└── package.json       # Project metadata and dependencies

---

Available Scripts

Development Server

npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

Run Automated Tests

npm run test