Barber Booking Center

Description

The Barber Booking App is an online platform that allows users to easily book appointments with barbers. The app provides an intuitive interface for customers to select their preferred barber, choose an appointment slot, and manage their booking details. Barbers can manage their availability and keep track of upcoming appointments.

Site Mockups

source: FadeFinder amiresponsive

This document contains wireframes for the FadeFinder app, showcasing the design for both mobile and desktop views. Each wireframe is linked below with a detailed description of the page.

The Home Page is the landing page of the app. It provides an overview of the barber shop and its services, with clear navigation to other pages.

The Menu provides access to all major pages of the app, including Book Now, Login, Register, and About.

• The menu is integrated into the header navigation bar on desktop.

The Booking Page allows users to select a service, choose a date and time, and confirm their appointment.

The Login Page allows users to log in to their accounts using their email and password. It also includes a link to the Register Page.

The Register Page allows new users to create an account by entering their name, email, and password.

The Log Out Page confirms that the user has successfully logged out and provides options to log back in or return to the home page.

The About Page provides information about the barber shop, including its history, team, and location.

Users need an easy way to book services, manage their accounts, and navigate the barber shop’s website.
Business Goal: Provide users with a seamless online experience for making appointments, registering, and learning about the services provided by the barber shop.

• Users need to navigate the site easily to access services, book appointments, and get more information about the barber shop.
• Admins need efficient tools to log in and manage bookings, add services and upload images.
• New Users need a simple registration process and if they want to contact us they can contact us without login by email.
• Give user ability to manage their bookings.

• Make booking appointments intuitive and seamless.
• Encourage user registration and engagement with the site.
• Ensure clear communication of the barber shop’s services, values, and contact details.

• Header navigation with links (Home, Book, Account, About).
• Booking page with Booking form, calendar, and time.
• Login, Register, and Admin Login functionality.
• About page with info on the barber booking app, contact us form, collaboration request form and location.
• Footer navigation in mobile devices, links to social media and additional pages in tablet and desktop size.

• High-quality images of the barber shop and services.
• Text about the barber, barber shop’s services.
• Forms for logging in, registering, and booking appointments.
• Social media links (only phone size) and contact info on the About page

• Main Navigation: Home, Book, Account(Log-in,log-out, register, admin), About (Header); Footer mobile (with icons of home, calendr, profile and gps) from tablet size (Social Links, Find Us, Book, Log Out, admin-log-out.
• User Flow:
  • New Users: Browse site → Register → Book an Appointment.
  • Logged-In Users: View services → Choose a date and time → Confirm booking.
    • Logged in users can add, edit, delete their own appoinments.),
    • They can see booking form, if they have already booked appoinments and can send form
  • Admins: Login → Manage bookings → View calendar and user data.

• Users can navigate via the header or footer to access pages.
• On the Booking page, users can select, barbers, services, dates, and times.
• Users can log in or register to book an appointment.
• Admins can log in, access the dashboard, and manage bookings, their services and more.

• Homepage: Header with navigation, main section with images and text, footer with links.
• Booking Page: Barber list, service list, calendar, time, "Book" button.
• Login/Registration Pages: Forms for user info, login/register options.
• Admin Dashboard: Manage barber shop, it's services, bookings, see booked appoinments, can read collaboration requests.

• Primary Color: #1f5a5e (Dark Green) for headers and key UI elements.
• Secondary Color: #ffffff (White) for background and text containers.
• Accent Color: #ffc107 (Gold) for action buttons like Book Now.
• Action Color: #ffd700 (Gold) for call-to-action buttons.

• Heading Font: Montserrat was used for the primary headers and titles.
• Body Text Font: Lato was used fo body text.
• Primary Button Font: Roboto was used for call-to-action buttons.
• Secondary Button Font: Poppins was used for all other secondary text.
• Font Awesome icons were used throughout the site, such as the social media icons in the footer.

