Members
(constant) API_BASE
Component Name: SignUp
Date: May 15, 2025
Programmer: Toumas Solyman
Description:
This component allows new users to create an account by submitting personal information
to the backend registration endpoint. It includes client-side validation, controlled input
handling, and asynchronous API communication with fetch().
Important Data Structures:
- form (object): Stores user inputs for firstName, lastName, email, password, and role.
- isLoading (boolean): Indicates whether the registration request is in progress.
- message (string|null): Displays success messages after successful registration.
- error (string|null): Displays error messages for failed submissions or validation errors.
Algorithms:
- Basic form validation: Ensures required fields are filled and email format is valid using regex.
- Controlled component pattern: Keeps the form fields in sync with React state for predictable UI behavior.
- Async/Await network call: Handles asynchronous POST request with error handling and user feedback.
- Source:
(constant) ContactUs
- Source:
Methods
About() → {String}
- Source:
Returns:
- Type
- String
App()
Component Name: App
Date: May 15, 2025
Programmer: Toumas Solyman
Description:
This is the main component of the Fitness Tracker front-end application.
It uses React Router to manage navigation between different pages, including Home,
Login, SignUp, About, and Contact. It also renders the Navbar component across all routes.
Important Data Structures:
No internal state is used in this component. React Router's and
elements are used to structure the application's page navigation.
Algorithms:
No custom algorithms are used. The routing logic is declarative and handled
entirely by React Router's built-in system. Each route maps a URL path to a component.
Contact() → {String}
- Source:
Returns:
Contact function
- Type
- String
ContactUs() → {JSX.Element}
ContactUs form component.
Connects to the EmailJS service to send emails from the app.
To be used by the contact form and possibly other parts of the app later on.
- Source:
Returns:
The contact form used to send an email.
- Type
- JSX.Element
Home()
Component Name: Home
Date: May 15, 2025
Programmer: Toumas Solyman
Description:
This component serves as the landing page of the Fitness Tracker application.
It introduces users to the app’s purpose—tracking meals, exercises, and progress.
The page includes a "Start Today" link that navigates users to the SignUp page.
Important Data Structures:
This component does not use internal state or props. It consists entirely
of static content styled through CSS.
Algorithms:
No algorithms are used in this component. Navigation is handled declaratively
through React Router's component for client-side routing.
- Source: