BookMyTable - PP4

BookMyTable is a web application designed to streamline the restaurant reservation process and menu management. This project, developed by Florin Pinta (xttrust), serves as a comprehensive solution for both diners and restaurant staff, offering an intuitive platform to handle reservations and menu items efficiently.

Explore the live application at BookMyTable Deployed Site.

Table of Contents

1. Project Overview
2. Features
3. Technologies Used
   • Technologies Used
   • Languages Used
   • Python Modules Imported
4. Testing
   • Lighthouse
   • Code Validation
     • HTML
     • CSS
     • Python
   • Unit test - automated
   • Browser Testing
   • Device Testing
   • Manual Testing
5. Bugs
   • Fixed Bugs
6. Deployment
   • Pre-Deployment Checklist
   • Deploying on Heroku
   • Forking the Repository
   • Cloning the Repository
   • Running the Repository Locally
7. Credits
   • Content
   • Media
   • Code
8. Acknowledgements

User Experience

User Stories

New User

1. As a user, I can register for an account so that I can make and manage reservations. #6

2. As a user, I can log into my account so that I can access my reservations and profile. #7

3. As a user, I can view available tables for a specific date and time so that I can choose a suitable table for my reservation. #9

4. As a user, I can book a table so that I can dine at the restaurant. #11

5. As a user, I can view my upcoming reservations so that I can manage my bookings. #12

6. As a user, I can see a booking confirmation on the website so that I have proof of my reservation. #17

Existing User

1. As an existing user, I can view and manage my reservations so that I can keep track of my dining plans. #12

Admin

1. As an admin, I can view and manage all bookings so that I can ensure smooth operations and resolve any issues promptly. #14

2. As an admin, I can manage menu items so that I can update and maintain the restaurant’s offerings. #23

3. As an admin, I can manage menu categories so that I can organize the restaurant’s menu effectively. #22

4. As an admin, I can display formatted descriptions in the admin list view so that information is presented clearly. #24

Testing and Documentation

1. As a developer, I can write tests to ensure the application functions as expected. #20

2. As a developer, I can write documentation so that users and developers understand how to use and contribute to the project. #21

Site Goals

1. Simplify the Restaurant Reservation Process: Provide an intuitive and efficient platform for users to book and manage restaurant reservations effortlessly.

2. Enhance Dining Experience: Offer users the ability to view detailed information about available tables, including real-time availability, to ensure a seamless dining experience.

3. Streamline Menu Management: Allow restaurant staff to easily update and manage menu items and categories, ensuring that diners have access to the latest offerings.

4. Facilitate User Account Management: Enable users to create, access, and manage their accounts, reservations, and preferences securely and conveniently.

5. Improve Administrative Efficiency: Equip restaurant administrators with robust tools to oversee reservations, manage menu items, and handle customer interactions efficiently.

6. Ensure Scalability and Performance: Develop a scalable platform that can handle varying levels of traffic and user activity without compromising performance.

Scope

The BookMyTable application aims to provide a streamlined and efficient platform for restaurant reservations and menu management. The scope of the project includes:

1. User Account Management: Enabling users to register, log in, and manage their profiles.

2. Table Reservation System: Allowing users to view available tables, make reservations, and manage their bookings.

3. Menu Management: Facilitating restaurant staff in managing menu items and categories.

4. Administrative Features: Offering tools for administrators to oversee reservations, manage users, and maintain restaurant details.

5. System Notifications: Providing clear notifications for user actions such as login, logout, registration, table reservations, and updates to ensure a smooth user experience.

6. Testing and Documentation: Ensuring comprehensive testing and providing clear documentation for developers and users.

Epics

Epic 1: User Account Management

• User Registration: As a user, I want to register for an account to manage reservations. #6

• User Login: As a user, I want to log into my account to access my reservations. #7

Epic 2: Table Reservation

• View Available Tables: As a user, I want to view available tables for a specific date and time. #9

• Make a Reservation: As a user, I want to book a table for dining. #11

• View My Reservations: As a user, I want to view and manage my upcoming reservations. #12

Epic 3: Admin Management

• Manage Reservations: As an admin, I want to view and manage all bookings. #14

• Manage Menu Items: As an admin, I want to manage menu items. #23

• Manage Menu Categories: As an admin, I want to manage menu categories. #22

• Display Formatted Descriptions in Admin List View: As an admin, I want formatted descriptions in the admin list view. #24

Epic 4: System Notifications

• Login Notification: As a user, I want to receive a notification upon successful login.

• Logout Notification: As a user, I want to receive a notification upon successful logout.

• Registration Notification: As a user, I want to receive a notification upon successful registration.

• Reservation Notification: As a user, I want to receive a notification upon successful table reservation.

• Update Reservation Notification: As a user, I want to receive a notification when a reservation is updated.

• Delete Reservation Notification: As a user, I want to receive a notification when a reservation is deleted.

Epic 5: Testing and Documentation

• Write Tests: As a developer, I want to write tests to ensure the application functions correctly. #20

• Write Documentation: As a developer, I want to write documentation to help users and future developers. #21

Design

Goal

The design of BookMyTable aims to provide a clean, modern, and user-friendly interface that enhances the user experience for both diners and restaurant staff. By utilizing the default Bootstrap 5 theme, we ensure a responsive and consistent look across different devices and screen sizes. This choice simplifies the design process while maintaining a professional appearance.

Colour Scheme

The default Bootstrap 5 color scheme has been selected for BookMyTable. These colors are carefully chosen to provide a balanced and visually appealing aesthetic that suits a wide range of applications. The Bootstrap 5 palette ensures excellent readability and accessibility, which is essential for a diverse user base. The familiar and neutral tones help create a welcoming and easy-to-navigate environment for users. You can view the default Bootstrap colors here.

Models

User Model

The User model is a fundamental component of Django's authentication system, providing essential fields for user management such as username, email, and password. It facilitates user authentication and authorization, serving as the backbone for user interactions within the application. The default User model is extended via the admin interface to include additional functionalities specific to the application's needs.

Reservation Model

The Reservation model manages the booking details for tables within the restaurant. It includes fields such as the user who made the reservation, the date and time of the reservation, the number of guests. This model is crucial for handling the core functionality of table reservations, ensuring smooth booking and management processes.

MenuItem Model

The MenuItem model represents individual dishes or drinks available at the restaurant. It includes fields for the item name, description, price, and category (e.g., appetizer, main course, dessert). This model allows for efficient management and updating of the restaurant's menu offerings, ensuring diners have access to the latest menu items.

MenuCategory Model

The MenuCategory model organizes menu items into categories, making it easier for users to browse through the restaurant's offerings. It includes fields for the category name and a description. This hierarchical structure enhances the user experience by providing a clear and organized menu layout.

Notification Model

The Notification model manages system notifications for various user actions such as login, logout, registration, and reservation updates. It includes fields for the notification type, message content, and the user to whom the notification is sent. This model ensures users are kept informed of important events and actions related to their account and reservations.

Database Diagram

Fonts

Font Awesome

Font Awesome is used for a wide range of icons and vector graphics that enhance the visual appeal of the application. It provides a versatile and easy-to-use set of icons that are seamlessly integrated into the design.

• Font Awesome CSS: Font Awesome CDN

Google Fonts

To ensure a clean and modern typography, I use Google Fonts. This provides a selection of high-quality, web-safe fonts that are easy to read and visually appealing.

• Roboto: A sans-serif font used for its readability and modern look.

  • Roboto Google Font

• Lato: A sans-serif font known for its friendly and open appearance, used in various weights for headings and body text.

  • Lato Google Font

Wireframes

Desktop

Home

Contact

Login

Logout

Register

Reserve Table

View Reservations

Mobile

Home

Contact

Login

Logout

Register

Reserve Table

View Reservations

Agile Methodology

In my project, BookMyTable, I use Agile methodology to help manage the development process effectively. Here’s how it works:

1. Work in Short Cycles (Sprints)

   • I break the project into small, manageable chunks called sprints, each lasting about two days to one week. At the end of each sprint, I review what has been accomplished and plan the next steps.

