About Trackdrills

Trackdrills is an application that gives you access to over 500 workouts and exercises to choose from to suit your fitness goals. It is a health-focused app that also gives you the ability to create your own customized workout plans and track your progress.

Meet the Team

Ezekiel Ekunola	Amira Adediran	Modurotolu Olokode	Folasade Agbaje	Melquisedeque Pereira
Sandrava Philips	Oluwafemi Anjorin

Project Overview

Trello Board
Product Canvas
UX Design files
Landing Page
API

Basic Features

• User should be able to sign up and login
• User should be pick from a list of exercises and view exercise details
• User should be pick from a list of workouts and view workout details
• User should be able to access workout history page
• User should be able to schedule a workout, as a routine or one-time
• User should be able to access the dashboard
• User should be able to get dashboard notifications or email notifications
• User should be able to update profile details
• User should be able to create custom workouts
• User should be able to share completed workout with friends on social media

Table of Contents

• Scripts
  • Running
• Environment Variables
• Tech-Stack
  • Front-End Dependencies (Production)
    • React
    • GraphQL
    • React Apollo
    • Dotenv
    • Styled- Components
    • Chakra-UI
    • Prop-Types
    • JWT-Decode
    • Coveralls
    • Formik
    • Yup
    • Recharts
• Front-End Dependencies (Development)
  • Eslint
  • Prettier
  • Lint Staged
  • Husky

Scripts

Running

npm start: Runs only the front-end client.

npm test: Will run the tests for front-end

npm run build: Will create a build file for front-end

Environment Variables

For the app to function correctly, the user must set up their own environment variables. There should be a .env file containing the following:

REACT_APP_GraphQL_API=GRAPHQL_API_URL

REACT_APP_GraphQL_API_SUBSCRIPTIONS=REACT_APP_GraphQL_API_SUBSCRIPTIONS

REACT_APP_GOOGLE_CLIENT_ID=GOOGLE_CLIENT_ID

REACT_APP_GOOGLE_ANALYTICS_KEY=ANALYTICS_KEY

Tech-Stack

Front End Dependencies (Production)

React

React is the current industry standard that offers a lot of out of the box benefits. It is fast, efficient, and scalable. Due to the large community, finding solutions to potential problems and reference material is much easier, even for a potential dev without a lot of experience who would like to contribute to Main Course. | View Dependency

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. | View Dependency

React Apollo

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to do server-side rendering. | View Dependency

dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. | View Dependency

Styled-Components

Has a thriving community and offers the ability to directly style multiple components within a file. The syntax used is familiar to JavaScript and improves code cleanliness and makes it easy to get up and going for those without a lot of css experience. Styled components are also very efficient, improving load time for users. | View Dependency

Chakra-UI

Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications. | View Dependency

Prop-Types

Allows declaration of types for React Props. | View Dependency

JWT-Decode

Jwt-decode is a small browser library that helps decoding JWTs token which are Base64Url encoded. This library doesn't validate the token, any well formed JWT can be decoded. | View Dependency

Coveralls

Shows which parts of code aren't covered by the test suite | View Dependency

Formik

Helps to keep track of values/errors/visited fields, orchestrating validation, and handling submission on a from | View Dependency

Yup

Yup is a JavaScript schema builder for value parsing and validation. | View Dependency

Recharts

A composable charting library built on React components, | View Dependency

Front-End Dependencies (Development)

Eslint

Eslint is the dominant linting tool for NodeJS and it makes it possible to establish a clear coding convention for a team or project, as well as aiding in catching various bugs such as variables improperly scoped. | View Dependency

Prettier

Prettier is an opinionated code formatter that enforces a consistent code style across the entire codebase. | View Dependency

Lint Staged

The concept of lint-staged is to run configured linter (or other) tasks on files that are staged in git. lint-staged will always pass a list of all staged files to the task, and ignoring any files should be configured in the task itself. | View Dependency

Husky

Husky is a very popular pre-commit git hook that ensures code linting and unit tests are passing before one is able to commit code. | View Dependency