App design
Fitness Goals
Development process
This app is called Fitness Goals, and its primary purpose is to assist individuals, whether they are new to the gym or have been lifting for some time, in staying organized throughout their lifting journey. The app comprises four main pages:
Homepage
Lifting Routine
Track Your Workout
Post Personal Records
In this description, I will not only explain the functionalities of these pages but also discuss the code that brings this app to life. Also the picture that is apart of this description is the login screen where one has to type in a email and a password in order to login.
I will also be adding a QR code it may prompt you to install the app but if you are unable to view it ill have a link below just click the blue button.
Homepage:
The homepage of the Fitness Goals app serves as the central hub for users, providing quick access to the app’s main features: Lifting Routine, Track Your Workout, and Post Personal Records. Designed for individuals at any stage of their fitness journey, this screen offers an intuitive and visually appealing interface to help users navigate through the app’s functionalities.
The provided code defines the HomeScreen component for this homepage. It imports essential React and React Native components, including Text, View, StyleSheet, ScrollView, Image, TouchableOpacity, ImageBackground, and Constants from Expo for status bar height. It also imports useNavigation from @react-navigation/native to handle navigation between screens.
Within the HomeScreen component, the useNavigation hook is used to access the navigation object. Three functions (handleLiftingRoutinePress, handleTrackYourWorkout, handlePostpersonalrecords) are defined to navigate to the respective screens when the corresponding buttons are pressed. The component renders a full-screen background image using ImageBackground and uses a ScrollView to make the content scrollable. Several TouchableOpacity components create clickable areas that navigate to different screens, each containing a View with an Image and Text, styled to be visually appealing.
The styles object defines various styles used in the component, including layout, text appearance, and shadow effects. These styles are applied to the container, title text, word text, background of words, and thumbnail images. The primary purpose of this code is to create an engaging and intuitive home screen for the Fitness Goals app, acting as a hub where users can navigate to different sections related to their fitness journey, such as setting up their lifting routine, tracking workouts, and posting personal records. The visual elements and navigation logic are designed to provide a seamless user experience.
Lifting Routine:
The primary purpose of the provided code is to create an interactive workout tracker within the Fitness Goals app, enabling users to log and manage their workout routines to stay organized and track their progress. The WorkoutTracker component is designed to be user-friendly, featuring clear input fields, buttons, and a layout that enhances usability and readability. The code imports React and several hooks (useState), Firebase for database interactions, and various components from react-native such as StyleSheet, Text, TextInput, TouchableOpacity, and View. The firebaseConfig object contains the configuration details for connecting to Firebase (placeholders in this example). The component uses state hooks to manage the inputs for routine name, sets, reps, and the list of routines. The handleSubmit function manages the submission of a new workout routine, saves it to Firebase, and updates the local state to include the new routine, while the handleChange function updates the state based on input changes. The component’s UI includes a heading, an input field for the current weight, a section for displaying existing routines and adding new ones, with each routine displayed with its name, sets, and reps. The styles object defines the styles used in the component, covering layout, text appearance, input fields, buttons, and containers. The integration with Firebase ensures persistent storage and retrieval of data, providing a seamless user experience.
Track your workout:
The primary purpose of the provided code is to create a fitness calendar within the Fitness Goals app, enabling users to log exercises on specific dates to keep track of their fitness activities. The FitnessCalendar component offers an interactive calendar interface, allowing users to select dates and add exercises, which are then stored in Firebase for persistent tracking.
The code imports React and several hooks (useState), Firebase for database interactions, and various components from react-native such as Text, View, StyleSheet, TouchableOpacity, Modal, and TextInput. It also imports Constants from Expo for status bar height and the Calendar and LocaleConfig components from react-native-calendars to handle calendar functionality and localization.
The LocaleConfig object is configured to display months and days in English, ensuring the calendar is user-friendly. The firebaseConfig object contains the configuration details for connecting to Firebase (placeholders in this example). The component uses state hooks to manage the selected date, modal visibility, and exercise name.
The onDayPress function sets the selected date and opens a modal when a day on the calendar is pressed. The handleAddExercise function saves the new exercise to Firebase and updates the local state, logging the exercise and closing the modal.
The component’s UI includes a Calendar component to display the calendar and handle date selection. A Modal component allows users to input the exercise name and add it to the selected date. The modal contains input fields and buttons for adding or canceling the exercise.
The styles object defines the styles used in the component, covering layout, modal appearance, input fields, and buttons. The integration with Firebase ensures persistent storage and retrieval of exercise data, providing a seamless user experience.
Post Personal Records:
The primary purpose of the provided code is to create a personal information form within the Fitness Goals app, allowing users to submit their details, including an image, which is then stored in Firebase. The PersonalForm component offers a straightforward interface for users to input their name, age, gender, and location, and to upload an image from their device.
The code imports React and several hooks (useState), Firebase for database and storage interactions, and various components from react-native such as View, Text, TextInput, Button, Image, and StyleSheet. It also imports ImagePicker from expo-image-picker to handle image selection from the user’s device.
The component uses state hooks to manage inputs for name, age, gender, location, and the selected image. The handleImagePick function opens the image library, allows the user to select and edit an image, and sets the selected image URI in the state. The handleFormSubmit function uploads the selected image to Firebase Storage, retrieves the image URL, and saves the personal information along with the image URL to the Firebase database.
The component’s UI includes labeled input fields for name, age, gender, and location, a button to pick an image, an image preview if one is selected, and a button to submit the form. The styles object defines the styles used in the component, covering labels, input fields, and image preview.
This integration with Firebase ensures that personal information and images are stored securely, providing a seamless user experience for submitting and managing personal data within the app.