2. Define What to Build (User Stories)

   • I write user stories to describe what features or improvements are needed. Each story outlines what needs to be done from the user’s perspective, making it clear what the goal is.

3. Daily Check-ins

   • I do quick daily updates to keep track of progress, identify any problems, and stay focused on the goals for the current sprint.

4. Plan the Sprint

   • At the start of each sprint, I plan which user stories or tasks I will work on. This helps me set clear goals and manage my time effectively.

5. Review and Get Feedback

   • At the end of each sprint, I review the work done and gather feedback. This helps me ensure the project is on the right track and meets the desired goals.

6. Reflect and Improve

   • After each sprint, I take time to reflect on what went well and what could be improved. This helps me make better decisions and improve my process for the next sprint.

7. Stay Flexible

   • I remain open to changes and adapt my plans as needed based on feedback or new insights. This flexibility helps me respond to any changes or challenges that arise.

By using Agile, I manage the project in a way that allows for regular progress checks, continuous improvement, and adjustments based on feedback. This approach helps me stay organized and focused while adapting to new information and ensuring the project evolves effectively.

GitHub Projects/Board

The project adopted a basic Board structure, which was divided into columns such as Todo, In Progress, and Done. This setup provided a clear and organized way to track the progress of tasks, making it easier to visualize and manage the workflow throughout the development process. The GitHub project Board was linked to the repo for consistent reference.

View GitHub Board

Features

Navigation Header

The navigation bar is a consistent element across all pages, designed using Bootstrap and optimized for full responsiveness. The layout is as follows:

• Left Side: Displays the website name.
• Middle: Contains the main menu for navigation through the website’s content.
• Right Side: Dedicated to user authentication. Authenticated users have additional options to create posts and view their profile, while unauthenticated users are prompted to log in or register.

In the mobile version of the navbar, all content is accessible via a hamburger icon. Clicking this icon displays a dropdown with all navigation links.

Desktop

Mobile

Authenticated

Unauthenticated

Footer

The footer is designed to provide essential information and quick links. The layout is as follows:

• Left Side: Displays the website name.
• Center: Includes a message stating "Made with love by Florin Pinta."
• Right Side: Contains social media icons linking to various social platforms.

Footer Desktop

Footer Mobile

Hero

The Hero section is designed to capture attention and convey the core value of BookMyTable at a glance. It features a prominent, engaging headline and a brief description that highlight the main benefits of the application. This section includes a call-to-action button to encourage users to explore further or get started with the service. The design is visually appealing, utilizing large background images or graphics to create an impactful introduction to the platform.

Hero Desktop

Hero Mobile

About Us

Section Breakdown

• Header: The section begins with a centered headline "About Us" and a brief description that emphasizes the balance between excellence and affordability in the services provided.

• Service Features: The section is divided into three main features, each represented by an icon, a headline, and a descriptive text. These features highlight the primary offerings of the application:

About Us Desktop

About Us Mobile

This section effectively communicates the core features of BookMyTable in a clean and engaging layout. The use of icons and descriptive text helps users quickly understand the benefits of the platform, enhancing their overall experience.

Our Menu

Section Breakdown

• Header: The section starts with a centered headline "Our Menu" and a brief description inviting users to explore the diverse menu crafted with passion and fine ingredients. The description highlights the variety available, from hearty breakfasts to delightful dinners, catering to both casual meals and special occasions.

• Menu Tabs: The section features a set of navigation tabs for different menu categories. Each tab corresponds to a category of menu items, allowing users to easily switch between different sections of the menu.

• Menu Content: Below the tabs, the content displays the items in each category. Each item is showcased with an image, name, description, and price. If an item doesn’t have an image, a default placeholder is used.

• Call to Action: At the bottom of the section, a button invites users to see more menu items, linking to a dedicated page for a comprehensive menu view.

Menu Desktop

Menu Mobile

This section provides a structured and engaging way to explore the diverse offerings of BookMyTable. The use of tabs and cards ensures a user-friendly experience, allowing visitors to browse through various menu categories and view detailed information about each item.

For a detailed view of all menu items, including pagination and individual category listings.

Detailed view of all menu items

Login

Section Breakdown

• Header: The section starts with a centered headline "Login" and a brief description encouraging users to enter their credentials to access their account.

• Login Form: This includes fields for entering the username and password, as well as buttons for submitting the login information or navigating to the registration page.

• Call to Action: A link is provided for users who need to register a new account or recover a forgotten password.

Login Desktop

Login Mobile

This section allows users to securely access their accounts on BookMyTable. The simple and straightforward login form ensures a quick and easy sign-in process.

Register

Section Breakdown

• Header: The section begins with a centered headline "Register" and a description inviting users to create a new account to start using the services.

• Registration Form: Contains fields for entering personal information such as name, email, and password, along with a submit button to create the account.

• Call to Action: A link for users who already have an account, directing them to the login page.

Register Desktop

Register Mobile

This section helps new users set up their accounts on BookMyTable, making it easy to start enjoying the platform’s features.

Logout

Section Breakdown

• Header: The section starts with a headline "Logout" and a short description confirming that the user is about to log out of their account.

• Logout Confirmation: Includes a button to confirm the logout action, ensuring users can easily exit their account.

• Call to Action: A link or button to log back in if users decide to return to their account.

Logout Desktop

Logout Mobile

This section ensures users can securely log out of BookMyTable, with clear options to return to their account if needed.

My Reservations

Section Breakdown

• Header: The section features a centered headline "My Reservations" with a description highlighting the ability to view and manage past and upcoming reservations.

• Reservation List: Displays a list or table of past and upcoming reservations, including details such as date, time, and status.

• Call to Action: Links to make a new reservation or modify existing ones.

My Reservations Desktop

My Reservations Mobile

This section allows users to easily manage their reservations on BookMyTable, providing a clear overview of their booking history.

Reserve a Table

Section Breakdown

• Header: The section starts with a headline "Reserve a Table" and a description encouraging users to book a table for their dining needs.

• Reservation Form: Includes fields for selecting the date, time, number of guests, and any special requests, along with a submit button to finalize the reservation.

• Call to Action: A link or button to view existing reservations or contact support for assistance.

Reserve a Table Desktop

Reserve a Table Mobile

This section provides a user-friendly interface for booking a table on BookMyTable, ensuring a smooth and hassle-free reservation process.

Contact

Section Breakdown

• Header: The section begins with a centered headline "Contact Us" and a brief description inviting users to get in touch with any questions or feedback.

• Contact Form: Includes fields for users to enter their name, email address, subject, and message, along with a submit button to send the inquiry.

Form Handling

• Success Message: On successful submission of the contact form, users will see a confirmation message: "Your message has been sent successfully." This message confirms that the inquiry has been received and will be addressed.

  Contact Success Message

  

• Failure Message: If the form submission fails due to validation errors or server issues, users will see an error message indicating what went wrong. This ensures that users are aware of the issue and can correct their input.

Django Handling

• Form Processing: In Django, form submissions are handled in the view function associated with the contact form. Upon submission, the form data is processed and validated.

  • On Success: If the form data is valid, Django typically redirects the user to a success page or displays a success message on the same page using Django's messages framework.

  • On Failure: If the form data is invalid (e.g., missing required fields, incorrect email format), Django will re-render the form with error messages for each invalid field. The user is prompted to correct their input and resubmit the form.

• Messages Framework: Django’s messages framework is used to store and display one-time messages to users. It helps in providing feedback such as success or error messages after form submissions.

HTML5 Validation

• Required Fields: The contact form uses HTML5 attributes like required to ensure that users fill out all necessary fields. This client-side validation helps prevent form submission if required fields are empty.

  <form method="post" action="{% url 'contact' %}">
      {% csrf_token %}
      <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" class="form-control" required>
      </div>
      <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" class="form-control" required>
      </div>
      <div class="form-group">
          <label for="subject">Subject</label>
          <input type="text" id="subject" name="subject" class="form-control" required>
      </div>
      <div class="form-group">
          <label for="message">Message</label>
          <textarea id="message" name="message" class="form-control" rows="5" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send</button>
  </form>

• Validation Feedback: HTML5 provides instant feedback on invalid fields. For example, if a user tries to submit the form with an invalid email address or missing required fields, the browser will display a default error message.

This section provides a comprehensive view of how the contact form operates, from user interaction to server-side processing.

Technologies

Technologies Used

• Bootstrap was used to quickly layout the responsive structure of the website
• Chat-GPT was used to create all written content of the website
• GitPod Version of CI (VS Code) I used CodeInstitute ide to build this website
• moqups - Wireframe was used to create wireframes
• Favicon Generator was used to generate the Favicon
• Font Awesome was used for all icons on the website
• GitHub is the hosting site used to store the code for the website.
• Google Fonts was used to import fonts.
• Google Chrome Lighthouse was used for scoring the website during the testing phase
• Google Chrome Developer Tools was used during testing, debugging and making the website responsive.
• W3C HTML Validator was used to check for errors in the HTML code.
• W3C CSS Validator was used to check for errors in the CSS code
• CI Python Pep8 Checker was used to validate the Python code.
• Cloudinary was used to store static files and images.
• DBDiagram was used to visually create the database structure and schemas
• PostgreSQL from Code Institute was the database hosting provider
• Heroku was the hosting provider used.

Languages Used

• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheets)
• JavaScript
• Python
• SQL (Structured Query Language)
• Django Template Language

Python Modules Imported

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It is used for building web applications with Django's powerful features.

Cloudinary Storage is a Django storage backend for integrating Cloudinary, a cloud-based media management platform, with Django projects. It helps manage and serve media files.

django-allauth is an authentication and account management package for Django, providing user registration, authentication, account management, and social account integration.

dj-database-url is used to parse the database URL specified in the DATABASE_URL environment variable, commonly used for configuring database connections in Django projects.

Gunicorn is a popular WSGI HTTP server for running Python web applications, including Django applications, in a production environment.

Psycopg2 is a PostgreSQL adapter for Python. It allows Django to connect to PostgreSQL databases.

Django Summernote is a rich text editor and WYSIWYG plugin for Django that simplifies the process of incorporating and editing formatted content within web applications.

Django Crispy Forms is a Django application that enhances the presentation and customization of Django forms, making it easier to create aesthetically pleasing and responsive forms for web applications.

dj3-cloudinary-storage is a Django storage backend that simplifies the integration of Cloudinary with Django, allowing for seamless and efficient storage and retrieval of media and static files in web applications.

Cloudinary is a cloud-based media management platform that offers tools and services for storing, optimizing, transforming, and delivering images, videos, and other media assets.

Testing

Lighthouse

Lighthouse is an open-source tool for improving the quality of web pages. It provides insights into performance, accessibility, best practices, and SEO. Below are the results from Lighthouse tests for various pages and devices.

Homepage Desktop

Homepage Mobile

Contact Desktop

Contact Mobile

Menu Desktop

Menu Mobile

Login Desktop

Login Mobile

Register Desktop

Register Mobile

Reserve Table Desktop

Reserve Table Mobile

My Reservations Desktop

My Reservations Mobile

Code Validation

HTML

Homepage

Contact

Login

Logout

Register

Menu

My Reservations

Reserve Table

CSS

style.css

Python

Contact Forms

Contact Models

Contact Views

Menu Views

Pages Views

Unit test - automated

Menu Model Unit Test

Table Model Unit Test

Pages View Unit Test

Browser Testing

The Website was tested on Google Chrome, Firefox, Safari browsers with no issues noted.

Device Testing

The website was tested on a variety of devices, including Desktop, and Samsung S21, to ensure that it displayed well on screens of different sizes, both in portrait and landscape orientations. The website functioned as expected, and its responsive design was validated using Chrome developer tools on various devices, ensuring that the layout remained structurally sound across different screen dimensions.

Manual Testing

Homepage

Test Case	Steps	Expected Result	Status
Verify Homepage Load	1. Open the homepage URL. 2. Check page content.	Homepage loads correctly with all sections displayed.	PASS
Check Navigation Links	1. Click on navigation links. 2. Verify redirection.	Links redirect to the correct pages.	PASS
Test Responsive Design	1. Resize the browser window. 2. Verify layout changes.	Layout adjusts correctly for different screen sizes.	PASS

Contact Form

Test Case	Steps	Expected Result	Status
Verify Contact Form Fields	1. Open the Contact page. 2. Check the presence of form fields (Name, Email, Subject, Message).	All fields are present and correctly labeled.	PASS
Submit Contact Form with Valid Data	1. Fill in the form with valid data. 2. Submit the form.	Form submission is successful, confirmation message is shown.	PASS
Submit Contact Form with Invalid Data	1. Fill in the form with invalid data. 2. Submit the form.	Appropriate error messages are displayed.	PASS
Verify Required Fields Validation	1. Leave required fields empty. 2. Attempt to submit the form.	Validation errors are shown for missing required fields.	PASS

Menu

Test Case	Steps	Expected Result	Status
Verify Menu Categories	1. Open the Menu page. 2. Check for menu categories.	Categories are displayed as expected.	PASS
Test Menu Item Display	1. Select a menu category. 2. Verify menu items.	Menu items are displayed with correct details (name, description, price).	PASS
Check Image Display	1. Open menu items. 2. Verify images.	Images are displayed correctly for each menu item.	PASS
Test Pagination	1. Navigate through paginated menu items. 2. Verify page navigation.	Pagination works and correctly displays items.	PASS

Login

Test Case	Steps	Expected Result	Status
Verify Login Page Load	1. Open the Login page. 2. Check page content.	Login page loads correctly with fields.	PASS
Submit Login with Valid Credentials	1. Enter valid login credentials. 2. Submit the form.	User is logged in and redirected correctly.	PASS
Submit Login with Invalid Credentials	1. Enter invalid login credentials. 2. Submit the form.	Error message is displayed for invalid credentials.	PASS

Register

Test Case	Steps	Expected Result	Status
Verify Registration Page Load	1. Open the Registration page. 2. Check page content.	Registration page loads correctly with fields.	PASS
Submit Registration with Valid Data	1. Fill in the registration form with valid data. 2. Submit the form.	User is registered and redirected to login or home page.	PASS
Submit Registration with Invalid Data	1. Fill in the registration form with invalid data. 2. Submit the form.	Error messages are displayed for invalid data.	PASS
Verify Required Fields Validation	1. Leave required fields empty. 2. Attempt to submit the form.	Validation errors are shown for missing required fields.	PASS

Reserve Table

Test Case	Steps	Expected Result	Status
Verify Reserve Table Page Load	1. Open the Reserve Table page. 2. Check page content.	Reserve Table page loads correctly with fields.	PASS
Submit Reservation with Valid Data	1. Fill in reservation details. 2. Submit the form.	Reservation is successful and confirmation is shown.	PASS
Submit Reservation with Invalid Data	1. Fill in reservation details with errors. 2. Submit the form.	Appropriate error messages are displayed.	PASS
Verify Required Fields Validation	1. Leave required fields empty. 2. Attempt to submit the form.	Validation errors are shown for missing required fields.	PASS

My Reservations

Test Case	Steps	Expected Result	Status
Verify My Reservations Page Load	1. Open the My Reservations page. 2. Check page content.	My Reservations page loads correctly and displays reservations.	PASS
Check Reservation Details	1. Open reservation details. 2. Verify displayed information.	Reservation details are correct and complete.	PASS
Verify No Reservations Message	1. Open My Reservations with no reservations. 2. Check message displayed.	Appropriate message is shown for no reservations.	PASS

Bugs

Fixed Bugs

• Fixed errors not displayed upon user registration.
• Fixed an error where placeholder was placed on unsupported HTML elements.
• Fixed an error where aria-label was misplaced.

Deployment

Pre-Deployment Checklist

To ensure a smooth deployment of the application on Heroku, follow these steps:

1. Update requirements.txt:

   • Keep the requirements.txt file current to ensure all necessary Python modules are included and correctly configured. This file lists all the dependencies your project needs to run.

