Web app that helps users organize personal workout plans based on YouTube videos. Users can import workout videos from YouTube, store them in the system with custom metadata, create workout plans out of them, share with other users, and schedule in their personal workout calendar.
- Users log in using their Google account and the app automatically creates their user account.
- The Home page welcomes the user, initially with no workouts scheduled.
- To get started, the user can click Create Workout from the navigation menu and define a new workout based on a YouTube video of their choice. Creation of the workout comes with the option to schedule the workout for a specific day of the week, repeated for a specified number of weeks.
- Users can also create workout plans, which are essentially sequences of days with workouts assigned to individual dates.
- Once a user has some workouts scheduled, they get displayed on the Home page on the specific date. It is also possible to display workouts scheduled for any other day using the Select another day control.
- After clicking the scheduled workout on the home page, a detail of the workout is displayed to the user and the user can start exercising. He can use the provided timer and stopwatch, and skip to specific exercises in the workout video by clicking the Timestamp in the list of exercises.
The application's data model consists of the following object types:
- Workout - individual workout session based on a single YouTube video, with a list of exercises timestamped to their position in the video
- Workout Plan - a succession of days with workouts mapped to them; can be added to a user's schedule starting from an arbitrary date selected by the user
- Schedule - mapping of workouts to calendar days, where multiple workouts can be mapped to a single day
- Profile - user of the application, with user details obtained from the Google account used on login
- Register your app and obtain OAuth 2.0 client keys at Google APIs.
- Subscribe you app to the YouTube v3 API and obtain an API key for the API.
- Clone the repository.
- Run
npm install
in both the client and the server directory. - Specify the following environment variables directly in the server environment or in a .env file inside the server directory:
GOOGLE_CLIENT_ID
- client ID obtained from GoogleGOOGLE_CLIENT_SECRET
- client secret key obtained from GoogleGOOGLE_REDIRECT_URI
- callback URL specified in Google APIs (e.g. https://localhost:3001/login/google-cb)CLIENT_URL
- URL of the client part of the application, including port number (e.g. https://localhost:3000)SERVER_HOST
- host name on which the server is running (e.g. localhost)SERVER_PORT
- port on which the server is running (e.g. 3001)MONGODB_URI
- connection URI for MongoDB (e.g. mongodb:https://localhost:27017/devfitvid)SERVER_JWT_SECRET
- secure secret for JWT signing
- Specify the following environment variables directly in the client environment or in a .env file inside the client directory:
REACT_APP_SERVER_URL
- URL of the server part of the application, including port number (e.g. https://localhost:3000)REACT_APP_GOOGLE_API_KEY
- API key for YouTube v3 API obtained from Google APIs
- Start up your database.
- Start up the server by running the
node src/index.js
command inside the server directory. - Start up the client by running the
npm start
command inside the client directory.
The app has been developed using the following technologies: