React Native Mobile Fitness App

- Final Demos (iOS)

1. Demo: Features & Functions Walk Through

(1) Login Page:

a view with username and password input fields
- Give the user a feedback message if there is an error, "Username or password is incorrect!"
- Allow the user to switch between the Login and Signup pages

(2) Signup Page:

a view with username and password fields
- Give the user a feedback message if there is an error, "Username is already taken!" or "Password is too short!"
- Allow the user to switch between the login and signup pages

(3) Profile Page:

a view that allows the logged-in user to view and edit their first and last names and goals
- The updated profile would be saved after the user edits the profile

(4) Logout Option:

In each of the 4 main pages in the app, “Report”, “Meals”, “Exercises”, and “Profile”, there is an option for the logged-in user to sign out and return to the login page at any point while using the app

(5) Report Page:

a view for the current day that allows the user to view their added exercises, meals, and progress/comparison of the goals for today.
- The user is able to see the exercises for today, including the name, duration, and the total number of calories burned for each exercise
- The user is able to see the meals for today, including the foods and the total intaken calories and macronutrients for each meal
- The Report Page is updated synchronously with the Exercises Page, Meals Page, and the Goals in Profile Page; if a change is made to any of the pages, it should be reflected in the Report Page.
- The user is able to compare their total daily exercise minutes VS their daily goal exercise minutes, to compare their intaken calories VS their daily goal calories, and to compare their intaken macronutrients VS their daily goal macronutrients

(6) Exercises Page:

a view that allows the user to add a new exercise or edit/delete any of their past/added exercises. An exercise consists of a name (e.g., "Jogging"), duration, date, and the number of calories burned; see the API for further details.
- The user is able to see, add, edit, or delete the detailed information for an exercise, including a name (e.g., "Swimming"), duration (e.g., "55 minutes"), date (e.g., “05/14/2020”), and the number of calories burned for that exercise
- The user is able to indicate if the exercise was done today or on some other dates

(7) Meals Page:

a view that allows the user to add a new meal, or edit/delete any of their past/added meals.
- The user is able to see, add, edit, or delete the detailed information for a meal, including a name (e.g., "Lunch"), a date (e.g., “12-31-2021”), and a list of foods (e.g., “Broccoli”, “Beef Steak”, and “Milk”, the number could be 0 to many), total calories and macronutrients consumed for that meal
- The user is able to indicate if the meal was eaten today or on some other dates

Some screenshots demos: (Not include all, the comprehensive functions explained above)

2. Video Demo: Accessibility Features Demo with Audio

description: I improved the design and built accessibility features to enable users with visual impairments to use the app with VoiceOver smoothly. Voice guidances are provided when users make actions.

- Paper Prototyping

Paper prototyping is a good start at the early stage of the design. Through paper prototyping, I gained basic senses of how the user interfaces should be like by designing the paper components and how the components should interact with each other by manipulating the paper components.