RepsCounter

Web app to count reps & sets of exercises with the ability to store data locally and work offline.

Live demo | API Code

Running locally

Setup

• Setup Backend Application from Here

Steps

• git clone https://github.com/chavda-bhavik/repscounter
• yarn (after navigating inside the directory)
• yarn dev

---

About RepsCounter

Pages

• Manage Exercises View
• Dashboard View
• Manage Daily Count View

Facilities

• Manage Exercises
• Manage User Exercise counts
• View Weekly Dashboard
• PWA & Store data locally

Features

• built on Typescript
• Interactive Animations using gsap
• Responsive for various screen sizes
• Tests written using cypress
• Easy to understand code and project structure
• Using Redux Toolkit for global state management
• Easy & Lightweight frontend tooling with Vite
• Typesafe type generation with graphql-codegen
• Linting and formatting with eslint and prettier

Problems Face and Solved

• Facility to provide Offline Add, Update and Delete Facility was Challenging
• Making UX smooth with Animation was Challenging and took some iterations
• Keeping Application bundle size smaller with Code Splitting was interesting
• Writing End-to-End tests with Cypress was new
• Typescript support with graphql-codegen provided good learning

Technologies 🤖

• ViteJS To Build & Develop
• React Library to Build awesome User Interface
• TailwindCSS To Style the Application
• Cypress To wite End to End Test Cases

• Husky Git Hooks to execute Tests before commit
• Wouter A minimalist-friendly routing for React
• React ChartJS To draw Charts on Dashboard
• GSAP For Animating UI
• ReduxJS, Redux Toolkit To provide Offline storage and Central Storage Functionality
• Graphql-Request, Graphql Code Generator To Create Typesafe Schema to connect API
• React Calendar, To show Calendar

---