Tasked to create a website combining knowledge from the Python Fundamentals, Practical Python & the Data Centric Development modules on the Code Institute course.
Having previously created a scooter shop website for my MS2 and briefly touching on Skoot Routes within that, I decided for this project that i was going to take that idea and build on it. The site is based around Skoot routes that people can use to find unknown places around major cities while on holidays or just travelling around there own town on their scooters.
I built this website using all the content we learned on the course and more using features like EmailJS, Javascript, & Flask features.
Is to give people the freedom to explore unknown or popular places that people like taking their scooters for a ride and by allowing them to share it with others. They can do this by the way of sharing their route links from google maps and by giving a brief description as to why they love it so much and hopefully encourage people to explore the unknown or hidden gems that they have found.
-
As a user I want to easily navigate the site across all pages.
-
As a user I want to be able to have the ability to view pre-made (public) skoot routes.
-
As a user I want to sign up to a newsletter so i am kept up to date with the latest routes
-
As a user i want to be able to create, edit & delete my own routes.
-
As a user i want to be able to share my routes in a public place for others to enjoy.
-
As a user I want to view the site from any device (mobile, tablet, desktop).
The project has a main font of 'Maven Pro' which was imported via css from Google Fonts, with the backup font being set to a default of 'Sans-serif'. The clean feel gave the website a modern look but also making each character very easy to read for the user.
The main idea of this logo was taken from this site and by using photoshop i was able to add in a few of my own elements to help me create my desired logo. Its a very clean and simple logo but by incorporating the two O's to the body of the scooter made it really stand out and grab attention.
My Logo can be seen in the navbar of my site and is used as 'Home' button across all pages.
To help me choose my color scheme i used Adobe Color Wheel.
This process took a long time during the wireframe stage. In the end i decided on this color scheme as it is quite vivid bold and dark all at the same time. The bright orange gives it a very vivid feel and helps to highlight important points against the black backdrop and at the same time it gives the website a dark and bold feel. I also used white with a mix of an orange gradient to just break the page up from being a standard white background.
Three primary colors were chosen when creating this project:
#000000#fd9a05#ffffff
The three colours are featured heavily across the site.
The navbar is colored in
#000000, which offered a dark background to the logo and the nav-link elements
of
#ffffff and
#fd9a05.
The call to action buttons utilised the same navbar coloring of,
#000000, as their borders.
When not active, focused or hovered the main background color was set to,
#fd9a05 with the font inside being set to black. When an action or hover was captured on the button, it would turn the font to white, to show the user that this element is interact-able and something will happen when pressed.
To give the website a more colorful feel & to create a better visual experience for the user i added a subtle gradient effect to the route pages using white to begin with and then adding the gradient effect working its way into orange.
To build my wireframes i used Balsamiq.
All wireframes created for this project can be found Here.
Each element was structurally planned out at this stage and even during the physical build of the application there was not much deviation from the original planning. Each page was rendered as a wireframe in all viewport sizes to show the difference between them and to show how the elements would react to differing viewport sizes.
The base.html parent template contains all the default components for each page. A head element containing the meta data and all relevant links to Title, Logo, Favicon, Frameworks, custom CSS & JS files for the application. A navbar containing the logo and navigation links. The navbar also contains a sign up modal which can be accessed across all pages. Our footer which also contains our social icons. All of this was possible by using the jinja templating language and this allowed me to use the base template across all pages.
{% block content %} {& endblock %}
- Base Template Wireframe
- Desktop
- Mobile
-
This is a summary of the features i have put in place on my project but also the features i hope to add in the future.
-
All pages on the website follow the same principle with a fixed navbar, main image, a header, a footer with links to all of our social media platforms.
The project has several key features:
One of the main features is the CRUD functionality which is vital to this projects setup.
Create: The user being able to create a new skoot route via the create route form.
Read: Is implemented on the site showing the user the public routes that themselves & others have created.
Update: Present for a user to update a route and push it back to the database.
Delete: Present for a user in that they can delete a route from the site and the database.
In order to test the CRUD functionality operated correctly i created, edited & updated over 50 routes to make sure everything operated correctly on the site and also that the database updated accordingly. I also had family and friends and even my mentor Gerard Mc Bride set up their own routes and make sure they found no issues while doing so.
The navbar is featured on all pages and is used to navigate the site.
The navbar links are on the right side of the navbar. I have 6 links in total:-
- Home
- About
- Skoot Routes
- Public Routes
- Mobile
- Sign Up (which is linked to a modal)
Intuitive navigation fixed to the top of the the page that resizes for mobile devices with the hamburger icon. When pressed it expands to show the other navigable pages. On desktop i have used a hover function that will show the user which navpage they are highlighting over and to show the user that this is interact-able and something will happen when clicked.
- On the homescreen and across all pages i use a sign up button which is linked to a modal which allows the user to sign up to The Green-Machine newsletter.
- When the user clicks on this button of their desired route it will bring them to google maps which will show them the route they can take on their scooter around dublin landmarks and sites.
- When the user clicks on this button it will allow them to add their own route to the public routes page on the website and also adds it into the database.
- Allows a user to edit or delete a route from the site and also the database.
- The footer divider is featured on the mobile page of the website and it contains two clickable logos which will take you to external sites to download our mobile app.
- The footer is featured on all pages and contains clickable icons that will take you to each of our social media platforms.
In an ideal world, there are a couple items that I would've loved to have completed as well, but just didn't have the time or knowledge just yet as to how to implement these features.
-
To allow the user to create an account so that the routes they create are only editable by themself and nobody else.
-
Introduce a live version of google maps so that the map displays the route in each card instead of just an outside link.
-
To add user reviews to each of the routes added.
-
To add a view counter to each individual route so the user can see how many people have viewed their route.
-
Search functionality to search by multiple features such as length, Location, route type etc.
-
In the sign up newsletter modal, I would like to have the social icons fully functioning so that the user could sign up to the newsletter by signing up through their social media platforms.
The Technologies I used to build this project are as follows,
- Buiding the foundation of my project.
- For custom styling of my project.
- To implement features and user input for the website.
- Used as back end programming language.
- Used as a microframework.
- Used for templating with Flask.
- The project uses JQuery to simplify DOM manipulation.
- The framework i used to achieve the album card layout, my navbar, gallery section & contact form.
- Used for all icons within the footer and buttons.
- Used for the typography of the project.
- Used to send an auto-reply mail on user sign up to newsletter
- Used to store & manage my code.
- My IDE of choice to develop my project.
- A cloud platform enabling deployment for this CRUD application.
- Used to compress images without affecting image quality and to achieve faster image load times.
- Used for the creation of my pre-build wireframes showing the main elements and differences in size of same through small to large screen sizes.
- Used to create favicon from custom Logo I created for the project.
- Helped achieve color scheme.
W3C Mark-up Validation and W3C CSS Validation
- where used to check the validity of the project's code.
- Using JSHint to validate the project's Javascript
- To check my python code to be consistent with PEP8 requirements.
- Used to check for possible webkits required in the applications stylesheet ensuring Cross-browser support.
- Non-relational database used.
- Used to test the application's functionality and the CSS visualisation, as well as the correct style properties to override Bootstraps default settings.
- Used to crop, re-size, editing and creation of images.
Manual testing was my preferred choice for this project.
The website has been tested across multiple browsers and on mobile devices to ensure compatibility and responsiveness of the site. Continuous testing for this application was carried out throughout the entire lifetime of the build. This was achieved through Chrome Devtools and it was used constantly to test on as many devices as possible from Android to Apple phones & tablet dimensions, and also larger device sizes. The website was tested constantly throughout the build at home using devices i had on hand such as a Samsung Galaxy S10 & S8, a Xiaomi Redmi Pro 8 and for the tablet size i used an Amazon Fire HD 8.
If a bug arose during testing it was dealt with during the build of the project. The build and the fix where then pushed to the repository for the latest changes to take affect on the deployed application via automatic build & deploy function set up in Heroku.
- Chrome
- Mozilla Firefox
- Microsoft Edge
- IE
- Opera
- Xiaomi Redmi Pro 8
- Galaxy S10, S8
- iPad + iPad Pro (using Chrome devtools)
- Amazon Fire Hd 8
I used W3C Mark-up Validation and W3C CSS Validation to validate my html and css code. Unfortunately the W3C Validator for HTML does not understand the Jinja templating syntax, so it therefore shows a lot of errors with regards to {{ variables }}, {% for %} {% endfor %}, etc. Aside from the Jinja warnings and errors, all of the remaining code is perfectly validating
I used JSHint to validate the project's Javascript file which i configured to accept jQuery & ES6 New JS features, It returned 0 warnings.
I used PEP8 online to make sure my Python files are compliant to current standards.
I found 3 issues with the Internet Explorer browser all other browsers tested fine.
1. The hero image text overlay has an issue where the underline is not the color - 
#fd9a05 it sets to the default white.
3. I found an issue where the homepage button lets skoot is not the correct color- #fd9a05 It also appears to have the same issue in the add route buttons.
As Safari is no longer developed for Windows I used a site known as LambdaTest to run my code in a live view for mac and safari software. It returned a few errors however as this is not official software i cannot be sure the results given are accurate. When I tested my project through chrome and other browsers on this site it showed me errors which i do not have on these browsers when ran locally.
- As a user I want to easily navigate the site across all pages.
- This was made possible by the navbar which features links to different pages and also the buttons placed around as shortcuts to different parts of the site.
- As a user I want to be able to have the ability to view pre-made (public) skoot routes.
- To view these you can either go to the skoot routes page which are pre made routes by us for you or go to the public pages section where other users have created routes for use and viewing.
- As a user I want to sign up to a newsletter so i am kept up to date with the latest routes.
- Located in the navbar is a 'Sign-Up' button which will allow the user to subscribe to our newsletter and they will receive a notification email on receipt of their request.
- As a user i want to be able to create, edit & delete my own routes.
- This feature was added to the public routes page where the user can add, edit or delete the routes they created.
- As a user i want to be able to share my routes in a public place for others to enjoy.
- These can be seen in the public routes section of the website.
- As a user I want to view the site from any device (mobile, tablet, desktop).
- The website was developed with mobile first responsive design which will scale up for larger devices.
This site is currently deployed on Heroku using the master branch on GitHub. To implement this project on Heroku, the following steps were taken:
-
Create a requirements.txt file so Heroku can install the required dependencies to run the app. sudo pip3 freeze --local > requirements.txt
-
Create a Procfile to tell Heroku what type of application is being deployed, and how to run it. echo web: python run.py > Procfile
-
Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
-
In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables as follows:
- IP : 0.0.0.0
- PORT : 5000
- MONGO_URI :
- MONGO_DBNAME :
-
Once the above was done, the app was deployed via this link: "https://skoot-route.herokuapp.com/".
-
My repository can be found here:
To clone the repository:
-
Select the Repository from the Github Dashboard.
-
Click on the "Clone or download" dropdown button which is located beside the Gitpod button to the right.
-
Click on the "clipboard icon" to the right to copy the web URL.
-
Open your preferred Integrated Development Environment (IDE) and navigate to the terminal window.
-
Change the directory to where you want to clone the repository too.
-
Paste the Git URL copied from above and click "Ok". .
-
The modal & the footer divider used was sourced from this Site.
-
The Skoot Route Idea was based on the design from this site Here.
-
The use of the CRUD functionality was assisted by the course content from the Code Institute Course.
-
How to set up enviroment variables and store mongo db username and passwords in env.py file and put into .gitignore was assisted by a blogpost from CI in Slack.
-
Creating custom 404 & 500 pages from Flask Documentation.
For assistance i have used the following sites:-
- The photos used in this site were obtained from google images searches. As it is for educational purpose and not for profit i was made aware that it may not be neccessary to ask for permission.
- I would like to thank those in Slack, the Tutor Support and my Mentor Gerard McBride for assisting with me with any queries i had during this project. You and all the advice have really helped me during the course of this build.
Disclaimer: This project and its content were created for educational purposes only as part of the Code Institute Course for Milestone 3 Grading.