Hey there!
This is the repository for the Gear Up Workouts front end.
Try out the app live at: gup.cameronsherry.com with user camtest1!
It is a multiplatform, mobile-first, reactive, single page web app built with Ionic, TailwindCSS, and Angular.
It is optimized for iOS and mobile web browers, but will work in any browser of any size! That's the power of a thoughtfully designed, responsive UI :)
When first loading up the app or logging in, the user is prompted to enter some information that is sent to the Backend and used to generate unique, custom workouts.
This is the first of many applications of custom event-driven modals used within the app.
For the daily recommended workouts, users can tap each one and individually provide feedback. This data is used by the recommendation engine to either reduce weight or reps, or prevent the workout from being recommended to the user at all.
In the spirit of reactivity, a toast is presented once that users' input is saved!
Based on the users' current location, a list of alternative workouts is generated and displayed at a preset time during the day (nothing ever gets recommended at night for user safety).
The user can then tap through the list, with each item a Google Maps place alongside its address and maps rating. The user can tap on the address to open Google Maps navigation to the workout location.
Users' can also view some basic stats about their app usage and workouts, with some fun easter eggs!
The user is able to see a complete log of all there past workouts for each day.
Upon switching users, you can see the affect the user input has on the workouts returned from the recommendation engine.
The intermediate user camtest1 wants to focus primarily on strength and can access a gym, and thus has few cardio and bodyweight exercises. The beginner user camtest2's goals are weight loss and they don't have access to a gym, thus they are recommended primarily body weight or cardio exercises.
- Responsive, interactive UI styling using TailwindCSS
- Persistent local user data using Ionic Storage
- Extensive use of components to provide high cohesion and low coupling between functions/components
- A custom API service to interface with the Python Flask backend using the Angular HTTP Client library and RxJS
- Use of Angular Event Emitters to activate global modals from child components
- Tabular app design using Angular Router
- Uses Angular Proxy to bypass CORS errors with local development
- Dynamic object creation using data packaging with custom data containers from json returned by our custom API
- OAuth2 user authentication
- Weight Tracking
- Specific Muscle Groups
- Additional visual cues for inferring element functionality
Disclaimer: While this may seem like a polished app, it was actually completed in less than a week with completely new technologies!
Feel free to connect with me on LinkedIn or reach out to me by email! :)