GYM Slot Booking Web app

ReactJS based Web Application to book slots for Gym. This app was created and hosted on AWS for Gym at Shiv Nadar University to replace manual booking every sunday

Tech Stack

• FrontEnd: ReactJS
• BackEnd: Python FastAPI https://github.com/rahul-madaan/phone-one-server
• Database: MySQL
• Hosting: AWS Amplify

Features

• Users can book a slot for 1 week
• Admin can control the number of slots availble at a time
• To avoid race condition, once user has clicked on select slot button it is temporarily reserved for 15 minutes
• User can mark attendance using the web app
• Only one user can mark attendance for a device
• User needs to be present inside the gym to mark attendance (Collects location data)
• Admin can contol the number of missed days after which user will not be allowed to book slot for the next week.

Initial Setup

1. Install Node and NPM - Follow steps here: https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac
2. Download and install MySQL - Follow steps here: https://www.javatpoint.com/how-to-install-mysql
3. Clone the repo using git clone https://github.com/rahul-madaan/IDmyPhone.git command
4. Open the project in IntelliJ Idea(preferred)
5. Open terminal/command prompt and cd into the project folder
6. Run commands npm install and npm start (npm install will take time for initial setup)
7. Start MySQL server on your machine.
8. Run create schema script from ./SQL scripts
9. Populate database with seed data using the ./SQL scrips/data folder commands.
10. Run https://github.com/rahul-madaan/phone-one-server python FastAPI on local machine (port 8000).
11. Run command npm start to start the ReactJS server on port 3000
12. Open http://localhost:3000/ on your browser.

Database UML Diagram

User Interface

Login Page

Register Page

Select your gym days

Screen.Recording.2023-02-03.at.11.54.40.PM.mov

Select Gym Slot

Confirm slot details

Mark Attendance

Notifications