Sprint, my third project for code institute, a stripped back easy to use, personal activity tool. Applying a multitude of programming languages from Html, Css, Python, and to JavaScript. Libraries from Materialize, font-awesome& jQuery. Molded altogether into one efficient activity log tool back by MongoDB database.
Keeping fit by running or walking is popular amongst millions of people across the entire globe from your local park to the olympic games.
An essential part of increasing an individuals fitness and the ability to objectively gauge their own fitness is logging activity times, intensity, and factors such as surface& weather.
With this in mind the Sprint platform was designed with the main purpose of being a tool that allows the user to log their walking or run activities with ease anywhere and on any device. Sprint wants to make it possible for the user to manage their every single log on the platform, such as changing the activity name, changing their difficulty preference or even deleting that Sprint log altogether.
The purpose of this project is to be used as a personal activity log for my runs; because I am passionate about running and want to keep a daily log of set activities to track my times, distance& activity difficulty.
I decided to create the sprint brand from experience of using other activity logging sites such as Strava or Garmin, I wanted Sprint to be a back to basics tool without any of the social media elements found in those applications.
Here are some outside user opinions on what the site should offer:
“As a local park runner I think the platform should keep a log of my runs and I can compare with my previous runs easily, this shows me where my fitness is at.”
“My name is Lucy, I would like the site to be appealing with lots of color and icons, as I find alot of activity sites to be boring.”
“Hey, my name is Lebron, a professional basketball player, I think that the site should allow me to input my running activity distance and activity difficulty as this keeps a record of what I have done.”
As this application will be purposely designed for me as the user, this platform will:
Track of all run and walking activities.
Access the platform from all my favourite devices, such as smartphones, tablets, laptops or PCs, without loss of content.
View all Sprints on one page logged on the platform and all its details, such as description, difficulty, name, and others.
Add new Sprint logs on the platform.
Update any of the logs on the platform.
Delete any logs on the platform.
Be able to search through all Sprint logs using a search bar.
Filter all logs using search bar by title or description.
Since this application is meant as a personal tool for just for myself, a register and login page was not deemed necessary as this would slow down the process of logging Sprints.
The website designs are inspired by fashion site examples:
https://www.sitebuilderreport.com/inspiration/fashion-websites?a=ga&gclid=CjwKCAjwq_D7BRADEiwAVMDdHoGEnRu5zrH-fEWgfpOnhxGxPaq8MuHTTI8feKxabc5NvymTHEQVohoCUJ4QAvD_BwE
for example the welcome page which I took the idea of an full page image with a simple subtitle& button that takes the user to the main site.
This project was developed with the focus on a mobile approach first. However, with full responsiveness on other screen sizes.
I applied materialize library to all the major features of the site, which includes the cards, navigation, side-bar, input form, accordian, buttons and the footer.
A major aim of this project was to have a fun and exciting appearance, with dark orange to dark blue proving the perfect contrast. This contrast is pleasant to look at and make texts and icons(orange, white, black colors) stick out in a positive way.
The welcome page is one big image of two runners on an icy surface, the image color tone is a dull blue so I ensured the title& button stand-out, using white text& icons and the button background lights up orange and the white text turns dark blue.
Main site the colour scheme, I used highly contrasting but equally compatible fonts alongside white texts& icons.
The homepage cards have an orange background, both cards have an image each with a blue/teel button at the foot of each card against the white background.
The navigation bar(create, explore and edit pages) on desktop and screen sizes above 768px the background is orange with dark blue icons, white Sprint title and a search bar which the typed text is black.
Devices on mobile and tablet below 750px I applied a sidenav which bars are white, background color is dark blue, icons are orange and texts white plus an image at the top of
the sidenav with dark blue sprint title.
Read full summary of site style colorways here: https://github.com/michodgs25/Sprint/issues/3#issue-716076941
The icons used in this project are provided by Font Awesome 5.14.0.
These wireframes were designed with Balsamiq Mockups. Since the first version of scope, some things have changed during the development of the final version.
A major change being the homepage cards which instead of the cards being side by, they are stacked with create sprint on top and explore sprints directly below.
Also a major change was to not include the site logo icon and the social media symbols on the welcome page as this clashed with full page image.
Another two differences between desktop and tablet(below 768px)& mobile, which are breakpoints, which adapts features to fit various screen sizes and the implementation of a side-nav for mobile and tablet 780px& under only.
Site logo and social media excluded from final product
Breakpoints applied to resize cards for tablet& mobile screens.
Cards placed horizontally instead of side by side, this fits the mobile first approach.
Tablet& Mobile Create page
Tablet& Mobile Explore page
Tablet& Mobile edit Sprint page
Breakpoints adapt the page to each screen size.
CRUD refers to the four functions that are considered necessary to implement a persistent storage application: create, read, update and delete. Persistent storage refers to any data storage device that retains power after the device is powered off.
For this project the mongoDb platform retains/stores the data when the user departs Sprint.
MongoDB stores data in flexible, JSON-like documents, meaning fields can vary from document to document and data structure can be changed over time.
The document model maps to the objects in the application code, making data easy to work with - https://www.mongodb.com/
The CRUD method is integral to this sites functionality, with this in mind, below is the sprint platform CRUD method:
CREATE -
The User can create a sprint log on the create sprint page and save the log to the explore sprints page.
READ -
User can read every single one of their saved sprint logs on the explore sprints page.
UPDATE -
User can update a sprint log by clicking the edit button on a sprint log via explore sprints page and change the details of the log.
DELETE -
User can delete a sprint log via delete button on a sprint log via the explore sprints page, once this is clicked the log is permanently deleted.
The MongoDb database has one collection aptly named sprints to reflect the project name, collection schema values below:
_id: "uniqueIdentifier"sprint_name: ""sprint_surname: ""sprint_gender: ""sprint_age: ""sprint_activity: ""sprint_title: ""sprint_description: ""sprint_difficulty: ""sprint_date: ""
Below is the method used via app.py to get the above collection values using “request.form.get” method and when a new log is saved, inserts new log into the collection and redirects to explore sprints page:
@app.route("/activity/add", methods=["GET", "POST"])def add_activity():if request.method == "POST":sprint = {"sprint_name": request.form.get("sprint_name"),"sprint_surname": request.form.get("sprint_surname"),"sprint_gender": request.form.get("sprint_gender"),"sprint_age": request.form.get("sprint_age"),"sprint_activity": request.form.get("sprint_activity"),"sprint_title": request.form.get("sprint_title"),"sprint_description": request.form.get("sprint_description"),"sprint_difficulty": request.form.get("sprint_difficulty"),"sprint_date": request.form.get("sprint_date")}mongo.db.sprints.insert_one(sprint)return redirect(url_for("sprints"))sprint = mongo.db.sprints.find().sort("sprint_name", 1)return render_template("add_activity.html", sprint=sprint)
An excerpt from the create page form, the “id”, “name”, and “for” elements which shares the value created in mongoDb, called in app.py, “sprint_name”:
<form class="col s12" method="POST" action="{{ url_for('add_activity') }}"><!--provide user first name input--><div class="row"><div class="input-field col s12"><input id="sprint_name" name="sprint_name" type="text" class="validate"minlength="1" maxlength="25" required><label for="sprint_name">First Name</label></div></div>
Visit https://github.com/michodgs25/Sprint/blob/master/templates/add_activity.html to see full create sprint page code.
Welcome page, has a full sized background-image.
In the middle of the image is the welcome page title, that encourages user to enter.
Below the title is a button titled “Sprint on it”, this transports user to home page.
Adapted from the materialize library, the cards are a creative way to provide the user the two available options: Create or Explore.
Both cards have an image with a button tag: “Create Sprint” and “Explore Sprints” and when button is clicked takes the user to the respective page, which is either the Create or explore.
The cards have a classical look with an image, white blank middle section and button at the center bottom.
The Create activity card takes the user to the create page where user can log a new activity.
The Explore activities card takes the user to the explore page which displays all the previously logged activities by the user.
The button is moved to the center of the card, as it looked better in that position.
The create activity page primary purpose is for user to create and save their latest activity.
The user will input personal details such as name& last name for every activity log.
The title of the activity is very important as this helps locate the particular activity in database when user types in search bar on explore card or explore page.
The description of the activity, allows the user to talk about the experience of doing this activity.
The create page feature provides a activity difficulty select box, which the user can choose between: easy, light, moderate, hard and very hard
The create page has a social media footer in which user can share activity.
The explore activities feature, has all the logged sprints on one page.
Each log is an accordian initially displaying just the date and title, the user can click on post and an addition box drops down which displays activity description, difficulty of activity and a edit delete post buttons.
This feature has a search bar on the navigation bar, user can search through all the logged activities, nav-bar also follows the user scroll.
Clicking the edit button opens up a version of the create page where user can update title, description, difficulty and the date of activity.
Clicking the delete button will remove post.
This feature footer has the social media links.
The accordian feature is a crucial feature to displaying sprint logs to the user.
The feature is made up of a header and body sections
The header has the date and title of the sprint log plus an edit& delete button.
The edit button opens up the edit page.
The delete button permanently removes the sprint log to the database.
The user accesses the body by tapping the header and the body drops down to reveal the sprint description and difficulty which the user chose when creating the sprint.
A for loop is integrated within the accordian calling the key values from MongoDb and app.py, see edit example from explore.html template below:
<ul class="collapsible">{% for sprint in sprints %}<li><div><i class="fas fa-caret-down arrow"></i><h6>{{ sprint.sprint_date }}<br>{{ sprint.sprint_title }}</h6><a href="{{ url_for('edit_activity', sprint_id=sprint._id) }}" class="btn-small orange darken-2">Edit</a><br><a href="{{ url_for('delete_activity', sprint_id=sprint._id) }}" class="btn-small red accent-4">Delete</a></div><div><div><h5>Activity description:</h5><strong>{{ sprint.sprint_description }}</strong><br><h5>Activity difficulty:</h5><strong>{{ sprint.sprint_difficulty }}</strong><br></div></div></li>{% endfor %}</ul>
Orange background added to sidenav search bar to increase visibility/accessibilty.
Used on the explore page nav& sidenav to search through my saved sprint logs.
This feature helps the user search through all previously logged sprints without having to labor by scrolling through them all.
If for example the user would type a completely random text, that has nothing to do with any sprint logs, the platform return the nav& footer only.
A reset search button is placed next to the input area, when pressed, refreshes and returns all logged sprints.
Only applied to the explore page exclusively, and is hidden on the create sprint page using this piece of code below:
document.addEventListener('DOMContentLoaded', (event) => {
if (window.location.pathname == '/activity/add') {
document.querySelector('.search-form').style.display = "none";
} else {
document.querySelector('.search-form').style.display = "block";
}
});
document.addEventListener('DOMContentLoaded', (event) => {
if (window.location.pathname == '/activity/add') {
document.querySelector('.side-form').style.display = "none";
} else {
document.querySelector('.side-form').style.display = "block";
}
});
The above function is really helpful for hiding certain elements when extending base.html to multiple pages and was used to streamline the platform ensuring user stays on point, either logging a sprint or exploring previous logs.
The edit activity page primary purpose is for user to edit their already logged activity.
The user can edit their logged Sprint.
The edit page feature has two buttons named save changes and cancel changes.
Create activity page, a crucial part of this site, as this allows the user to create an activity log.
If the log has been deleted, and if the log page still exists on another page, once refreshed will return this error page.
The page has a green button which transports the user back to the homepage.
Using a defensive programmer approach, the addition of the error page guards against any unforseen circumstance of a log still existing on a different tab after being deleted on the explore page.
Login and Register pages
User profile
Summary: Adding a login page was seriously considered after receiving feedback from Slack here..
But decided against this as much of the site structure had already been built and not enough time to implement properly before the project deadline. So has been moved to future feature implementations.
This section looks into what existing issues that are still present in the project& what future iterations could do to resolve these issues:
Welcome page, on the ipad pro screen the cards push to the top of screen leaving significant space below. When attempting to change this via breakpoints, this impacted other screens such as desktop. Future investigations to look at the card dimensions.
At this point of the project there are no other errors that I can see that are to the detriment on the platform via manual testing and using google dev console.
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js
Python 3.7: https://www.python.org/
Font Awesome: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css
JQuery library: https://jquery.com/
Google fonts: https://fonts.google.com/
These technologies helped create, shape and test my code
MongoDB - https://www.mongodb.com/: provided the database to store my Sprint logs.
Balslamiq - https://balsamiq.com/: provided tools to construct the wire-frames of the platform.
W3.CSS - https://www.w3schools.com/: provided the idea to add an image to the sidenav
JS hint - https://jshint.com/: Tested my JS code and provided feedback to increase code quality.
W3S html& css validator - https://validator.w3.org/: Tested both my HTML& CSS code and provided feedback to improve quality.
Pylint - https://pypi.org/project/pylint/: Used with the IDE terminal typing pylint app.py this returns a report of the python code.
pep8 - http://pep8online.com/: An online python code tester, returns any errors within code inputted.
mobiReady - https://ready.mobi/: Online app that that test whether the app is mobile ready.
Google dev tools: found top right corner of the chrome browser, more tool then bottom option. Provided a virtual testing environment.
Google fonts - https://fonts.google.com/: Help provide the text style of the site.
Summary: During the development of this project, I had the experience of facing some problems, exhaustively testing the functionality of each part of the platform and managed to solve most of the problems that arose before writing this document.
I received help from some family and friends to do the tests on the platform resources and all the problems presented were solved without problems for example my brother found that on his mobile device there was x-scroll on the create sprint page.”
See testing documentation here: https://github.com/michodgs25/Sprint/blob/master/test.md
This sites version control is through github linked to the heroku app, using gitpod IDE, once completed a piece of work, I would type into the terminal:
You will need the following tools installed on your system:
Python 3 - https://www.python.org/downloads/
An IDE such as Visual Studio, gitpod, Code, or like this project gitpod
An account at MongoDB Atlas - https:https://github.com/michodgs25/Sprint//www.mongodb.com/
Git - https://gist.github.com/derhuerst/1b15ff4652a867391f03
I personally used github on my local machine to develop the site using Python 3.7.3 and deployed to Heroku via Github.
To download or clone the site to your local machine you will need to go to my repo here. and see deployment steps in https://help.github.com/en/articles/cloning-a-repository
Before you download or clone the site you will need to ensure you have Python 3.7 installed.
Once you have Python installed, created a virtual environment as appropriate to you chosen IDE and os.
Run the requirements.txt file as appropriate to your IDE to install the relevant required packages dependencies for the project into your virtual environment.
Run the app.py file as appropriate to your chosen environment and os.
You should now be able to view the site on your localhost on port 5000.
To deploy this app to Heroku you need to follow the steps below:
Create a requirements.txt file so that Heroku can install all the dependencies required to run the app.pip freeze > requirements.txt
Create a Procfile with the command:echo web: python app.py > Procfile
In this step, you have to create a free account on the Heroku website.
0.0.0.05000link to your Mongo DByour chosen secret key
Very Special Thanks to:
Special thanks to the valuable feedback given by slack, I implemented the feedback on navigation font-size and seriously looked into adding a login page.
See feedback below:
All images were take from Google images advanced search with filter - “free to use or share”