A full-stack hotel booking application built with Django REST Framework (MySQL) and React.
It was created as an educational endeavor to explore full-stack web development concepts. The repository is maintained for reference and learning purposes only.
- Backend: Django, Django REST Framework, MySQL
- Frontend: React (Create React App), Axios
- Styling: Custom CSS with dark-theme gradients and glows
- Versioning: Git & GitHub
-
Clone the Repo
git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git cd YOUR_REPO -
Backend Setup
cd backend python -m venv venv venv\Scripts\activate # Windows # source venv/bin/activate # macOS/Linux pip install -r requirements.txt
Configure MySQL
- Create database:
CREATE DATABASE hotel_booking_db;
- (Optional) Create dedicated user, or use
rootinsettings.py. - In
hotelapi/settings.py, set:DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'hotel_booking_db', 'USER': 'root', 'PASSWORD': 'root', 'HOST': 'localhost', 'PORT': '3306', } }
- Create database:
-
Migrate & Create Superuser
python manage.py makemigrations python manage.py migrate python manage.py createsuperuser
- Username:
admin - Email:
admin@mail.com - Password:
root@123
- Username:
-
Run Backend
python manage.py runserver
- API root:
http://127.0.0.1:8000/ - API endpoints under:
http://127.0.0.1:8000/api/
- API root:
-
Frontend Setup (new terminal)
cd ../frontend npm install npm start- App:
http://localhost:3000
- App:
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/hotels/ |
List/Create hotels |
| GET | /api/hotels/{id}/ |
Retrieve/Update/Delete a specific hotel |
| GET | /api/rooms/ |
List/Create rooms |
| GET | /api/rooms/{id}/ |
Retrieve/Update/Delete a room |
| GET | /api/guests/ |
List/Create guests |
| GET | /api/guests/{id}/ |
Retrieve/Update/Delete a guest |
| GET | /api/bookings/ |
List/Create bookings (with date-conflict checks) |
| GET | /api/bookings/{id}/ |
Retrieve/Update/Delete a booking |
| PATCH | /api/bookings/{id}/ |
Partially update (e.g. cancel booking) |
- Full CRUD for hotels, rooms, guests, bookings
- Date-overlap validation prevents double-booking
- Cancel booking via status update
- Dark theme UI with gradients & glows
- Axios for clean API calls
- Django Admin for manual data management
-
Add Hotel & Rooms
- Visit Django Admin:
http://127.0.0.1:8000/admin/ - Create Hotel and Rooms.
- Visit Django Admin:
-
Add Guest
- Frontend: fill “Add Guest” form → Success message.
-
Book Room
- Frontend: fill “Book a Room” form → Success or “Room is already booked” error.
-
View & Cancel
- Frontend: “All Bookings” list → click Cancel Booking to free up the room.
Hotel Room Booking/
├── backend/
│ ├── hotelapi/ # Django project
│ ├── bookingapp/ # Models, APIs, serializers, views
│ ├── venv/ # Python virtualenv
│ ├── requirements.txt
│ └── manage.py
└── frontend/
├── public/
├── src/
│ ├── components/ # React components
│ ├── api.js # Axios instance
│ ├── HotelBooking.css # Dark-theme styling
│ └── App.js
└── package.json
Django Admin: Manage Hotels, Rooms, Guests, Bookings
Hotel List and Room List side-by-side
Collapsible Add Guest and Book Room forms
All Bookings list with cancel buttons
This project was developed as part of a comprehensive learning journey into full-stack web development. It demonstrates core concepts including REST API design, database modeling, frontend-backend integration, and modern web technologies. While AI assistance was utilized during development, the focus was on understanding architectural patterns and building production-aware code.
Special thanks to my mentor, Ms. Anjusha V L, for her guidance and support throughout this learning experience.
This Project is not licensed, you may use it for whatsoever.