Are you a swimmer looking for a convenient way to store and access your swim sets? If so, MySwim is made for you! Other than providing a secure place to store and access your swim sets, it also allows you to search for existing and new sets, that have been uploaded by fellow swimmers.
MySwim allows you to create a free account where you can add and save as many of your own swim sets, that are then shared with the MySwim community. You can save some of your favourite sets to your profile for convenient access. You can also print sets straight from the website.
MySwim is my third milestone project as a Code Institute student working towards a Diploma in Full Stack Software Development. It forms part of the Data Centric Development Module where the main aim is to "build a full-stack site that allows users to manage a common dataset about a particular domain."
As a swimmer, this site will provide personal value as a convenient means to store and access swimming programmes or sets. Having always relied on bits of soggy paper, stored here-and-there, the website will aim to alleviate this. It will also be beneficial to me as a swimmmer to have access to a collection of swimming sets, submitted by other swimmers, rather than constantly having to cycle through the same sets, or come up with new ones at the last minute.
-
-
- To easily understand the main purpose of the site and learn more about what it offers.
- Access to easy and clear navigation.
- To experience a responsive site.
- To experience appealing visuals and design.
- To experience intuitive UX Design.
- A convenient and secure registration process.
-
- A convenient login and logout process.
- To be able to search for swimming sets using appropriate keywords.
- To have access to a personal profile.
- To be able to save 'favourite' swimming sets created by other users under my profile.
- To be able to add new swimming sets.
- To be able to edit or delete swimming sets from my profile.
- To be able to print out a selected set.
-
- To manage categories (add, edit or delete).
- To be able to edit or remove content submitted by users.
-
Minimum Viable Product for the website will include:
- responsive navigation on all pages
- home page - featuring a hero image and call to action
- about section - offering information about the site's purpose
- error pages - in the event of 404 or 500 errors occuring
- print page - gives users access to print friendly version of a set
C.R.U.D Principle to be met by incorporating the following functionality within respective pages:
- Register (CREATE user instance in database)
- Log In/Log Out
- Search Sets (READ and RETRIEVE records in database)
- Profile Page (READ records in database)
- Add New Set & Add Favourite to Profile (UPDATE and add to data)
- Manage Content for Admin: - Add Category/Set (UPDATE records) - Edit Category/Set (UPDATE records) - Delete Category/Set (DELETE records)
- Edit a Set (UPDATE existing data)
- Delete a Set (DELETE to remove records from database)
- Wireframes can be viewed here
- A site map can be viewed here
The theme is inspired by swimming and is intended to appeal to all types of swimmers. A clean and modern colour scheme with contrasting and complementary colours was chosen to reflect a sense of simple energy. Coolors was used to generate two colour palettes which were incorporated as utility classes in the CSS file, to be easily called upon directly from the HTML files.
Take a closer look at the colour schemes:
-
Tourney Text was selected for the MySwim logo in the Navbar and makes an appearance in selected headings and messages throughout the site. I chose it for it's 'sporty, techy' vibe (to quote Google Fonts).
-
Roboto was chosen for the body of the site. It has a modern and open appeal and pairs nicely with Tourney Text.
-
- Appropriate images related to swimming were selected for the site.
- Images are all obtained from Unsplash and are free to use.
| Key | Type | Notes |
|---|---|---|
| _id | ObjectId | |
| category_name | string | Category Name |
| set_name | string | Set Name |
| warm_up | string | Warm up instructions |
| pre_set | array | Array allows for dynamically added fields using JQuery script |
| main_set | array | Array allows for dynamically added fields using JQuery script |
| cool_down | string | Cool down instructions |
| total_km | string | Set Distance |
| created_by | string | Created when a session user submits a new set |
| Key | Type | Description |
|---|---|---|
| _id | ObjectId | |
| category_name | string | Category Name provided by Admin |
| Key | Type | Description |
|---|---|---|
| _id | ObjectId | |
| username | string | User's username |
| password | string | Password gets hashed when user creates an account |
| Key | Type | Description |
|---|---|---|
| _id | ObjectId | Created when a user saves a set as a favourite |
| set_id | string | Associated set id |
| set_name | string | Associated set name |
| user | string | User id |
- Register Account
- Log In to Account
- Log Out of Account
- View Swim Sets
- Search Sets
- Add a Set
- Edit a Set
- Delete a Set
- Add a Set to Favourites
- Print a Set
In addition to the above, the admin user has the following features available:
- Add a Category
- Edit a Category
- Delete a Category
- Edit any Set
- Delete any Set
Defensive Programming Features include Deletion Confirmation alerts that appear as a modal, when a user clicks on any 'delete' related button.
-
Pagination: I would have loved to have included pagination to the site, as I am fully aware that it contributes to a better user experience. Due to time constraints, it was necessary to prioritise other elements/features.
-
Remove Set from Favourites: Again, this is an important companion feature to the 'Add Favourites' feature, however I did not have the time to make it work.
- Visual Studio Code - Coding Editor
- Git - Version Control
- GitHub - Repository Storage
- Imgbot
- A Github app that optimizes images (free for open source projects).
Imgbot sends an auto pull request with images optimized. The pull request is merged and Imgbot keeps working as changes are made to the repository.
- MongoDB - Database Management
- Heroku - App Hosting
- Balsamiq - Wireframes, Site Map
Full testing details can be found here
The deployed version of MySwim has been created using the master branch.
The following is required to run this project in your local environment:
Python 3 - to run the code
PIP - for package installation
Git - used for version control
MongoDB or MongoDB Atlas - for database development
Visual Studio Code - or your own choice of IDE
To clone this project from its GitHub repository:
- Click on the Code button
- Copy the clone URL for the repository: https://github.com/Wingkelinks/myswim_MSP3.git
- From within your IDE, open your integrated terminal
- Make sure you are in the correct folder location
- Then type git clone and paste the URL: https://github.com/Wingkelinks/myswim_MSP3.git
- From there create an env.py file to store your credentials as follows:
import os
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "")
os.environ.setdefault("MONGO_URI", "mongodb+srv://<username>:<password>@<cluster_name>-ofgqg.mongodb.net/<database_name>?retryWrites=true&w=majority")
os.environ.setdefault("MONGO_DBNAME", "my_swim")You can use a random key generator if you wish.
- This file MUST be hidden in your .gitignore file to keep credentials from being visibly pushed to the repository
- You should be able to run the app by typing python3 app.py into the terminal
- In MongoDB you will need to create a database called MySwim.
- The following collections should be created:
- sets
- categories
- users
- A document in categories should be created with the following fields:
| Key | Value | Type |
|---|---|---|
| category_name | aerobic | String |
- The same applies for sets and users, however the sets collection has two fields of arrays:
| Key | Value | Type |
|---|---|---|
| pre_set | [] | Array |
| main_set | [] | Array |
MySwim is deployed on Heroku from the master branch. To do this, the following steps were taken:
- From your terminal, create a requirements.txt and Procfile using these commands:
pip3 freeze --local > requirements.txt
echo web: python app.py > Procfile-
Sign up and login to Heroku, create a new app
-
Name your app
-
Go to the Deploy tab and then Deployment Method and select Github
-
Under Connect to Github enter your details and connect your repository
-
Next, go to settings and select Config Vars and then Reveal Config Vars
-
You need to enter the following variables to match what you have stored in your env.py file
- IP :
0.0.0.0 - PORT :
5000 - MONGO_URI :
MONGO_URI", "mongodb+srv://<username>:<password>@<cluster_name>-ofgqg. mongodb.net/<database_name>?retryWrites=true&w=majority - SECRET_KEY :
<app secret key>
- IP :
-
Under the Deploy tab go to Automatic Deploys and enable
-
Under Manual Deploy, choose Master and click Deploy Branch
-
Heroku will begin building the app. When it is ready, you can click Open app to launch it.
- Code Institute Task Manager Project (Tim Nelson)
- MS3 Strategy and Tips (Ed Bradley)
- Fellow Students MS3 Project (Ed Bradley)
- Code Institute course material
- Code Institute Slack channel
- Mastering Markdown - Guide to markdown on .md files.
- CSS Tricks - convenient CSS resources. Regularly referenced their Flexbox tutorial.
- Stack Overflow - general questions and problem solving.
- MDN Web Docs - general questions and problem solving.
- CSS3 Animation Notification - referenced to create custom flash messages
- Print Page JQuery - to initialise my print functionality
- Tutorial by Cody Mind - dynamically add and delete form input fields
- Dogfalo - to customise the Materialize form input fields
- All initial site content is written by the developer.
- Images obtained from Unsplash, an open source photography platform.
- Thanks to my Mentor, Sebastian Immel for his guidance and support.
- Thank you to Ed Bradley, for his MS3 Tips and Strategies video.
- Thank you to the Code Institute and the top quality course content.
- Thank you to the Code Institue Slack community - a great place to check in and learn from others.