Momentum Bicycle Workshop is a web application designed to streamline bicycle repair bookings, manage appointments, and provide a seamless experience for customers and workshop owners.
This project is my fourth milestone project for the Code Institute Full Stack Developer course.
Live Demo: Click here to visit the deployed version.
Momentum Bicycle Workshop is an independent, small-scale bicycle repair business. Unlike large franchises, it focuses on personalized service, community engagement, and a passion for cycling.
The website serves as a digital hub where users can:
- Schedule repair appointments.
- Manage their bookings.
- Contact the shop for inquiries.
- Stay informed about services and pricing.
Before developing this project, I analyzed existing bicycle repair websites to identify common patterns and market gaps. Some references included:
Key Insights:
- Many small bike shops lack an online presence.
- Larger businesses have complex, feature-rich websites, but smaller shops need simple yet effective solutions.
- There’s an opportunity for a clean, user-friendly booking system for local workshops.
This vision shaped my design and development choices.
Momentum Bicycle Workshop is for anyone who rides a bicycle, including:
✔️ Daily commuters needing quick fixes.
✔️ Students wanting stylish bike upgrades.
✔️ Seniors looking for regular maintenance.
| As a user, I want to... | So that I can... |
|---|---|
| Find a nearby bike shop | Plan my visit easily |
| View service pricing | Make an informed decision |
| Contact the workshop | Ask specific questions |
| Register on the website | Schedule an appointment |
| Modify or cancel appointments | Adjust plans if needed |
Minimal, practial layout
Easy-to-use Booking Platform
- Python
- HTML
- CSS
- Django – Backend framework for handling logic.
- Bootstrap – Frontend styling and responsiveness.
- GitHub – Version control & repository hosting.
- GitHub’s Code Editor – For writing and running the code.
- Favicon Generator – For browser tab icons.
- Balsamiq - For generating inital design
The web app follows CRUD (Create, Read, Update, Delete) operations, ensuring smooth appointment management.
Secure login for customers, shop owners, and admin users.
Restriction of appointment bookings to available dates/times.
Validation for cancellation policies to prevent misuse.
ERD
The database is structured using Django’s ORM, which maps Python classes to database tables.
Key Entities:
- User – Represents customers and shop owners.
- Appointment – Stores booking details (date, time, service description, status).
- Service – Different types of repair services offered.
- Workshop Owner – Special permissions to manage appointments
Relationships:
- A User can book one Appointment at the time (One-to-One).
- Each Appointment is linked to a specific Service (Many-to-One).
- A Workshop Owner can manage multiple Appointments.
- The Django authentication system handles user authentication and permissions.
This relational structure ensures data integrity, prevents duplicate bookings, and allows efficient scheduling.
-
Navigation Bar – Easy access to all pages.
-
Downloadable PDF Price List
-
User Registration & Login
-
Appointment Booking System
-
Modify Appointments
-
Photo Upload (For users to share bike issues)
-
Django Admin Panel (For the developer & shop owner)
Planned features for future releases:
Improving Lighthouse rating
Calendar-based booking system (Instead of dropdown lists).
Job prioritization for shop owners (e.g., "In Progress" → "Completed").
Interactive Map (For shop location).
Forgotten password recovery system.
Automated Testing
I implemented automated unit tests using Python's unittest module (or pytest, if used). These tests ensure that key functions work correctly without manual intervention.
Example of Automated Tests:
- Test Appointment Booking – Ensures users can book appointments with valid inputs.
- Test Appointment Cancellation – Verifies that only authorized users can cancel an appointment.
- Test User Authentication – Checks if login/logout functionality works as expected.
- Test Home page load.
Manual Testing
I used a test-as-you-go approach, ensuring each change worked correctly before moving forward.
Tested each user journey from start to finish. Validated form inputs with valid/invalid data. Checked authentication and authorization flows. Ensured responsiveness across different browsers and devices.
Lighthouse Accesibility Testing
Lighthouse test results varied at different stages of the project. Earlier in development, scores were consistently high, but the final product scored lower. Despite testing on different devices, browsers, and clearing cache, the cause remains under investigation.
End-to-end testing for all user journeys.
Validation of all form inputs (empty fields, incorrect values).
Browser compatibility testing on Chrome, Safari, and Firefox.
HTML Validation
CSS Validation
Flake8 Validation
The Flake8 validation returned a long list of errors in the code. The list was full of E501 error messages. Majority of the error originates from the code of the libraries as it turned out.
There were also errors in the custom code, those ones have been reformatted (Black), but that process had impact on some of the functions and styles. It seemed to me as the choice is between perfectly formatted code or smooth user experience.
This project was deployed to Heroku and is accessible at:
Live Site
I took the following steps to deploy this Django project to Heroku, a popular cloud hosting platform.
- Create a PostgreSQL database using your preferred provider. Since I'm a student at Code Institute, I used their PostgreSQL offering.
- After creating the database, I made sure to note down the database URL, as I’ll need it later.
- I went to Heroku and created a new app by clicking on the "New" button.
- I chose a unique name for my app and selected the region closest to my location.
- In the Settings tab of my new Heroku app, I went to CONFIG VARS.
- I added a new key-value pair:
- Key:
DATABASE_URL - Value: I pasted the database URL that I obtained from my PostgreSQL provider.
- Key:
This allowed my Django app to connect to the Heroku database.
- I cloned my repository from GitHub to my local machine.
- In the Deploy tab of my Heroku app, I linked the Heroku app to my GitHub repository.
- I selected my repository but I kept the 'manual' deployment option over the automatic deployment.
I opened settings.py and made the following updates:
-
I set
DEBUG = Falseto ensure the app runs in production mode. -
I updated
ALLOWED_HOSTSto include my Heroku app’s domain: ALLOWED_HOSTS = ['yourappname.herokuapp.com'] -
I used os.environ.get() to access the environment variables I set in Heroku's Config Vars.
-
I configured Django to use my PostgreSQL database by setting: DATABASES['default'] = os.getenv('DATABASE_URL')
-
To handle static files, I added Whitenoise for better static file management: MIDDLEWARE = [ 'whitenoise.middleware.WhiteNoiseMiddleware',]
I made sure all dependencies were installed by running: pip install -r requirements.txt
I collected the static files in my project to prepare them for Heroku by running: python manage.py collectstatic
In the Settings tab on Heroku, I scrolled down to Buildpacks and added the Python buildpack.
I applied the database migrations to set up my PostgreSQL database by running: python manage.py migrate
I created a Django superuser to access the admin interface by running: python manage.py createsuperuser
In the Deploy tab on Heroku, I clicked on Deploy Branch to manually deploy my app.
-
Username:
blackjack -
Password:
training2024 -
Username:
speed02 -
Password:
Saturday22
- Username:
shopowner2024 - Password:
fixthebike
- Username:
shopowner2024 - Password:
fixthebike
- Django Documentation – For authentication setup.
- Bootstrap Docs – For styling and UI components.
- Used GitHub’s Kanban Board for task organization.
Huge thanks to my mentor, Can Sücüllü, for his valuable guidance, insights, and feedback throughout this project.
This project was built with passion, problem-solving, and a love for cycling.
Happy riding, and keep your bikes in top shape!