• Clean, modern layout with an emphasis on simplicity and easy navigation.
• High-contrast text for readability.
• Interactive elements (buttons, links) with hover effects for better user interaction.

INSTRUCTIONS

In this section, list all of your possible user stories for the project. Samples have been provided below using the example walkthrough project for your inspiration. Make sure to adjust to match your own project features!

Barber booking center is packed with a range of powerful features that help users, barbers, and admins manage appointments, profiles, and services seamlessly. From booking and collaboration to personalized user accounts and responsive design across devices, we strive to provide a user-friendly experience for everyone involved. Below, you'll find an overview of the current features available on the platform, each designed to improve accessibility, usability, and interaction for our community.

Feature	Notes	Screenshot
Desktop Navigation Login	Displays the navigation bar on desktop when the user is logged in, with access to different sections and the ability to log out.
Desktop Navigation Logout	Displays the navigation bar on desktop when the user is logged out, providing access to login and other public pages.
Mobile Navigation Logged In	Displays the mobile navigation bar when the user is logged in, including login status and links to manage bookings.
Mobile Navigation Logout	Displays the mobile navigation bar when the user is logged out, with options for login and public pages.
Desktop Footer Login	Footer section on desktop with login options for users who are not logged in.
Desktop Footer Logout	Footer section on desktop with logout options for users who are logged in.
Mobile Footer	Mobile version of the site with footer navigation links to important sections.
Home Desktop	Displays the homepage on desktop, providing basic information about the barber shop and its services.
Mobile Home	Displays the mobile version of the homepage, including key barber shop details and services.
Booked Data	View showing the user's booked appointments, with details like time, service, and status.
Desktop Book Login	View showing the booking page for logged-in users, where they can select services and schedule appointments.
Edit View	View allowing users to edit their profile details or booking information.
Login	The login screen where users enter their credentials to access their account.
Register	The registration screen where users can create a new account by entering necessary details.
Logout Message	Message displayed after the user successfully logs out, confirming the action.
Success Book	A success message displayed after a user successfully books an appointment.
Success Collaboration Message	Success message displayed after a user successfully submits a collaboration request.
Success Form Submit	Success message after a user successfully submits a form on the site, confirming the submission.
Success Update	Success message displayed after successfully updating user details or bookings.
About Mobile	The mobile version of the About page, displaying details of the barber shop, the team, and services offered.
Desktop About with Logout	The desktop version of the About page with a logout option visible for logged-in users.
Desktop About Login	The desktop view of the About page when a user is logged in, providing more detailed options.
Desktop About Login (Alt)	An alternative view of the About page for logged-in users, offering different layout or options.
Desktop About Logout	The desktop version of the About page shown when the user is logged out, with more basic details.
Delete Warning	A confirmation screen that warns the user before they proceed with deleting data such as appointments.
Error Collaboration Message	Error message shown if something goes wrong while submitting a collaboration request.
Error Message	General error message displayed for invalid user actions or inputs throughout the site.
Log In Message	A message displayed during the login process to indicate whether the credentials are correct or if there was an error.
Phone Profile Icon	The profile icon shown on mobile devices for users to quickly access their profile.

As we continue to improve and expand the functionalities of our platform, we have identified several key features and enhancements to make the user experience even better. These upcoming features are designed to provide more convenience, flexibility, and personalization, whether for users, barbers, or admins. We aim to streamline the booking process, improve communication, and offer more tailored options for our barbershops and customers. Below is a list of features we plan to implement in the future to meet the evolving needs of our platform.

