The Momentum Bicycle Workshop website is an imaginery workshop for anyone who needs some sort of service to be carried out on their bicycle. As one would say this would your local bike shop. It's not a frnachise or a big multi corporation, Momentum Bicycle Workshop is a small independent business, that was openened with the aim to help out anyone who is having troubles with the bicycle. The main driving force behind the business is the passion for cycling, promoting a healthier way of locomotion and the social aspects of cycling.
The objective of this app/ website is to provide the user with a guidence and service regarding bicycle issues. This project is my fourth milestone project of my Code Institute Full Stack Developer course.
Before starting the coding for this project, I took the time to think about how to set up the architecture of this app, the layout of the output on the frontend and the functionality required to provide a good user experience. To get some inspiration I did look around if there are any similar business and if so how does their website look like? (based on my location)
(https://bicycle-workshop.de/about)
(https://www.imboden-bike.ch/en/workshop)
(https://aureusdrive.ch/en/about-us/blog/)
Well, it didn't take to long to notice, there isn't much out there on this market. From these businesses nothing stood out. I really like an aesthetically pleasing look of website, regardless of what is the website related to. Seems like bigger companies have a well structured, more complex website, with additional e-commerce functionality. But I was after the small local shop "feeling", and some of those businesses don't even have a website...so right there is a small market gap for simple, but nice websites with few basic functions. Once I realized this, this was/ is my vision throughout the process.
A small, friendly business perhaps could connect with the custumers better, making them returning customer in the long run. Momentum Bicycle Workshop is targeting everybody on bikes. From the daily commuters to the weekend leisure riders and even the competitive- sporty riders.
This website is useful for anyone wanting to have a fast and reliable repair work done on his/ her bicycle.
Some examples of such users are:
- The teenager who rides bike daily to school and has a puncture.
- The hipster university student who will head for beers with his friends, but he would like to show off his new pedals.
- The pensioner grandma who rides her bike once a week to the market, but it's been a while now since that bike had a full maintenance job.
| As website user for a service, I want to... | So that... |
|---|---|
| ...be able to find a bike shop online, that is nearby. | ...I can plan my visit to the workshop. |
| ...get information on the prices of the services. | ...I can make and informed decision on what service I need. |
| ...be able to call or email the workshop. | ...I can have specific questions with regards to the services. |
| ...be able to register on the shop's system. | ...I can schedule an appointment for bike repairs. |
| ...to be able to modify or delete my existing appointments. | ...in case for some reason I cannot make it to the original appointment. |
- Python
- HTML
- CSS
- Code Institue template:
- The foundations are based on Code Institutes Blog project in the study material.
-
Django
-
Bootstrap:
-
GitHub
- Github was used to store the project after being pushed
- Code Editor
- To write and run the code GitHub's Code editor was used.
- Favicon
The data model and the use of 'CRUD' operations are central to the functioning of the app.
-
Authentication of customers at log in
-
Authentication of 'shop owner' at login
-
Authentication of 'super user' at website admin log in
-
Validation of restricted days/ times at appointment booking
-
Validation of appointment cancellation
-
A user friendly calendar view to book appointments instead of the old fashioned scroll down list
-
A system to prioritise jobs for shop owner such as 'in progress' - 'completed'
-
'Where to find us' section with a map of the shop's location
-
Contact details for existing appointments on the system
-
Forgotten password, password reset
- Navigation bar
- Link to PDF price list
- Registration
- Log In page - for user and owner
- Appointment - schedule for user and owner
- Appointment - modification for user and owner
- Photo upload - for user
- Django Admin log in - for developer of the website
- username: blackjack
- password: training2024
- username: shopowner2024
- password: fixthebike
- username: shopowner2024
- password: fixthebike
Admin link (https://momentum-bicycle-workshop-22fb69372d3e.herokuapp.com/admin/myapp/appointment/)
I took a test-as-you-go approach - testing after each change to ensure that my desired outcome was achieved.
I also completed an end-to-end test covering these aspects, at milestones throughout the project:
- Test each user journey from start to finish
- Test going home from every input possible
- Test every input with invalid inputs, empty inputs and wrong values (where applicable)
- HTML validation
- CSS validation
Tested the application on Chrome, Safari, Firefox. Appearance normal, functions working.
- Appointment extraction for owner
This project was deployed to Heroku: a hosting platform and is accessible via the mock terminal displayed on the (https://momentum-bicycle-workshop-22fb69372d3e.herokuapp.com/).
- I used Learn Django to help me set up login/logout etc.
- I also used the documentation of all the elements included in this project: Django, Bootstrap
- I tried to map the project on Git Hub's Kanban Board to visualise the phases
I referred back to the Blog Post Walkthrough Project set up videos to remind me how to set up the main structure, functions, credentials and files before starting coding.
Grateful for the help and the input from my mentor Can Sücüllü. He always gave a different perspective on the issues and with his experience and eyes for details I was guided in the right direction to make this project happen.