Latte Night Cafe

Booking system for a late night cafe

Deployed link: https://late-night-cafe-353782271257.herokuapp.com/

---

Contents

• Introduction
• Technologies Used
• UX/UI
• Site Goals
• User Stories
• Wireframes
  • Desktop
  • Mobile
• Databases
• Features
  • Existing Features
  • Features Left to Implement
• Testing and Debugging
  • Validator Testing
  • Bugs Fixed
• Setup and Running the Application
• Deployment
• Credits

Back to top

---

Introduction

This project is a table booking system for Latte Night Cafe, a cosy venue for night owls who want to relax with their friends, or even get some work done, in at a calm place during the twilight hours. It allows customers to reserve a quiet spot during late hours when traditional cafes are normally closed, offering peace of mind away from noisy, alcohol-fuelled environments.

This web application was created and built by Christina Hughes - GitHub, LinkedIn

Back to top

---

Technologies Used

• HTML5
• CSS3
• JavaScript used to make the website dynamic and include client-side validation
• Bootstrap 5.3.3 used as it offers pre-built components that speed up development, such as nav bar styles and responsiveness
• Django framework used due to its convienient in-built features and how it makes database interactions easier
• Balsamiq used to create wireframes
• ChatGPT and Blackbox AI used throughout for coding advice, inspiration, and troubleshooting
• Miro Board (digital interactive whiteboard) used to plan out a design board and also create the entity relationship diagram
• Github Project Board used as project management tool to keep track of user stories

Back to top

---

UX/UI

Site Goals

The goal of Latte Night Cafe is to provide a warm, cosy retreat to those who prefer want to visit coffee shops at night. Minimalistic and simple, the aim was to make users feel comfortable and at ease.

The colours are warm and comforting. The main issue with the contrast check was the subtitle here. A text background was added to help it stand out more. This is something that could be altered in the future.

Back to top

---

User Stories

As a user:

• I want to register an account so that I can make a booking and keep track of my past/future bookings.

  • A user can create and register an account.
  • The user can then log in.
  • When the user is logged in they can make a booking.

• I want to be able to easily book a table so that I can reserve a spot for my visit.

  • User can create, edit/update, and cancel their booking with ease.

• I want to see all the bookings I have made in one place so that I can keep track of them and see when I was at the venue previously.

  • User has access to their own dashboard where they can sort their past bookings, as well as create, edit/update, and cancel their booking with ease.

• I want to be able easily contact the venue and see opening times.

  • Opening times and location need to be obviously visible.
  • Several options to contact the venue, including social media, email, and phone.

As a site admin:

• I want to be able to create, read, update, and delete all bookings so that I can successfully manage my business. This will help me know when the cafe will be busier and when I need to schedule staff.

  • Site admin has access to their own dashboard where they can sort through all users bookings, as well as create, edit/update, and cancel any booking with ease.

• I want customers to be able to easily contact the venue and see opening times.

  • Opening times and location need to be obviously visable.
  • Several ways in which the user can contact the venue, including social media, email, and phone.

• I want the booking system to automatically disallow invalid or double bookings to save me time.

  • Add validators to the "Create a booking" page to ensure double bookings can't occur (table number and timeslots).
  • Clearly provide automatic feedback to the user so they know what went wrong and what to do next so they can successfully make a reservation.

Please see GitHub project board for full details.

Back to top

---

Wireframes

Here are the initial wireframes for the Latte Night Cafe application (created using Balsamiq), along with screen shots of the initial design. These provide a visual outline of the planned layout and functionality.

Desktop

Mobile

Back to top

---

Databases

Using Miro, I created an entity relationship diagram with the following question in mind: "What information do I need when someone makes a reservation?"

PK = Primary Key | FK = Foreign Key

Relationships

• User to Booking - one-to-many relationship as one user can make multiple bookings.
• CafeTable to Booking - one-to-many relationship as one table can be booked for different time slots.

Notes

Initially I wanted to have a separate user data model, but as this is a predefined class in Django I decided to keep it simple and ended up leaving the user data model out for now and focus on achieving the MVP.

For simplicity, I ended up creating 3 table choices for each timeslot (from 6pm to 6am):

from django.db import models
from django.contrib.auth.models import User
from django.utils import timezone # Pulls in default timezone info which is Europe/London

# Model for making a booking for an available table
class Booking(models.Model):
    
    TABLE_CHOICES = [
        ("1", "Table 1"),
        ("2", "Table 2"),
        ("3", "Table 3"),
    ]

    TIMESLOT_CHOICES = [ # Each timeslot is 1 hour
        ("18:00", "6 PM"),
        ("19:00", "7 PM"),
        ("20:00", "8 PM"),
        ("21:00", "9 PM"),
        ("22:00", "10 PM"),
        ("23:00", "11 PM"),
        ("00:00", "12 AM"),
        ("01:00", "1 AM"),
        ("02:00", "2 AM"),
        ("03:00", "3 AM"),
        ("04:00", "4 AM"),
        ("05:00", "5 AM"),
    ]

    NUM_GUESTS_CHOICES = [(i, i) for i in range(1, 5)] # Limits number of guests from min 1 to max 4. Futureproofing in case more tables are added with varying seat numbers.

    booking_id = models.AutoField(primary_key = True) # Unique booking id
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='bookings') # Relationship to User model. If user is deleted, booking will be deleted too.
    table_booked = models.CharField(choices=TABLE_CHOICES, default="1") # Lists choice of tables in cafe.
    booking_date = models.DateField(null = False, blank = False) # Date when customer wants to book table - Mon-Sun. Date & time separate to allow for more flexibility for users to modify their booking. Field needs a value input. 
    booking_time = models.CharField(max_length = 6, choices=TIMESLOT_CHOICES, default="6 PM") # Lists bookable timeslots (1 hour slots from 6pm-6am).
    num_of_guests = models.IntegerField(choices=NUM_GUESTS_CHOICES, default=1) # Default number of guests is set to 1. Field needs a value input. 
    special_requests = models.TextField(null = True, blank = True) # Textfield so customers can add allergy info, birthday treats, etc. Optional field.
    booking_created_at = models.DateTimeField(auto_now_add = True) # Sets timestamp only when the record is created
    booking_updated_at = models.DateTimeField(auto_now = True) # Updates timestamp every time the record is saved

    class Meta:
        verbose_name = "Booking"
        verbose_name_plural = "Bookings"
        ordering = ["booking_date", "booking_time", "table_booked"] # Shows bookings in chronological order (by date, then time, then table number)
        unique_together = ["booking_date", "booking_time", "table_booked"] # Ensures that the same table can't be booked on the same date/time

    def __str__(self):
        return f"Booking for {self.user} ({self.booking_id}) at {self.table_booked} on {self.booking_date} at {self.booking_time} for {self.num_of_guests}." # Method returns a string summarising a table booking

Back to top

---

Features

This project was planned out using agile principles. Therefore, I used the MoSCoW prioritisation method to determine which features were most important and a "must-have" in order to meet the user's needs and achieve a MVP in this initial sprint.

Existing Features

• Navbar changes depends on who is logged in/out

  • Allows personal experience for the user. Keeps unauthorized users away from items they shouldn't have access to.

• Booking Form

  • Collects booking information from the user. Easy to fill in for the user, allowing them to reserve a specific table for specific timeslot (if free).

• Sign In/Out Pages

  • Easy sign up. Options to include social media integration in the future.

• Text and logo in top corner = return to homepage on a click

  • This button will allow the user to easily navigate back to the homescreen.

• Responsive Design

  • Responsive design for compatibility with various devices and screen sizes, from mobile to desktop. This project was designed with a mobile-first approach.

• Footer (see above)

  • Footer section includes links to the relevant social media sites for Latte Night Cafe To allow for easy navigation, the links open in a new tab.
  • Copyright line includes year of publication and the creator. This allows users to see how up to date the information on the web application is.
  • Features at the bottom of the page throughout (and has a matching colour theme with other elements on the site), this lets the user know they're still on the same webpage.
  • The footer is important as it encourages the user to interact and stay connected with Latte Night Cafe on other social media platforms.

• User Dashboard

  • Where the user can see all their own bookings in one place with full CRUD functionality (create, read, update, and delete) only for their bookings.
  • Includes the option to sort bookings by date.

• Admin Dashboard
  • Where the admin can see all the bookings for the cafe in once place. Includes full CRUD functionality (create, read, update, and delete) of all bookings by anyone.
  • Includes the option to sort bookings by date, user, and special requests.

Back to top

---

Features Left to Implement

Using the MoSCoW method, it was determined that these features weren't essential to create a MVP but are more "should-have" and "could-have". Due to time constraintents these features were left out, but they would make great additions to the application in the future.

• About Page - Should Have

  • A more in-depth introduction about the cafe and its philosophy to build its brand identity. Include images of the cafe, staff, food, and drink so future customers know what to expect. Could also include a "How to find us" map. This page would add significant value but at the moment the contact details in the footer cover this.

