Welcome to Book|Dine, your online restaurant reservation platform. This app allows users to discover, book tables, and review restaurants for a seamless dining experience.
Some features on the site are available exclusively to registered users, including viewing your reservation history, saving favorite restaurants, and adding restaurant reviews.
Users can search for restaurants, view restaurant details, make reservations, and manage their bookings. There is also a feedback page, a privacy policy, and a section on cancellation and modification of reservations.
- BookDine Application Documentation
Table of contents generated with markdown-toc
The primary goal of the Book Dine project is to provide an exceptional user experience for both customers and restaurant staff. Customers will enjoy a seamless and intuitive process for booking reservations, viewing available tables, and managing their bookings. The system is designed with a clean and modern interface, ensuring ease of use and accessibility across various devices.
Restaurant staff will benefit from a comprehensive administrative interface that streamlines the management of bookings, tables, and customer information. This interface is user-friendly and efficient, allowing staff to quickly access and update relevant data, ensuring smooth operations and excellent customer service.
-
Develop a user-friendly restaurant booking system: Implement a web-based application that allows customers to easily book reservations, view available tables, and manage their bookings.
-
Provide an administrative interface: Create a secure and comprehensive administrative interface for restaurant staff to manage bookings, tables, customer information, and other relevant data.
-
Ensure data integrity and security: Implement robust data validation and security measures to protect customer information and ensure the integrity of the booking system.
-
Enhance customer experience: Incorporate features that enhance the customer experience, such as email confirmations, reminders, and the ability to leave reviews or feedback.
-
Optimize for performance and scalability: Develop the system with performance and scalability in mind, ensuring it can handle high traffic and grow with the restaurant's needs.
-
Ensure responsiveness and accessibility: Design the user interface to be responsive and accessible across various devices and platforms, ensuring a consistent and inclusive experience for all users.
- Users looking to easily book a table at their favorite restaurants.
- Restaurant patrons seeking to manage their reservations and receive booking confirmations.
- Restaurant staff needing to manage customer reservations and tables efficiently.
- Enable users to swiftly and effortlessly book tables at restaurants.
- Facilitate an easy process for managing bookings and reservations.
- Provide restaurant staff with the ability to manage customer information, bookings, and tables through a secure and efficient administrative interface.
- Ensure a responsive and accessible interface for users across all devices.
The project is developed using Agile methodology to effectively prioritize and organize tasks. This involves creating user stories and utilizing Project Boards on GitHub.
To prioritize development efforts, features were classified into the following categories:
- Must Have: Essential features required for the core functionality.
- Should Have: Important features that enhance the product but are not critical for the initial release.
- Could Have: Features that are nice to have but not necessary.
- Won't Have: Features that are not included in the current iteration.
This classification facilitated the determination of feature importance and helped in managing development priorities effectively.
The product section was given the highest priority, receiving the most attention and resources to ensure its completion and quality.
For more details on the project's progress and planning, visit the Project Board.
Based on the collected user stories, a project implementation plan was developed. You can review the user stories here.
Each user story was assigned a point value reflecting its implementation complexity. The MoSCoW principle (Must Have, Should Have, Could Have, Won't Have) was used to plan iterations and prioritize tasks.
Milestones for the project can be reviewed here.
The color scheme for the restaurant booking system has been updated to be bold and modern, utilizing vibrant colors to capture attention and create a lively atmosphere.
/* Color variables */
:root {
--primary-color: #ff5733; /* Spicy Red */
--secondary-color: #ffc300; /* Bright Yellow */
--accent-color: #c70039; /* Deep Pink */
--danger-color: #dc3545; /* Bootstrap danger color */
--text-color: #333333; /* Dark gray */
--background-color: #ffffff; /* White */
--background-hover: #f1f1f1; /* Light hover */
}Below are wireframe examples for different sections of the booking system:
Click to view wireframes
-
Homepage Wireframe:
-
The homepage will display the restaurant's information, navigation links, and a section for booking reservations.
-
It will have a clean and modern layout with easy access to other parts of the site.
-
-
User Registration and Login Wireframe:
-
The registration form will include fields for the user's name, email, password, and contact information.
-
The login form will have fields for the email and password, with a link to reset the password if needed.
-
-
Booking Interface Wireframe:
-
The booking interface will allow users to select a date, time, and number of guests for their reservation.
-
It will display available tables and provide options to confirm or modify the booking.
-
-
Admin Interface Wireframe:
-
The admin interface will provide tools for managing bookings, tables, customer information, and generating reports.
-
It will have a dashboard with an overview of the current bookings and quick access to key functionalities.
-
The user journey includes the following key steps:
- Registration: New users can create an account by providing their details.
- Login: Registered users can log in to access their account and make reservations.
- Booking: Users can select a date, time, and number of guests to book a table.
- Confirmation: After booking, users receive a confirmation email with the reservation details.
- Modification: Users can view and update their reservations if needed.
- Cancellation: Users can cancel their reservations, freeing up the table for others.
The database scheme will include tables for users, bookings, tables, and reviews:
- Users: Stores user information such as name, email, password, and contact details.
- Bookings: Stores booking details including user ID, table ID, date, time, and number of guests.
- Tables: Stores information about the restaurant's tables including table number, capacity, and availability status.
- Reviews: Stores user reviews and ratings for the restaurant.
- Fields: id, name, email, password, contact
- Relationships: One-to-Many relationship with bookings and reviews
- Fields: id, user_id, table_id, date, time, number_of_guests
- Relationships: Many-to-One relationship with users and tables
- Fields: id, table_number, capacity, availability_status
- Relationships: One-to-Many relationship with bookings
- Fields: id, user_id, rating, comment, date
- Relationships: Many-to-One relationship with users
An ERD diagram will visually represent the relationships between the different tables in the database.
The booking system will include the following security features:
- Data Encryption: All sensitive data, such as passwords, will be encrypted using strong encryption algorithms.
- Input Validation: All user inputs will be validated to prevent SQL injection and other common attacks.
- Access Control: User roles and permissions will be implemented to ensure that only authorized users can access certain features and data.
- Secure Communication: All communication between the client and server will be encrypted using HTTPS.
- User Registration and Login: Users can create an account and log in to access their profile and booking features.
- Booking System: Users can book a table by selecting the date, time, and number of guests.
- Admin Interface: Restaurant staff can manage bookings, tables, and customer information through a secure admin interface.
- Email Notifications: Users receive email confirmations and reminders for their bookings.
- Review System: Users can leave reviews and ratings for the restaurant.
- Booking Modification and Cancellation: Users can view, update, and cancel their reservations.
- Responsive Design: The website is fully responsive and accessible on all devices.
- Advanced Search and Filter: Users can find available tables based on various criteria.
Click to view screenshots
- User Registration:
- User Login:
- Booking Page:
- Admin Login:
- Admin Dashboard:
- Email Confirmation:
- Email Reminder:
- Leave a Review:
- View Reservations:
- Modify Reservation:
- Cancel Reservation:
- Responsive Home Page (Mobile):
- Responsive Booking Page (Tablet):
- Search Page:
To run the project locally:
- Clone the repository:
git clone <repository-url> - Create a virtual environment:
python -m venv venv - Activate the virtual environment:
- On Windows:
venv\Scripts\activate - On macOS/Linux:
source venv/bin/activate
- On Windows:
- Install the dependencies:
pip install -r requirements.txt - Set up the database:
python manage.py migrate - Create a superuser for the admin interface:
python manage.py createsuperuser - Run the development server:
python manage.py runserver
To set up the ElephantSQL database:
- Create an account on ElephantSQL and create a new PostgreSQL instance.
- Copy the database URL provided by ElephantSQL.
- Update the Django settings file to use the ElephantSQL database URL.
To set up Cloudinary for image storage:
- Create an account on Cloudinary and get the API credentials.
- Update the Django settings file with the Cloudinary API credentials.
To deploy the project to Heroku:
- Create a Heroku account and install the Heroku CLI.
- Log in to Heroku:
heroku login - Create a new Heroku app:
heroku create <app-name> - Set up the Heroku PostgreSQL add-on:
heroku addons:create heroku-postgresql:hobby-dev - Push the code to Heroku:
git push heroku main - Set up the necessary environment variables in Heroku.
During the development of this project, I conducted various tests to ensure the proper functioning of the website. In this section, you will find documentation on all tests performed on the site.
I tested all my code using each language's preferred programming tools.
I have used the recommended HTML W3C Validator to validate all of my HTML files.
| File | W3C Validation URL | Screenshot | Notes |
|---|---|---|---|
| index.html | Link |  |
Pass: No Errors |
| reservation.html | Link |  |
Pass: No Errors |
| book_table.html | Link |  |
Pass: No Errors |
I have used the recommended CSS Jigsaw Validator to validate all of my CSS files.
| File | Jigsaw URL | Screenshot | Notes |
|---|---|---|---|
| style.css | Link |  |
Pass: No Errors |
I have used the recommended CI Python Linter to validate all of my Python files for BookDine.
| File | CI Linter URL | Screenshot | Notes |
|---|---|---|---|
| views.py | Link |  |
Pass: No Errors |
| models.py | Link |  |
Pass: No Errors |
| urls.py | Link |  |
Pass: No Errors |
Below are the results of manual testing for the Book Dine app:
| Page | User Action | Expected Result | Pass/Fail | Comments |
|---|---|---|---|---|
| Home Page | ||||
| Click on Logo | Redirection to Home page | Pass | ||
| Click on a restaurant card | Redirection to Restaurant Detail page | Pass | ||
| Click on the "Sign Up" button | Redirection to Sign Up page | Pass | ||
| Click on the "Sign In" button | Redirection to Sign In page | Pass | ||
| User Registration and Login | ||||
| Navigate to the registration page. | Redirection to Registration page | Pass | ||
| Fill in the registration form with valid details and submit. | User is registered, and a confirmation message is displayed. User is redirected to the login page. | Pass | ||
| Navigate to the login page. | Redirection to Login page | Pass | ||
| Enter valid login credentials and submit. | User is logged in, and the dashboard is displayed. | Pass | ||
| Booking a Reservation | ||||
| Navigate to the booking page. | Redirection to Booking page | Pass | ||
| Select a date, time, and number of guests, and submit the form. | Reservation is created, and a confirmation message with reservation details is displayed. | Pass | ||
| Log in as a user and navigate to the reservations page. | The list of reservations is displayed correctly with details. | Pass | ||
| Updating and Canceling Reservations | ||||
| Navigate to the reservations page, select a reservation to update, modify the details, and submit. | Reservation is updated, and a confirmation message with updated details is displayed. | Pass | ||
| Navigate to the reservations page, select a reservation to cancel, and confirm cancellation. | Reservation is removed, and a confirmation message is displayed. | Pass | ||
| Reviewing a Restaurant | ||||
| Navigate to a restaurant's detail page, fill in the review form, and submit it. | Review is submitted and displayed on the restaurant's detail page. | Pass | ||
| Navigate to a restaurant's detail page. | The list of reviews is displayed correctly with details such as reviewer name, rating, and comments. | Pass |
Automatic testing results are below.
I have used Django's built-in unit testing framework to test the application functionality.
In order to run the tests, I ran the following command in the terminal each time:
python3 manage.py test
python-m coverage report
-
400 Bad Request:
- Trigger a 400 error (e.g., by sending a malformed request).
- Verify that the custom 400 error page is displayed.
-
500 Internal Server Error:
- Trigger a 500 error (e.g., by causing an exception in the code).
- Verify that the custom 500 error page is displayed.
I would like to acknowledge the following individuals who have contributed to the development of this project:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent