Welcome to eKafagym Web App
This web app was designed to help the Kafagym members be able to plan for their workouts. This is done by creating, reading, editing, and even being able delete their workouts as a reference while training.
It has been designed in such way that its visitors will be able to navigate the web app features easily and with help of simple but clean colour combination.
- A user needs to be able to navigate the web app pages with ease on different devices.
- A user needs to be able to sign up and in to able to use the web app.
- An anonymous user should not be able to add/edit/delete any workout or profile.
- An anonymous user should not be able to view other users' profile.
- Admin of the platform should be able to add/edit/delete any workout and manage the workout plans.
- A user should be able to add/edit/delete any workout or profile.
- A user should not be able to add/edit/delete any workout of other users.
- An anonymous user should not be able to search the added workout.
The web design main target is to provide the user with the ability to interact with the game. The layout consists of features and elements that allows the user to navigate and use the interact with the game.
- Colour Scheme
- Typography
- The dominating color throughout the entire layout is light grey which is combined with dark grey color used for header in the navbar. In order to make the text buttons and logo stand out, I used the orange color for which created a harmonious combination for both text and buttons background color.
- This was generated by materialize used mainly of styling.
The wireframes for the site were created with help of Balsamiq. They feature the site look from different angles i.e computer, mobile phone.
| Feature | Feasibility | Importance |
|---|---|---|
| Navbar logo | 5 | 5 |
| Logo Profie page | 5 | 5 |
| Navbar Home | 5 | 5 |
| Sign In link | 5 | 5 |
| Sign Up link | 5 | 5 |
| Profile link | 5 | 5 |
| Add Workout link | 5 | 5 |
| Workout Plans btn | 5 | 5 |
| Add Workout link | 5 | 5 |
| Workout Plans btn | 5 | 5 |
| Searching function | 5 | 5 |
| Add, Update, Edit, Remove workout (Admin only) | 5 | 5 |
| Add, Update, Edit, Remove workout plan (Admin only) | 5 | 5 |
| Add, Update, Edit, Remove workout (registered user) | 5 | 5 |
- HTML5
- CSS3
- JavaScript
- Python
- Flask
- MongoDB
-
- Materialize was used to ensure the responsiveness and styling of the website.
-
- For version control, Git was used mainly to commit with help of Gitpod terminal and Push to GitHub.
-
- GitHub is used for storing the code pushed from Git.
-
- Balsamiq was used to create the website home page wireframe during the design process.
-
- ColorZilla was such a handy extension used to pick the appropriate hexadecimal during the design process.
In order to check the validity of the website code, the W3C Markup Validator and W3C CSS Validator were used on each page of the website to check the syntax errors.
- HTML Validator returned some errors where jinja has been used.
- CSS Validator returned zero errors in the styling.
- JavaScript Validator returned five warnings but no errors were identified.
- pylint app.py was used to check python errors.
The site is compatible with different devices including mobile and tablet as well as computer. The responsiveness aspect was regularly checked using Google Chrome inspect features without forgetting Safari and Mozilla Firefox.
As a user and the plater at same time of the game on the website, I want to:
- Navigate the page easily.
- Sign in and Sign up.
- User was able to sign up and in to able to use the web app.
- An anonymous user was not be able to add/edit/delete any workout or profile.
- An anonymous user was not be able to view other users' profile.
- Admin of the platform is able to add/edit/delete any workout and manage the workout plans.
- User should is able to add/edit/delete any workout or profile.
- User is not be able to add/edit/delete any workout of other users.
- An anonymous user is be able to search but not able to edit workout.
The page layout makes it easier to navigate around. The features on the web page are straightforward to find and get along with with ease.
The user is provided with the field to enter their their data.
Users must have an account to create workouts so there is a users collection that has username and password as keys of the data. username in users collections is linked with the username in workouts collection because users who have an account can only create workout and they create workout in their own account. Same logic applies as username in users collection that users can only create workout for the categories available in a categories collection so it is liked with workout_plan in workouts collection. Only admin can edit categories in categories collection so it was created as an independent collection. The data in all the collections are retrievable and can be identified by the key or unique id of the object.
- The website was tested through different browsers; Google Chrome, Mozilla Firefox, Microsoft Edge and Safari browsers.
- The website was viewed through various devices including iPhone7 and iPad, large screen and laptop to check it responsiveness.
The project has been deployed using Heroku
- Create a local requirements.txt("pip3 freeze -- local > requirements.txt" in CLI) and Procfile("echo web: python app.py > Procfile" in CLI) ready to use with Heroku
The following steps were followed to deploy the project to GitHub Pages:
- After logging in to GitHub, locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you reach the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
In order to write wode, I use Gitpod IDE.
- After logging in to Gitpod, I choose the 'kafamem/msthree-ekafagym' workspace.
- Then, I select open from adjacent three dots. Then the workspace name opens the project design interface. This has terminals, coding area as well as the preview mode.
- The project was mainly inspired by the Code Institute mini project.
- All the text content was written by the developer.
- My mentor for his technical guidance.
- Tutor support at Code Institute their technical support.