• Menu Page - Could Have

  • A page listing the food and drink items available, as well as their cost. This allows potential customers to scope out the offerings of the Latte Night Cafe in advance and decide if it's the place for them. Could display this information as a table, list, or PDF/image.

• Reviews - Could Have

  • Form for registered users to leave a review of the cafe. These could then be displayed on the homepage as a carousel.

• Social Media Registration/Sign In Option - Won't Have (for now)

  • Offer the user the chance to register/sign into the website using one of their social media accounts rather than having to create and remember a new account and password. More for convenience than a necessity, but would make for a better user experience. At the moment using django's built-in sign up and admin works just fine.

• Custom Error Screens - Won't Have (for now)

  • Currently Django custom error screens are being used for 404, 500, etc. so this feature was not a priority in the first iteration of the project. However, when there is more time, it is definitely more fun to have a personalise and branded error page and you can then direct the user back to the homepage (better UX/UI).

Back to top

---

Testing and Debugging

Created test.py files and did constant manual testing throughout (both myself and outside testers).

Test: Create a booking when not logged in.
Expectation: User will be prompted to log in.
Result: Pass

Test: Create a booking for a date in the past.
Expectation: User will be prompted select another date.
Result: Pass

Test: Booking appears in user dashboard.
Expectation: Once booking is made and validated, the user will be redirected to their dashboard which shows all their bookings ever made.
Result: Pass

Back to top

---

Validator Testing

• HTML

  • Passed through the official W3C validator: some errors

• CSS

  • Passed through the Jigsaw validator successfully:

• CI Linter
  
  
  
  

• Website Optimization and Accessibility tested using Lighthouse via Chrome DevTools:

  • Desktop
    

  • Mobile
    

Back to top

---

Bugs Fixed

• Collapse Navbar when goes into mobile mode
  Navigation items should drop down.

• Some Font Awesome icons not appearing
  The social media icons were appearing, but the speech bubble icons either side of the "Contact us:" text were not. After some investigation, it turns out that the version of Font Awesome that was linked to in the stylesheet was not the same one listed on the icon (different versions of icons have slightly different names and versions).
  

Back to top

---

Setup and Running the Application

1. Fork repository on GitHub.
2. Clone the repository to your local machine or download the HTML, CSS, and JavaScript files.
3. Open the HTML file in a web browser to start the application.
4. Sign up and create a booking

Deployment

• Create repository created in Github and update in Gitpod
• Install Django framework and Python packages
  • Create requirements.txt file and add the following:

asgiref==3.8.1
cloudinary==1.36.0
crispy-bootstrap5==0.7
dj-database-url==0.5.0
dj3-cloudinary-storage==0.0.6
Django==4.2.14
django-allauth==0.57.2
django-crispy-forms==2.3
gunicorn==20.1.0
oauthlib==3.2.2
psycopg==3.2.1
psycopg2==2.9.9
PyJWT==2.9.0
python3-openid==3.2.0
requests-oauthlib==2.0.0
sqlparse==0.5.1
urllib3==1.26.19
whitenoise==5.3.0

• Deploy using Heroku
• Connect Secret Keys to config vars
• Connect to the Code Institute PostGres Database
• Connected to Cloudinary (static file/assests host)

Link to deployed site: https://late-night-cafe-353782271257.herokuapp.com/

Back to top

---

Credits

Resources Used and Consulted

• ChatGPT used throughout for coding advice and inspiration.
• Blackbox AI used throughout for coding advice and inspiration.
• Font Awesome for the social media icons in footer.
• Favicon.io - online favicon generator used to draw favicon.
• Angela Yu's The Complete 2024 Web Development Bootcamp course on Udemy - reviewed videos to brush up on Python.
• Stack Overflow for troubleshooting and understanding coding concepts.
• MDN web docs for helpful guides on all things coding.
• W3Schools for helpful guides on all things coding.
• Bootstrap for docs about Bootstrap.

Media
Image by vecstock on Freepik

Special Thanks To

• Spencer Barriball
• Code Institute's Subject Matter Expert Kevin
• Code Institute's Coding Coach Martin
• Code Institute's Coding Bootcamp Tutor Lewis
• Code Institute's Cohort Facilitator David
• Everyone in the April 2024 WW Bootcamp
• Ian Stokes for all the cups of tea and manual testing
• Christopher Hughes and Sebastian Hughes for technical support, advice, and manual testing

Back to top