2. Create a Procfile:

   • A Procfile is essential for Heroku deployment. It should be set up to configure a Gunicorn web server for your application. An example entry in the Procfile might look like:

     web: gunicorn app_name.wsgi
     

3. Configure settings.py:

   • In settings.py, update the ALLOWED_HOSTS list with your Heroku app's domain and localhost. For example:

     ALLOWED_HOSTS = ['.herokuapp.com', 'localhost']

   • Ensure that all static files and directories are properly configured.

4. Set Environment Variables:

   • Configure all necessary environment variables in your env.py file, which should be included in your .gitignore file to keep sensitive information secure. Make sure the following variables are set:
     • SECRET_KEY
     • DATABASE_URL
     • CLOUDINARY_URL

   Example env.py:

   import os
   
   os.environ['SECRET_KEY'] = 'your-secret-key'
   os.environ['DATABASE_URL'] = 'your-database-url'
   os.environ['CLOUDINARY_URL'] = 'your-cloudinary-url'
   

Deployment

Deploying on Heroku

1. Create a Heroku Account:

   • If you don't already have one, sign up for a Heroku account.
   • Optionally, sign up with a student account for additional credits.

2. Create a New Heroku App:

   • Once logged in, click on "Create New App".
   • Choose a unique app name and select the appropriate region.

3. Set Deployment Method:

   • Select "Connect to GitHub" as the deployment method.
   • Search for the desired repository, for example, BookMyTable.
   • Enable automatic deploys and select the main branch.

4. Configure Environment Variables:

   • In the app's settings tab, click on "Reveal Config Vars".
   • Input the required hidden variables such as SECRET_KEY, DATABASE_URL, and CLOUDINARY_URL.

5. Set Buildpacks:

   • In the settings tab, add python as buildpacks.

6. Deploy the App:

   • Navigate to the "Deploy" tab and click "Deploy Branch".

Forking the Repository

1. Go to the GitHub Repository:

   • Navigate to the repository you want to fork.

2. Fork the Repository:

   • Click the "Fork" button in the upper right-hand corner.
   • Optionally, edit the repository name and description.
   • Click the green "Create Fork" button.

Cloning the Repository

1. Go to the GitHub Repository:

   • Navigate to the repository you want to clone.

2. Clone the Repository:

   • Click the green "Code" button above the list of files.
   • Choose to clone using HTTPS, SSH, or GitHub CLI, and copy the URL.
   • Open Git Bash and navigate to the desired directory.
   • Type git clone and paste the URL, e.g., $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.
   • Press Enter to create your local clone.

Running the Repository Locally

1. Download the Repository:

   • Navigate to the GitHub repository.
   • Click the green "Code" button and select "Download ZIP".
   • Extract the downloaded ZIP file.

2. Set Up Environment Variables:

   • Create an env.py file in your project directory.
   • Input the necessary environment variables, such as SECRET_KEY, DATABASE_URL, and CLOUDINARY_URL.

3. Install PostgreSQL:

   • Ensure PostgreSQL is installed and running on your machine.

4. Create a Virtual Environment:

   • Create a virtual environment to install the required Python modules.
   • Activate the virtual environment and install the dependencies listed in the requirements.txt file.

5. Run Database Migrations:

   • Run python manage.py makemigrations and python manage.py migrate to apply database migrations.

6. Run the Development Server:

   • Start the development server using python manage.py runserver.
   • Open your web browser and navigate to http://localhost:8000 to view the application.

Credits

Content

• All recipes were created using ChatGPT to facilitate speed and efficiency.

Media

• All images were sourced from Unsplash, a platform for freely usable images.

Code

• Credit to Bootstrap for providing the core HTML and CSS framework.
• Credit to CodeInstitute for the "I Think Therefore I Blog" project, which served as an inspiration.

Acknowledgements

• A heartfelt thank you to the Django community for their comprehensive documentation and support.
• Special thanks to my friends and family for their constant encouragement and feedback throughout the development process.
• Gratitude to Heroku for their reliable hosting service.