A Restaurant Booking Application
TasteSeat is a Restaurant Booking WebApp.
It is a FullStack Web Application which allows users to find new restaurants, make reservations, change reservations, and cancel reservations.
Link to the deployed project: TasteSeat
- The restaurant booking process is often frustrating and inefficient. I aim to create an easy-to-use, online system that makes reserving tables simple and hassle-free for customers.
- Offer a seamless interface that allows users to browse restaurant options effortlessly.
- Simplify the booking process and reduce the time spent to make a booking.
- Provide real-time availability information.
In summary, the goal of the restaurant booking system is to eliminate the friction involved in the booking process, leading to increased customer satisfaction, repeat visits, and enhanced operational efficiency for restaurants.
- Booking Management: Users can create, update, and delete bookings easily.
- User Authentication: Secure registration and login processes.
- Responsive Design: Optimized for mobile, tablet, and desktop devices.
The 404 error page displays an error message to the user and a link to go back to the Landing page.
- Integration with Calendars: Sync bookings with third-party calendar apps. So you see your booking in your own calendar
- Filters: Add filtering options for Restaurant categorization, such as Cuisine type and location.
- Admin Interface: A Application for the restaurant owners to manage their bookings.
- Email Integration: Send Emails to confirm actions(Booking confirmation, changes, etc).
- FeedBack and Reviews: Users could receive an email after 24h of the booking time to review and provide feedback to the restaurant. This could then be another filtering option by rating(Improvement number 2).
- Special Requests and Food Restrictions: Users can make special requests and alert the restaunts about any allergies/food restrictions.
- Overall user experience goal is to deliver simplicity, efficiency and enjoyment, by allowing users to quickly find and reserve tables with a minimal number of steps.
- Finding a restaurant
- Making a reservation
- Managing reservations
- Navigation
- Search Functionality
-
Responsiveness is vital for enhancing user experience because it ensures accessibility across various devices, improves user engagement, facilitates better navigation, enhances performance, and supports SEO efforts.
-
Responsive design can lead to higher user satisfaction, increased retention rates, and greater success for your web application.
- The application keeps the user informed at every step.
- User receives responses that enhance the understanding of the application.
- Users that are looking to reserve a table in a restaurant, food-lovers, users that are in a unknown area and need to book a table, and users looking to try new restaurants.
For more information regarding the User Stories, please see the GitHub project board: GitHub Board
The application follows a clean and modern color scheme, featuring calm colors designed for simplicity:
| Purpose | Color Code | Example Color |
|---|---|---|
| Primary Accent | #aca3d3 |
 |
| Secondary Accent | #9e9cc3 |
 |
| Highlight | #cd584f |
 |
| Background | #ebebea |
 |
| Light Font | #ffffff |
 |
| Dark Font | #2b2b2b |
 |
| Muted Background | #b7b3cd |
 |
| Accent Contrast | #ccc4e7 |
 |
| Highlight Contrast | #6c7c2c |
 |
| Tertiary Background | #746c76 |
 |
The application uses the following fonts for styling:
- Body Font: "bio-sans" (from Typekit) for content and UI clarity.
- Font for Headers: "new-spirit" (from Typekit) for the restaurant name and logo.
All Pages on the website are responsive and have: A favicon in the browser tab.
Clickable logo in the navigation bar.
- Users
- Restaurants
- Tables
- Bookings
- User ↔ UserProfile: One-to-One (Each user has a user profile)
- Restaurant ↔ Table: One-to-Many (Each restaurant can have many tables)
- Table ↔ Booking: One-to-Many (Each table can have many bookings)
- User ↔ Booking: One-to-Many (Each user can make many bookings)
- Booking ↔ Restaurant: Many-to-One (Bookings reference restaurants indirectly through the table)
- Python: The core programming language used to build the backend of this application.
- Django: A high-level Python web framework used for building the backend of the app. It provides tools for rapid development, including an ORM, authentication, and built-in admin panel.
- Django REST Framework: A powerful toolkit for building Web APIs in Django, enabling you to create and manage APIs for handling user interactions.
- PostgreSQL: A relational database management system used to store app data, including user information, bookings, and restaurant details.
- Cloudinary: A cloud storage service integrated for handling image uploads, allowing users to upload restaurant images easily.
- HTML5: Markup language used to structure the front-end of the application.
- CSS3: Styling language used to design the frontend of the app, including layout, responsiveness, and UI elements.
- JavaScript: Used to implement dynamic features and interactivity on the front end, such as guest selection and time slot handling.
- Bootstrap: A CSS framework used to design responsive, mobile-first websites. Used for UI components like buttons, forms, and modal windows.
- Heroku: A platform as a service (PaaS) used to deploy, manage, and scale the application in the cloud.
- GitHub: A code hosting platform used for version control and collaborative development of the project.
- Lucidchart: Used to design the ERD (Entity-Relationship Diagram) of the application's data models, depicting the relationship between entities.
These are the primary technologies used to create this web application. Together, they provide a strong foundation for rapid development and deployment in a production environment.
This project was designed using Agile methodology, utilizing the Project Board and Issues sections in GitHub
Please refer to TESTING.md file for all testing carried out.
- Accessibility: Validated with WAVE tools and Lighthouse for 100% accessibility scores.
- Code Validation: Passed through PEP8, ESLint and W3C CSS Validator.
The following steps can be followed for Deployment.
-
Link Your GitHub Repository to Heroku:
- Go to the Heroku Dashboard.
- Click on New → Create new app to create a new Heroku application.
- Give your app a name (or leave it to auto-generate) and choose the region (either United States or Europe).
- In the Deploy tab of the newly created app, scroll down to Deployment Method.
- Select GitHub as your deployment method.
- Connect your Heroku app to your GitHub account by clicking the Connect to GitHub button.
- After connecting, search for your repository and click Connect.
-
Configure Environment Variables (Config Vars):
- In the Settings tab of your Heroku app, scroll down to the Config Vars section.
- Set the following environment variables:
DATABASE_URL: Your Heroku PostgreSQL database URL.SECRET_KEY: A secret key for your Django app (generate it usingpython -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())').ALLOWED_HOSTS: Addyour-app-name.herokuapp.comto allow Heroku’s domain.CLOUDINARY_URL: Add your Cloudinary API URL to handle image uploads.HEROKU_APP_NAME: The name of your app (e.g.,your-app-name).
-
Deploy the Application:
- After linking your GitHub repository to Heroku, scroll to the Deploy tab.
- Under Manual Deploy, choose the branch (usually
mainormaster) and click Deploy Branch. - Heroku will then deploy your app from GitHub, and you can monitor the progress in the log section.
- Source: Favicon.io
- Description: The favicon and logo for the application were generated using Favicon.io.
- Source: Unsplash
- Description: The media and photos used for the restaurants were sourced from Unsplash, providing high-quality, free-to-use images.
I would like to acknowledge the following people:
- Jubril - My Code Institute Mentor.
- My family and friends for testing the application.