• Email Confirmation for Appointments & Account Actions: Automatically send email confirmations to users when they book, update, delete appointments, or take actions like signing in or resetting passwords.
• Admin Email Notifications: Notify the admin via email when a user books, deletes, or updates an appointment, ensuring they stay informed about user actions.
• Payment Integration: Implement payment systems such as credit cards, Swish, or Mobile Swift for easy and secure transactions for appointments.
• Multiple Barbers Under One Barbershop: Allow one barbershop to have multiple barbers listed, each with their own availability and profiles.
• Barbershop-Specific About Pages: Provide a dedicated About page for each barbershop, detailing its unique history, team, and services offered.
• Barbershop-Specific Home Pages: Create a unique homepage for each barbershop, displaying essential information such as location, services, and contact details.
• City-Based Barber Navigation: Develop a section that stores a navigation system to help users find barbers in different cities, making it easier to book across locations.
• Barber Dashboard: Build a specialized dashboard for barbers to manage their schedules, appointments, and customer interactions.
• Individual Barber Dashboards: Enable each barber to have a personal dashboard to manage their bookings, services, and client interactions.
• Guest User Booking: Allow guest users (non-registered) to book appointments and receive email confirmations, ensuring convenience without the need for account creation.

Tool / Tech	Use
	Generate README and TESTING templates.
	Version control. (git add, git commit, git push)
	Secure online code storage.
	Cloud-based IDE for development.
	Main site content and layout.
	Design and layout.
	User interaction on the site.
	User interaction on the site.
	Back-end programming language.
	Hosting the deployed back-end site.
	Front-end CSS framework for modern responsiveness and pre-built components.
	Automated JavaScript testing.
	Python framework for the site.
	Relational database management.
	Online static file storage.
	Serving static files with Heroku.
	Creating wireframes.
	Interactive map on my site.
	Icons.
	Help debug, troubleshoot, testing and explain things.
	Generate an interactive diagram for the data/schema.
	Date and time picker.
	WYSIWYG text editor.
	Authentication and registration for Django.
	Custom middleware in Django.
	Styling forms in Django with Bootstrap.
	Bootstrap integration for Django Crispy Forms.

Auto-generating Entity Relationship Diagrams (ERD)

I have used Auto-generating Entity Relationship Diagrams (ERD) to document my database models, making it easier to visualize relationships between different models in my Django project. By utilizing the django-extensions and pygraphviz libraries, I was able to automatically generate an ERD representing the structure of my database. This approach streamlines the process of creating an up-to-date diagram, especially as the project evolves. Below are the steps I followed to generate the ERD, which can be included in your project’s documentation for better understanding and future reference.

I have used pygraphviz and django-extensions to auto-generate an ERD.

The steps taken were as follows:

• In the terminal: sudo apt update
• then: sudo apt-get install python3-dev graphviz libgraphviz-dev pkg-config
• then type Y to proceed
• then: pip3 install django-extensions pygraphviz
• in my settings.py file, I added the following to my INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'django_extensions',
    ...
]

• back in the terminal: python3 manage.py graph_models -a -o erd.png
• drag the new erd.png file into my documentation/ folder
• removed 'django_extensions', from my INSTALLED_APPS
• finally, in the terminal: pip3 uninstall django-extensions pygraphviz -y

GitHub Projects served as an Agile tool for this project. Through it, EPICs, User Stories, issues/bugs, and Milestone tasks were planned, then subsequently tracked on a regular basis using the Kanban project board.

GitHub Issues served as an another Agile tool. There, I managed my User Stories and Milestone tasks, and tracked any issues/bugs.

Link	Screenshot

I've decomposed my Epics into User Stories for prioritizing and implementing them. Using this approach, I was able to apply "MoSCow" prioritization and labels to my User Stories within the Issues tab.

• Must Have: guaranteed to be delivered - required to Pass the project (max ~60% of stories)
• Should Have: adds significant value, but not vital (~20% of stories)
• Could Have: has small impact if left out (the rest ~20% of stories)
• Won't Have: not a priority for this iteration - future features

[!NOTE]

• Documentation of the manual testing, front and back-end testing files.

For all testing, you can find them TESTING.md folder.

Or for each Manual Testing, Front-end Tests, Back-end Tests,

