- Project Brief
- Project Presentation
- Business Problem
- Technology Stack
- User Stories
- MongoDB Schema Design
- Style Guide
- Design, build, deploy and present an application built for a real world customer.
- Meet with the business owner or organisation manager to find out what challenges they face.
- Find a problem that can be solved with an application.
The deployed webpage can be found here.
Presentation slides for the project can be found here.
- Group training sessions are an integral part of what is offered by Athleta 24/7.
- Current maintenance requires manual editing of training sessions and timetable.
- Gym members sign up to these classes via phone or paper forms.
- Updates to timetable can be tedious & time consuming.
- Poor tracking of class statistics, such class attendance.
- Member bookings can be misplaced due to manual handling.
Front-end:
- ReactJS
Back-end:
- MongoDB
- NodeJS
- ExpressJS
- As an admin, I want to view an index of all currently available training sessions on the weekly timetable.
- As an admin, I want to be able to quickly search through the training session index
- As an admin, I want to add, remove and/or update group training sessions from the weekly timetable.
- As an admin, I want to retrieve booking details for a specific class.
- As an admin, I want to view attendance rates for a specific class.
- As an admin, I want to view an index of users using the app.
- As a user, I want to sign up to the website.
- As a user, I want to view the training session timetable with relevant information on the sessions.
- As a user, I want to easily book a specific training session by training session title, time and date.
- As a user, I want to view my account details, and edit them if needed in the future.
- As a user, I want to view past bookings to track my training session history.
- As a user, I want to view future bookings to track what classes I'm booked in for.
- As a user, I want to remove bookings if I can no longer attend them.
As the sole developer working on this project, the decision was made to use MUI-CSS to provide styled components in order to focus on learning the React library. MUI-CSS is also rich in features (component based) that easily integrate with React, which I think would enhance the user experience. MUI-CSS design is clean, minimal and flat, which fits in to my design aesthestic direction.
The colours selected were based the client's existing website. Naturally, I decided the app should complement the client's chosen colour scheme.