Welcome to the Health Challenge Tracker project! This single-page application (SPA) is designed to help users track their workout routines efficiently. The application is built using Angular 18, and includes features like search, filter, pagination, and chart visualizations.
- Add User Workouts: Input fields for user name, workout type, and workout minutes.
- Workout List: Display user workouts in a table grid.
- Search and Filter: Search by user name and filter by workout type.
- Pagination: Paginate the user workout list when it exceeds five users.
- Charts: Display workout progress using charts.
- Angular 18.0.1
- Local Storage for data persistence
- Node.js
- Angular CLI
-
Clone the repository:
git clone https://github.com/Wassaf001/fyle.git cd fyle -
Install dependencies:
npm install -
Development Server: Run
ng servefor a development server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files. -
Build: Run
ng buildto build the project. -
Running Unit Tests: Run
ng testto execute the unit tests via Karma.
Users can add their workout details using the input fields provided. The data is stored in localStorage and displayed in a table grid.
The workout list is displayed in a table format with options to search by user name and filter by workout type. Pagination is implemented for lists exceeding five users.
Visualize the workout progress of users through charts. This feature is implemented using PrimeNG Chart
The project includes unit tests for one component and one service, ensuring 100% code coverage.
To run the unit tests, use the following command:
ng test
The screenshot of the coverage report is available here.
The application is hosted on Vercel. The hosted link can be found here: Fyle