• | |
• I used to output html templates, to validate in HTML validator without templatetags,
• I used to test, views, functions, models, urls, admin and forms to make the testing process faster.
• I used to document testing files to make the process of documenting faster
• I used to test the template logic and user accessibility.
• I used HTML validator for html testing, CSS validator for css testing and JSHINT for javascript testing.

The live deployed application can be found deployed on Railway.
Historically, the project was first deployed on Heroku.

The migration process followed these steps:

• Create a dump of the existing database:

pg_dump --verbose --no-acl --no-owner -h neon_host -U neon_user -d neon_db > fadefinder.dump

• Create a new project on Railway and connect your GitHub repository.

• Add environment variables in Railway to match your .env file locally. Example:

pg_restore --verbose --clean --no-acl --no-owner -h railway_host -U railway_user -d railway_db fadefinder.dump

• Verify that all tables and data are correctly restored.

• In your .env file or Railway environment variables, update:

• DATABASE_PUBLIC_URL=

Keep DATABASE_PUBLIC_URL for local development if needed.

In settings.py, configure the database:

DATABASES = { "default": dj_database_url.config( default=env("DATABASE_URL"), # Points to Railway in production conn_max_age=600, ssl_require=True, ) }

• Railway automatically deploys the app on push. Verify that:
• The database connection works
• Static and media files load correctly
• Third-party integrations (Cloudinary, Google Maps, Stripe, etc.) function properly

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

• Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
• Your app name must be unique, and then choose a region closest to you (EU or USA), then finally, click Create App.
• From the new app Settings, click Reveal Config Vars, and set your environment variables to match your private env.py file.

| | SECRET_KEY | 34567ikjmnbvcarrgshggnb5tr |

Heroku needs some additional files in order to deploy properly.

• requirements.txt
• Procfile

You can install this project's requirements.txt (where applicable) using:

• pip3 install -r requirements.txt

If you have your own packages that have been installed, then the requirements file needs updated using:

• pip3 freeze --local > requirements.txt

The Procfile can be created with the following command:

• echo web: gunicorn fadefinder.wsgi > Procfile

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

• Select Automatic Deployment from the Heroku app.

Or:

• In the Terminal/CLI, connect to Heroku using this command: heroku login -i
• Set the remote for Heroku: heroku git:remote -a app_name (replace app_name with your app name)
• After performing the standard Git add, commit, and push to GitHub, you can now type:
  • git push heroku main

The project should now be connected and deployed to Heroku!

This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn't persist this type of data.

To obtain your own Cloudinary API key, create an account and log in.

• For "Primary Interest", you can choose Programmable Media for image and video API.
• Optional: edit your assigned cloud name to something more memorable.
• On your Cloudinary Dashboard, you can copy your API Environment Variable.
• Be sure to remove the leading CLOUDINARY_URL= as part of the API value; this is the key.
  • cloudinary://123456789012345:AbCdEfGhIjKlMnOpQrStuVwXyZa@1a2b3c4d5)
• This will go into your own env.py file, and Heroku Config Vars, using the key of CLOUDINARY_URL.

This project uses a Code Institute PostgreSQL Database for the Relational Database with Django.

To obtain my own Postgres Database from Code Institute, I followed these steps:

• Submitted my email address to the CI PostgreSQL Database link above.
• An email was sent to me with my new Postgres Database.
• The Database connection string will resemble something like this:
  • postgres://<db_username>:<db_password>@<db_host_url>/<db_name>
• You can use the above URL with Django; simply paste it into your env.py file and Heroku Config Vars as DATABASE_URL.

This project uses the WhiteNoise to aid with static files temporarily hosted on the live Heroku site.

To include WhiteNoise in your own projects:

• Install the latest WhiteNoise package:
  • pip install whitenoise
• Update the requirements.txt file with the newly installed package:
  • pip freeze --local > requirements.txt
• Edit your settings.py file and add WhiteNoise to the MIDDLEWARE list, above all other middleware (apart from Django’s "SecurityMiddleware"):

# settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    # any additional middleware
]

This project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

• pip3 install -r requirements.txt.

You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.

Sample env.py file:

import os

os.environ.setdefault("SECRET_KEY", "any-random-secret-key")
os.environ.setdefault("DATABASE_URL", "user-inserts-own-postgres-database-url")
os.environ.setdefault("CLOUDINARY_URL", "user-inserts-own-cloudinary-url")  # only if using Cloudinary

# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:

• Start the Django app: python3 manage.py runserver
• Stop the app once it's loaded: CTRL+C (Windows/Linux) or ⌘+C (Mac)
• Make any necessary migrations: python3 manage.py makemigrations --dry-run then python3 manage.py makemigrations
• Migrate the data to the database: python3 manage.py migrate --plan then python3 manage.py migrate
• Create a superuser: python3 manage.py createsuperuser
• Load fixtures (if applicable): python3 manage.py loaddata file-name.json (repeat for each file)
• Everything should be ready now, so run the Django app again: python3 manage.py runserver

If you'd like to backup your database models, use the following command for each model you'd like to create a fixture for:

• python3 manage.py dumpdata your-model > your-model.json
• repeat this action for each model you wish to backup
• NOTE: You should never make a backup of the default admin or users data with confidential information.

You can clone the repository by following these steps:

1. Go to the GitHub repository.
2. Locate and click on the green "Code" button at the very top, above the commits and files.
3. Select whether you prefer to clone using "HTTPS", "SSH", or "GitHub CLI", and click the "copy" button to copy the URL to your clipboard.
4. Open "Git Bash" or "Terminal".
5. Change the current working directory to the location where you want the cloned directory.
6. In your IDE Terminal, type the following command to clone the repository:
   • git clone https://www.github.com/ZakariyeNor/FadeFinder.git
7. Press "Enter" to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Please Note: in order to directly open the project in Gitpod, you should have the browser extension installed. A tutorial on how to do that can be found here.

By forking the GitHub Repository, you make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

1. Log in to GitHub and locate the GitHub Repository.
2. At the top of the Repository, just below the "Settings" button on the menu, locate and click the "Fork" Button.
3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

There are no remaining major differences between the local version when compared to the deployed version online.

Throughout the development of this project, I have used various resources, tools, and references that have helped shape and improve the application. This section acknowledges the individuals, tutorials, open-source libraries, and documentation that contributed to the project’s success.

• Logo: The logo used in this project(about page"Baber booking center") is owned by me.
• Cover Image: The cover image used in this project is from the official Django Walkthrough.
• The scissors logo in the large screen size is Font Awesome.
• Email: The email connected to the contact us form ([email protected]) is owned and managed by me.

• Images

  • Pexels - Free stock images
    NOTE: The images used during the development of the app were sourced from Google. These images were used solely for development purposes and are not part of the final deployed application.

  The images that are deployed and submitted as part of the live app are sourced from Pexels, These images have been uploaded to Cloudinary for efficient media management and optimization, ensuring a seamless user experience.

• Text & Content

  • Generated using ChatGPT
  • Design Ideation: The concept of balanced typography, fonts, colors, sizing, and spacing was developed with the help of ChatGPT ideation.

• Maps

  • Google Maps - Integrated for location services

• Contact Us Form
  • Powered by Formspree for handling form submissions

I would like to acknowledge and thank those who have contributed to the success of this project. Their support, tools, and resources have been invaluable throughout my development process.

• I would like to thank my Code Institute mentor, Tim Nelson for the support throughout the development of this project.
• I would like to thank the Code Institute Tutor Team for their assistance with troubleshooting and debugging some project issues.
• I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self doubt and impostor syndrome.
• I would like to thank God, who gave me the ability to do all of these and remain consistent.