BistroHub — Restaurant Manager 🍽️

A sleek, premium, high-fidelity restaurant listing platform built with a modern, responsive user experience. It provides full CRUD operations, live matching filters, robust inline validations, and a clean dark theme using standard CSS design tokens.

---

🚀 High-Level Architecture

The project consists of two main sections:

1. Backend (/backend): Built with Node.js, Express, and Sequelize ORM connecting to a PostgreSQL database.
2. Frontend (/frontend): Built with React 19 + Vite, styling custom tokens in CSS, and Axios for communication.

---

🛠️ Tech Stack Summary

• Frontend: React 19, Vite, Axios, HSL CSS variables, Google Fonts (Inter & Outfit), CSS grid and animations.
• Backend: Express (Node.js), Sequelize ORM, PostgreSQL driver (pg).
• Database: PostgreSQL (relational database).

---

📦 Setting Up the Project

1. Backend Setup

1. Navigate to the backend folder:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file inside the backend folder and add your PostgreSQL credentials:

   PORT=5000
   DB_HOST=localhost
   DB_PORT=5432
   DB_NAME=restaurant_db
   DB_USER=postgres
   DB_PASSWORD=your_password

4. Run migrations to create the database tables:

   npx sequelize-cli db:migrate

5. Start the backend server:

   npm run dev

   The server runs on http://localhost:5000 and connects to PostgreSQL.

---

2. Frontend Setup

1. Navigate to the frontend folder:

   cd ../frontend

2. Install dependencies:

   npm install

3. Start the React development server:

   npm run dev

   The application will open on http://localhost:5173/.

---

🧪 Verification & Features

• Live Search Filter: Search through the restaurant list on the fly by typing a restaurant name, location, phone number, or email.
• Responsive Cards Grid: Automatically snaps columns based on desktop, tablet, or phone screens.
• Add / Edit Modal: Smooth micro-animations with standard overlays, slide effects, validation error flags, and loading states.
• Delete Confirmation Overlay: Prevent accidental deletion using modular popups.
• Interactive Contacts: Clickable telephone links (tel:) and email links (mailto:) for immediate communication.