Workouts Tracker

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

Credentials for checking out email: [email protected] 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

• TypeScript is used for better type safety.

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

• For managing server states, I am using TanStack Query.

Form Handling

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

Styling

• I am using Tailwind CSS for styling of the app.

UI Component Libraries

• For UI components I am using ShadCN UI

Dates

• date-fns has been used for handling dates.

Icons

• Lucide Icons have been used for 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

Screenshots