Skip to content

trishan9/Workouts-Tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 

Repository files navigation

Workouts Tracker

Workouts Tracker is web based platform where you can add, update delete and track your workouts.

Credentials for checking out email: mailtotrishan@gmail.com password: password

Tech Stack

  • Frontend: React with TypeScript
  • Backend: Express JS
  • Database: MongoDB

Frontend Architecture

Folder Structure

  • public - it is the root directory where we add static files like images, favicons, which can be referenced by our code starting from the base URL (/).
  • src/assets - it contains all of our assets like images, svgs and all which we will use in our pages or components.
  • src/atoms - it contains all the recoil atoms that we will use in our app.
  • src/components - it contains of UI and reusable components which we use in our pages.
  • src/hooks - all the custom hooks are added here.
  • src/lib typescript utility functions by using external libraries.
  • src/pages - includes pages, with routing.
  • src/styles - all the stylesheets of our app contains here.

Package Manager

  • Yarn is used as package manager.

Frontend Framework

  • React JS has been used as frontend framework.

Language

Routing

  • For routing, react-router-dom has been used.

Client State Management

  • I am using Recoil for client-side state management.

HTTP Client

  • For HTTP Client, I am using axios

Server State Management

Form Handling

  • I am using React Hook Form for handling forms.
  • For Form Validation, I am using Zod library.

Styling

UI Component Libraries

Dates

  • date-fns has been used for handling dates.

Icons

Backend Architecture

Packages Used:

  • multer
  • cloudinary
  • bcrypt
  • helmet
  • jsonwebtoken
  • mongoose
  • passport
  • passport-google-oauth20
  • validator

Folder Structure

  • public - it is the directory where we add static files.
  • src/config - all the environment variables are conifgured here.
  • src/db - all the functions and configurations including models, schemas definitions of database contains here.
  • src/lib - javascript utility functions by using external libraries.
  • src/middlewares - all the express middlewares contains here.
  • src/modules - all the modules (routes and controllers) contains here.
  • src/utils - pure javascript utility functions.

Data Flow of the App

workout

Screenshots

Screenshot from 2023-12-08 20-55-40 Screenshot from 2023-12-08 20-55-33 Screenshot from 2023-12-08 20-56-03 Screenshot from 2023-12-08 20-56-14 Screenshot from 2023-12-08 20-56-23 Screenshot from 2023-12-08 20-56-59 Screenshot from 2023-12-08 20-56-44

About

Web App where you can track your workouts, built using MERN Stack

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published