dmytro1991ua / react-workout-app

The Workout React App is a feature-rich fitness and exercise tracking application that empowers users to create, manage, and analyze their running and cycling workouts. Built with React on the frontend and a custom Express.js/MongoDB backend, this project provides a comprehensive fitness solution.

Hi 👋, I'm Dmytro

A passionate Front-End Developer who's on an exciting and thorny journey in the IT industry.

Connect with me:

Languages and Tools:

Stats:

 

Streak Stats:

react-workout-app's Issues

Fix the issue when a second workout is adding the marker and popup for the first workout are being replaced by the marker and popup of the second workout

Add the ability to change a Base Map Tile Layer (switch between different layers)

Have a look and think about creating my own backend for workouts etc (MongoDb, express, mongoose)

• Create a custom backend via Express JS
• Setup Mongo Db, mongoose and connect custom backend with it
• Implement logic related to workouts for getting, creating, updating, deleting, deleting all, and adding to favorites them
• Use Firebase for authentication purposes and store workouts on MongoDb as well as authenticated Firebase user
• Connect Firebase user to Mongo DB, implement authentication and hook up a specific user with corresponding data that is stored in Mongo Db, etc.

Have a look at the possibility to Allow users to increase quiz questions => in the Result component add a dropdown with options to increase the number of questions (20, 50, etc.)

Check all comments and commented out codebase

Refactor styles (put them near component)

Refactor project structure, folders, files etc

Refactor some components (create reusable components)

• Button
• Input

Have a look at possibility to add a brand new page with some sort of workout quiz

• Create barebone Workouts Quiz component, update routes, adjust styles in navigation
• Add endpoint to retrieve workouts quiz questions from MongoDB
• Connect backend endpoint for retrieving workouts quiz questions from MongoDB with React App
• Create quiz introduction view component
• Add quiz page layout, applied styles, updated redux slice
• Implement logic related to displaying questions on next button click, reset quit on reset button click, updated styled based on the correct or wrong answer, updated slice
• Add quiz progress bar, refactor Questions component
• Add quiz timer, adjust styles, small refactoring
• Implement 50/50 functionality, adjust quiz logic and styles

Add loading spinner when form is submitting(auth flow)

Add a fallback message when there is not any quiz data (quiz questions)

Find a solution when marker and popup will be shown on the first render with correspond workout if they are exists (if there is a workout)

Add notifications support

Have a look at Auth flow. Most likely need to refactor or change a little bit

• check login/logout flow
• check sign-up form
• most likely add google auth
• check forgot password flow

Have a look at the possibility to add a table (react-table package) with workouts details (such as type, time, weather details, etc) as a new page

• Create a new page
• Setup react-table
• Add sorting, filtering, and pagination support

Have an ability to display a user profile image stored in Firebase in header when user is logged in

• Adjust the existing logic of displaying navigation items based on the authenticated user
• Highlight the active navigation link
• Display a user photo when he/she is authenticated

Fix burger menu on mobile devices

Look at the adding ability to edit a particular workout by clicking to an edit icon

Look at the ability to show all workouts on the map (let's say we have a workouts in different location so the zoom of the map should change in order to display all markers)

Show logout button when user logged in

Look at features that allow to delete all workouts, reset selected sorting option and sort all workouts

• Add Actions panel with sorting options (selects), delete and edit icons
• Implement sorting by workout type
• Extend existing sorting and add sorting by workout indicator such as duration, distance etc.
• Allow to reset selected sorting oprion on nutton click
• Allow user to delete all workouts (with confirmation pop-up)

Look at ability to use weather API in the project and display a current weather for a specific workout

Integrate app with open weather API
Create weather service
Create a Weather widget for desktop and mobile views
Display current workout weather details (inside modal window) on weather icon click

Add tooltip for navigation icons

Have a look at workout form, validations and styles

• apply React-hook-form to workout form
• add input field validation
• create a separate file for input and select fields
• make adjustments in adding workout (WorkoutContext and form files) etc

Look forward possible using of Formik library or React Hook forms to handle forms

Decided to go for React Hook Forms
Make update with auth flow
Customize reset password flow
Add history service, to use it outside a functional component

Find a solution when a user click to workout details and the map moves to corresponded marker and popup on that map

Create Auth service

Setup GitHub Actions

Have a look at possibility to add a brand new page with Calory(BMI) calculator

• Create a barebone Calories Calculator components, updates routes, adjust styles in navigation
• Add BMI Calculator main layout with styles, inputs, selects and actions buttons logic
• Implement logic to calculate BMI with different metric

Add Firebase Google Auth

Have a look at the Workout file. Probably need to some adjustments with logic and styles

• Divided Workout into different components
• Change delete icon and add edit one
• Change styles for Workout and Workouts page in general
• Adjust pace and speed calculations
• Customized a scrollbar
• Create a reusable Modal component
• Implement optimistic workout deletion with confirmation popup

Refactor components with custom hooks

• Refactor Auth module with custom hooks
• Refactor Auth forms with configs and reusable BaseForm component
• Refactor BMICaclulator form with hooks
• Refactor BMICalulator inputs and action buttons with configs and utils
• Refactor Header module with custom hooks and utils
• Refactor Home module with utils
• Refactor Profile module with custom hook
• Refactor inputs, selects and action buttons config to make it more global and reusable and avoid code duplication
• Refactor profile forms with configs and utils
• Refactor Workouts module with configs and utils
• Refactor WorkoutsDetails module with configs and utils
• Refactor WorkoutsQuiz module with custom hooks, configs and utils
• Refactor App component with custom hook
• Refactor Header and Navigation components

Rename styles files

Add useLocalStorage hook

Store user token in local storage

Increase timer based on selected question quantity

Replace navigation links text with icons

Move App from Heroku to Railway (adjust scripts and server file)

Look at the ability to render a marker with current user coordinates on first render

Add a marker with popup with current user location on first map render

Look at the ability to add a specific workout to a favorite (heart icon, without color when no favorite and with color when selected as favorite) and sorting by favorite workout

Add a fallback message to a workout page when there is not any workout

Fix Slider styles

Fix Slider styles
Adjust slides
Move Toast and Slider slider to a global styles

Check why state doesn't update after sign out (after signout need to refresh the page otherwise still have access to Workouts page)

Add 404 page

Have a look at creating some sort of profile page with ability to make some changes in user profile

• Create a Profile component
• Implement firebase user image upload, store image URL in Mongo DB alongside with updated user name
• Implement firebase user updating password in profile page
• Adjust profile page layout, schema, and auth service

Have a look at implementing some sort of global warning popup when user leave the page/browser without saving data (from form for insatnse)

Setup ESlint, stylelint, prettier

Setup ESlint, stylelint, prettier for a project

asd

Look at the possibility to replace Context API with Redux Toolkit

• Introduce state management and replace Context API with Redux Toolkit
• Create slices for User, Workouts, WeatherDetails
• Create services for Workouts and WeatherDetails to get needed data
  Separate slice and actions, etc.

Migrate to Typescript, setup tsconfig file

Made a migration from JS to Typescript, setup a tsconfig file.

Fix some basic issue with types in order to not crash an app