The Bike Shed app is for cyclists who wish to keep a convenient collection of information about their bike/s and setup variables. The app allows users to create an account to login and store data securely before creating their bike or collection of bikes. Bikes can then be recalled for viewing, editing or deletion.
The intended user will be a cyclist who:
- Enjoys analysing data and fettling with their setup
- Is looking to extract the most performance out of their bike/s
- Wants to record settings so they can easily be reverted back to if needed
- Wants to show their friends all the cool components on their bike
The app will eventually also aim to connect riders via a ratings and selling platform.
The app is active and can be used here
- To have a convenient app to store data about my bikes
- To have a secure app to store sensitive data about my bikes such as a frame serial number or serial numbers for components
- To have sensitive information only visible to me
- To intuitively understand how to use and navigate the app
- To easily add and remove bikes
- To easily add and remove and update components on those bikes
- To record settings for each of my bikes such as tyre pressures and suspension settings
- To easily retrieve information about my bikes
- To easily retrieve settings for each bike
- To easily edit and otherwise manipulate information stored about my bikes
- To easily remove bike data
Users will need to sign up and login to view their account and bike shed. User credential creation is controlled using form validation and passwords are hashed before being stored using Werkzeug.
After being successfully signed up or signing in users will be directed to the 'My Bike Shed' page to add their first bike.
All pages are accessible using the buttons within the app and these lead users through the app in an intuitive manner. For additional convenience, a sidenav is accessible from the top left burger menu which enables users to jump to any section quickly and easily.
This is where users bikes are stored and accessed once created. From here users can refer to their bike spec, edit bikes and delete bikes entirely.
Bikes are easily identifiable at a glance by the manufacturer and model name. This is accompanied by a small icon to the left depicting the bike category.
An add bike function which will allow users to create a new bike and add it to their bike shed. Users will be presented with a form to complete which will capture various components. For the sake of convenience, at the point of creation users will only be required to complete the manufacturer and model fields and will be able to return to the bike at any time to complete the remaining fields. As the app can store potentially sensitive data such as frame serial number it will be hidden to all but the creator.
The edit bike button allows users to update or remove specific data. Any data that has been entered previously will be automatically filled in using the data held in the database. Users confirm changes using the button at the end of the edit form.
Users can delete a bike from the database completely using the delete bike button accessed through the edit bike page. This is defensively programmed to avoid any accidental deletions and will trigger a confirmation modal when clicked.
Stores data about the user such as username, name, email etc. As the rider weight is crucial to bike setup this can also be captured here.
- Upload image of bike
- Upload invoice of most recent service
- Track service history
- Rate my ride - Enable users to view other users bikes and rate them
- Sell my bike/make me an offer - Users can sell or just make their bike available for offers if they're considering selling.
- Bike archive - bikes owned previously, date sold, how much for
- Choose if a bike is visible to other users
- Adjust app so that users bike form fields are entered into their own respective category databases on creation, building a collection of each category as they are created for example manufacturers, models etc.
- Polish look of app overall - The route functions and debugging plus customising Materialize took longer than I had anticipated and meant that I didnt get the app to look as good as originally planned.
After careful consideration I opted for a non-relational database structure for this project. Realistically, relational or non-relational could have worked well, however I felt that given the potentially changeable nature of the data stored by users that a non-relational structure would suit the app better.
The database schema helped to inform the presentation and flow of the app. The app structure follows the flow of the creation process and intuitively guides the user through that process using prompts to gather information about users bikes.
As a first time user:
| Expectation | Implementation |
|---|---|
| Have a convenient app to store data about my bikes | The app provides a user friendly way to interact with a database structure and store bike related information |
| Have a secure app to store sensitive data about my bikes | The app regularly checks for user login data and will not allow sensitive page data to be viewed if not logged in. |
| Have sensitive information only visible to me | The app checks user data against stored data so bikes are only visible to the user that created them. |
| Intuitively understand how to use and navigate the app | The app guides users through the creation process by the order in which pages are linked together, validation and providing a choice of how to navigate the app through links or a sidenav menu |
| Easily add and remove bikes | Bikes are simple to create. Although many fields are allowed only a make and model are required for initial creation. Users can return and add more detail at any time. Deletion is also easily accessed from each bike page. This is defensively programmed with a confirmation modal to prevent accidental deletion |
| Easily add, remove and update components on bikes | Each bike page allows a user to edit the bike where components can be added, edited or removed by filling in or deleting from input fields |
| Record settings for each of my bikes such as tyre pressures and suspension settings | Currently this is acheivable using the input fields in the add bike form however in future I would like this to be a standalone element of the app to provide a better UX |
As a returning user:
| Expectation | Implementation |
|---|---|
| Easily retrieve information about my bikes | Upon logging in users are taken directly to their bike shed which lists all bikes belonging to that user. Each bike links to its own page giving all information held about that bike. Any input fields that have not been completed yet are hidden so as to not clutter the view and make it easy for users to see relevant information |
| Easily retrieve settings for each bike | Currently this information would also be displayed on each bikes page if previously entered by the user. |
| Easily edit and otherwise manipulate information stored about my bikes | Each bike page allows user full access and control over that data. User can read, update and delete specific or all data through these pages. |
- HTML
- CSS
- JavaScript
- Python
- Jinja
- Materialize by Google
- MongoDB by MongoDB Inc.
- Flask - Micro framework for site templating.
- Materialize v1.0.0 - The framework for the website.
- Font Awesome - For icons on the website.
- Jinja - Templating engine.
- Bing Create - For logo generation.
- Gimp - To create the favicon
- Figma - For lo-fi wireframes and hi-fi mockups
- Git - For version control.
- Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
- Heroku - For website deployment.
- MongoDB - The database used for storing information for the site.
- Pip - To install Python packages.
- UI.dev - To show the site on a range of screen sizes.
- W3C Markup Validation Service - To validate HTML and CSS code.
- CI PEP-8 Tool - To validate Python code and PEP-8 compliance.
This project can be cloned or forked in order to make a local copy on your own system.
You will need to install packages found within the requirements.txt file and set environment variables in an env.py file saved to the root directory.
pip install -r requirements.txt.
env.py
import os
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "YOUR_SECRET_KEY")
os.environ.setdefault("MONGO_URI", "YOUR_MONGO_URI")
os.environ.setdefault("MONGO_DBNAME", "the_bike_shed")
By forking the GitHub Repository, we 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:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
You can clone the repository by following these steps:
- Go to the The Bike Shed GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL
- Open Git shell or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/GitHubWestie/milestone-project-three.git
- Press Enter to create your local clone.
- Install required packages according to the requirements.txt In your IDE terminal type:
pip install -r requirements.txt
- Create env.py file in root directory and assign environment variables
- Create a new empty repo on GitHub - do not initialise with a README
- In your IDE terminal type the following commands to setup your repository:
git remote add origin https://github.com/your-username/new-repo.gitgit push -u origin main
This project uses MongoDB for the Non-Relational Database.
To set up a MongoDB Database URI, sign-up on the MongoDB site, then follow these steps:
-
The name of the database on MongoDB should be "the_bike_shed".
-
The collection(s) needed for this database should be "my_bike_shed", "categories", and "users.
-
Click on the the_bike_shed name created for the project.
-
Click on the Connect button.
-
Click Drivers.
-
Copy the connection string and assign it as the MONGO_URI value in the env.py file, making sure to replace
<password>with your database password (not your account password) and insert the database name after mongodb.net/mongodb+srv://<username>:<password>@cluster0.6wq2wyp.mongodb.net/<database_name>?retryWrites=true&w=majority&appName=Cluster0 -
Finally, navigate to network access in the left pane and change the IP address in the IP access list 0.0.0.0
This project uses Heroku
Deployment steps are as follows:
This process connects your GitHub repository to Heroku. Alternatively you can follow the instructions on Heroku to deploy using the Heroku CLI
- 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), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
| Key | Value |
|---|---|
IP |
0.0.0.0 |
MONGO_DBNAME |
the_bike_shed |
MONGO_URI |
user's own value |
PORT |
5000 |
SECRET_KEY |
user's own value |
- Back in the deploy tab in Heroku choose connect to github and connect your github account.
- Type or paste the repository name into the search box and select your repository
- Select Automatic Deployment from the Heroku app.
- Select the main branch to deploy from and click deploy
Heroku will now build the app. When finished click view or open app from Heroku to visit the deployed version.
A Procfile must be present for Heroku to deploy correctly and all requirements packages must be installed. These are included in the github repo.
You can install this project's requirements using:
pip install -r requirements.txt
The Procfile can be created with the following command:
echo web: python app.py > Procfile- replace app.py with the name of your primary Flask app name; the one at the root-level
NOTE: The Procfile uses a capital P and doesn't have a file extension on the end.
- Stack Overflow
- W3Schools
- YouTube
- Code Institute
Code Institute Tutor support and my mentor Ronan for saving whats left of my will and Amy my cohort facilitator for checking in when I was lost in the wilderness.