FlexiPod

This project was built for the Pod Booking System.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🤖 Introduction

Built with React to handle the user interface, Google Calendar to sync booked schedules, VnPay to process payments, MySQL (serverless) to manage databases, and styled with MUI, FlexiPod is a perfect web app. Its main goal is to provide customers with a more convenient way to book spaces.

👥 Meet the Team

FlexiPod was developed by a talented team of five passionate individuals:

Nguyễn Bùi Quốc Huy

Nguyễn Huy Hoàng

Huỳnh Chiếm Phương Nguyên (Leader)

Phạm Thị Anh Đào

Nguyễn Thanh Trí

⚙️ Tech Stack

• React
• Tanstack Query
• Firebase
• MySQL
• React Hook Form
• zod
• Stomp client
• MUI

🔋 Features

👉 Onboarding Flow: Seamless user registration and setup process.

👉 oAuth Using Google: Easy login using Google credentials.

👉 Authorization: Secure access control for different user roles.

👉 View Room Type: View a list of room types.

👉 Book Room: Book available rooms and amenities.

👉 Book Amenities: Book amenities available for the rooms you have reserved.

👉 Send Google Calendar Invite After Successful Payment: Send a Google Calendar invite after confirming payment.

👉 Profile: View account details in the profile screen.

👉 History Booking: Review all rooms booked so far.

👉 Cancel Booking: Cancel room booking.

👉 Manage Order: Create, and update information of order.

👉 Manage Order Amenity: Create, and update information of order amenity.

👉 Manage Building: CRUD with building.

👉 Manage Amenity: CRUD with amenity.

👉 Manage account user: Create, update, and ban accounts in real-time.

👉 Manage assignment: The admin or manager can view and assign a shift for staff at the location.

👉 Responsive on mobile and pc: Optimized for both mobile and pc devices.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/nguyenhcp2004/pod-booking-system-client.git
cd pod-booking-system-client

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

VITE_API_ENDPOINT=
VITE_URL=
VITE_GOOGLE_CLIENT_ID=
VITE_GOOGLE_AUTHORIZED_REDIRECT_URI=
VITE_CLOUDINARY_CLOUD_NAME=
VITE_CLOUDINARY_UPLOAD_PRESET=
VITE_VNPAY_RETURN_URL=
VITE_VNPAY_RETURN_URL_AMENITY=
VITE_VNPAY_RETURN_ADMIN_URL=
VITE_VNPAY_RETURN_STAFF_AMENITY_URL=
VITE_SOCKET_URL=
VITE_API_KEY=
VITE_AUTH_DOMAIN=
VITE_PROJECT_ID=
VITE_STORAGE_BUCKET=
VITE_MESSAGING_SENDER_ID=
VITE_APP_ID=
VITE_MEASUREMENT_ID=

Replace the placeholder values with your actual credentials. You can send mail for me to get .env for testing.

Running the Project

npm run dev