Web app for tracking daily calorie consumption and managing user’s fitness journey.
Important! As this is a non-commercial project, our server is hosted on a free hosting service, which may cause longer loading times after periods of inactivity.
If this occurs, please remain connected and avoid closing or reloading the page. Once our backend wakes up, any delays in using our app will be resolved.
We are actively working to resolve this issue.
The app uses React Router for navigation. The available routes are:
/welcome- Welcome Page
The initial page users encounter upon accessing Power Pulse
You may choose to register a new account or sign in to an existing one.
You'll find current statistics displayed on the right side of the page.
/signup- SignUp Page
To register, provide your name (to be displayed on your profile page), email address, and a password.
Please ensure that your password contains a minimum of 6 characters.
We've implemented Google authorization for your convenience.
If you already have an account, you can navigate to the SignIn page to log in.
/signin- SignIn Page
To log in to your account, simply enter your email and password.
Alternatively, you can use the Google authorization button.
If you haven't registered yet, you can switch to the SignUp page for registration.
/data- Data Page
After successful registration, you'll be redirected to the Data page, where you'll need to complete all fields across three steps.
Please note, using this web app requires filling in all required information. This data is utilized for calculating your daily calorie rate, assisting you in achieving your fitness goals, and marking products as recommended or not recommended for you.
Furthermore, a 'Help' button becomes available, allowing you to reach out if you encounter any issues while using the app. We'll respond promptly to assist in resolving any problems.
It's crucial to provide a valid email address for us to efficiently communicate solutions or address any questions you may have.
/diary- Diary Page
On the Diary page, you can review the products you've consumed or exercises you've performed by selecting a specific date (by default, it's set to the current date).
Additionally, there's a dashboard displaying calculated consumed and burned calories, along with the duration of your training sessions.
/products- Products Page
On the Products page, you have the option to select products to add to your diary as consumed items.
Utilize filters to find the exact match for your selection.
/exercises- Exercises Page
On the Exercises page, you can explore exercises for your training regimen.
You'll find three categories to choose from:
- Body parts
- Muscles
- Equipment
Based on your selected category, the list of subcategories will be updated accordingly.
/exercises/:subcategory- Exercises Page
When you click on a subcategory, an exercises list will appear instead of subcategories list.
Hovering over an exercise card will display an example demonstrating how to perform that exercise.
/profile- Exercises Page
Clicking on the gear icon within the header section will navigate you to the Profile page. Here, you can review your data and make updates if necessary.
/calendar- Exercises Page
This page is currently under construction. 🏗️
Please stay tuned for forthcoming updates.
Implemented responsiveness and mobile menu for better UI.
- Dmytro Zhdanov GitHub || LinkedIn - Team Lead, Developer (Set up repository, Redux store, RTK Query, React Routing; Worked on Authorisation logic, DayDashboard component, StatisticsInfo component, ErrorHandler component, TimerWarning component, Welcome page, FeedbackForm component; Reviewed code);
- Denys Cherednychenko GitHub || LinkedIn - Team Lead, Developer (General structure and logic of back-end, User's endpoints)
- Sergey Yasak GitHub || LinkedIn - Scrum Master Developer (Header including all components, ExercisesList component, ExercisesItem component, features implementation)
- Vitalii Dmytriiev GitHub || LinkedIn - Developer (Products page including all components)
- Tetiana Derenko GitHub || LinkedIn - Developer (Profile page including all components)
- Pavlo Volontyr GitHub || LinkedIn - Developer (SignupForm, SignInForm including validation)
- Daryna Reva GitHub || LinkedIn - Developer (Diary page components markup and stylisation, DayDashboard logic, project presentation)
- Oleg Kiosa GitHub || LinkedIn - Developer (Data page including all steps)
- Oleksanrd Borysenko GitHub || LinkedIn - Developer (ExercisesCategories component, ExercisesSubcategories component)
- Taras Vasylkiv GitHub || LinkedIn - Developer (Calendar component, birthday inputs' implementation, calendar related features implementation, modals for adding exercises to diary)
- Yevhen Kolchynskyi GitHub || LinkedIn - Developer (Error page, Basic Modal window, Global styles, Loader, Data page stylisation)
- Serhii Savchak GitHub || LinkedIn - Developer (Products', Training's and Statistic's endpoints on beck-end, diary tables logic on front-end, avatar's modal window feature)
- Alexander Sirotov GitHub || LinkedIn - Developer (Diary's endpoints on back-end)
To run the application locally, follow these steps:
- Clone the repository:
git clone https://github.com/DmytroZhdanov/power-pulse.git - Install dependencies:
npm install - Run the app:
npm run dev - Open http://localhost:5173 in your browser (Note: the port may be changed if 5173 port is occupied by another website).
- React
- Redux
- RTK Query
- React Router
- Axios (for API requests)
- Vite
The application utilizes a backend developed by our team. Feel free to familiarize yourself with it here
The Redux store manages the application's state, encompassing tokens, user information such as name, email, avatar image, and the account creation date.