Most wearable tech devices have features to record various sporting activities - running, cycling, yoga etc. However, there is no feature to record watersports sessions, apart from swimming. This app is designed to be used by windsurfers to log their training sessions which will allow them to track their progress on the water.
-
Home page: As a visiting user, I want be able to see a navigation bar with links to the various pages of the site. And I want to be directed to the sign in page quickly and easily.
-
About page: As a visiting user, I want to learn more about the app and its purpose. And then be redirected to the sign up page quickly and easily.
-
Sign Up page: As a visiting user, I want to be able to fill in a sign up form quickly and easily, and receive confirmation that I have been successfully signed up.
-
Sign In page: As a visiting user, I want to be able to sign into the app quickly and easily, and receive confirmation that I have been successfully signed in.
-
My Sessions page: As a visiting user, I want to see a list of all the sessions I have logged so far and be able to log a new session quickly and easily.
-
Create Session page: As a visiting user, I want to be able to fill in a form with all the details about my training session. I want to receive confirmation that my session has been logged successfully.
-
Session Detail page: As a visiting user, I want to be able to see the details I have logged about a particular training session.
-
Edit Session page: As a visiting user, I want to be able to fill in a form that will update any or all elements of a particular training session. And receive confirmation that my session has been updated successfully.
-
Delete Session page: As a visiting user, I want to able to confirm that I want to delete the selected training session. And I want to receive confirmation that the session has been deleted successfully.
-
Log Out page: As a visiting user, I want to be able to log out of my profile and return to the home page. And receive confirmation that I have been signed out successfully.
-
Django Admin access: As admin of the app, I want to be able to access the admin page and edit/delete a particular session and/or edit/delete a user and all of their logged sessions.
- Nav bar - for non-authenticated users and for authenticated users.
The app displays a nav-bar across all pages of the site. Prior to signing in, the user can see links to the home page, the about page, the sign in page and the sign up page.
After signing in, the user will see a link to the My Sessions page which displays a list of their logged sessions, and a link to sign out.
- Log a session button - the user can see a button inviting them to log a session. The user will be redirected to sign in, if they haven't already done so. Otherwise they will be directed to their My Sessions page.
- Footer - The app displays the same footer across all pages of the site. The user can see links to social media sites and the developer's GitHub and LinkedIn profiles.
- Description of the app and link to sign up - the user can learn about how the app functions and then navigate to the sign up form.
- Sign up form - The user can fill in their personal details to create a profile on the app.
- Sign in form - The user can fill in their username and password and be signed into their profile.
- Sessions list - The user can view their logged sessions list and click a button to log another session. A maximum of 5 logged sessions will be displayed per page.
- Create session form - The user can fill in a form with all the details of their training session including what they did, how the wind was and how they would rate their time on the water.
- Session detail - The user can click the session they want to view and the see the details they've logged.
- Edit Session form - The user can easily update any section of the session's details.
- Delete session confirmation button - The user can either confirm they want to delete a session or cancel the deletion process.
- Sign out button - The user can confirm that they want to be signed out of the profile.
- Success Messages - The user will see success messages on Siging up/in/out and on creating, updating and deleting a session log.
-
Total Hours Tally - I would like to have a tally of all the training hours logged by the user displayed on their personal My Sessions page. This would further add to the purpose of the app and benefit the user in their windsurfing training journey.
-
Star rating - I would like the user to be able to see their session rating as stars rather than numbers. This would add to the UX/UI and create a positive user experience.
-
A map of locations - I would like to add a page to the site with a Google map of locations where there are decent windsurfing conditions.
-
A location suggestion form - I would also like to add an input feature where an app user can send a location suggestion to the app owner to review and then add to the map of locations. This would make the app a community-led feature and further encourage windsurfing training sessions.
-
Change password feature - I would like to implement an option for the user to update or change their password if they have forgotten it. Currently there is a link that takes the user to a page informing them to contact the app's fictional support team to change their password. A feature allowing the user to do this themselves would be more user friendly and in line with standard authentication features.
Google Fonts:
For logo and headlines
For all other text
Colour palette generated by Coolers, using colours from the hero image on the Home page.
Django built-in model for authentication purposes Fields:
- user_id (primary key)
- username
- email (optional)
- password
Custom model for the purpose of this project Fields:
- Title
- Created On (date field)
- Date of Training
- Slug
- Author(foreign key linking to the User model)
- Updated On (date field)
- Details (User can add details about their training session e.g what they were learning/working on, comments from the coach, goals for the next session)
- Time Logged on the Water (maximum of 6 hours)
- Session Rating (out of 5, to rate how the user felt on the water during the session)
- Wind Conditions (user selects how they would describe the wind during their session)
Meta:
- Logged sessions ordered by most recent date
- Unique_together for author and date
- Python
- HTML
- CSS
- JavaScript
- Django and Django libraries: allauth, active link, autoslug, crispy forms, summernote
- Bootstrap - for responsive styling
- ElephantSQL - a PostgreSQL database as a service
- Cloudinary - for image storage
- Heroku - to deploy the site
- Git - version control
- GitHub - to host the project repo. Also used GitHub's Agile Project Board feature to plan the development of the project.
Follow this link to the testing results page.
-
On the Windsurfer GitHub Repository page, click "Fork" in the top right of the page. A forked version of the project will appear.
-
Next Clone the forked repository by clicking the green "<> Code" button. Copy the URL and load it into your preferred IDE to set up the local environment and connect it with the GitHub repo.
- When the forked repo of the project is ready to be deployed, create a Pipfile.
- In the terminal enter the command "pip3 freeze > requirements.txt". A file with all the requirements for the app will be created.
- Navigate to the Heroku website
- Login to Heroku and click on "Create App"
- Click "New" and "Create a new app"
- Choose a name and select your location
- Navigate to the Resources tab
- From the Resources list select "Heroku Postgres"
- Navigate to the "Deploy" tab
- Click on "Connect to Github" and search for your repository
- Navigate to the Settings tab
- Reveal Config Vars and add your Cloudinary and Database URL (from Heroku-Postgres) and Secret key
- Navigate to the Deploy tab
- Choose the main branch for deploying and enable automatic deployment
- Select manual deploy to build the App for the first time and check your build log for any issues
-
The app was planned a developed following the Agile approach.
-
The GitHub Kanban project board feature was used to set up the various stages of the project development.
-
The project was split into several Epics, which were then split into User Stories with tasks.
-
The user stories were labelled following MoSCoW prioritization aiming to achieve a viable MVP.
-
As the project is public on GitHub, it is open to other users to view and try to contribute to. I had an interesting incident when another GitHub user asked to be assigned to a User Story #9. I want to clarify that there were no contributors to the project apart from myself.
- Add date to slug
- Pagination
- Generic display
- Datefield - only past dates
- Future date validator
- Limit dates with django widget
- Delete success message
- Text-stroke styling
- Disable submit button onclick
- Prevent duplicate session dates
- Many thanks to the CI tutors and my mentor, Rohit Sharma, for their advice and suggestions.
- CI Hello Django and I think therefore I blog - video tutorials
- Kim Bergstroem - PP4 - for inspiration on blog-like features
- Christian Goran - Dome Restaurant - for inspiration for My Sessions table display feature.
- Unsplash - for open-source images by Darice de Cuba and Nick Fewings
- LucidCharts for the ERD
- Figma for the wireframes
- Coolers for the color palette
- Favicon to generate the app's favicon
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent