Health Challenge Tracker 🌟

Health Challenge Tracker is a single-page application (SPA) developed in Angular 14 🌐, designed to track user workouts and display them in a user-friendly interface.

Introduction

Workout Tracker is an Angular application that allows users to log their workouts 💪. Users can input their names, select workout types, and specify workout durations ⏳. The application also provides features for searching 🔍 and filtering workouts, as well as pagination for easy navigation through the list of users 📜.

Features

• Workout Form: Allows users to input their name, workout type, and workout minutes 📝.
• Workout List: Displays a grid of user workouts with options for search, filtering by workout type, and pagination 📊.
• Optional Chart Feature: Visualizes workout progress using charts 📈.
• Responsive Design: Ensures optimal viewing across a range of devices 📱💻.
• Data Storage: Stores workout data in local storage 💾.

Technologies Used

• Angular 14: Front-end framework for building robust SPAs 🚀.
• Tailwind CSS: Provides utility-first CSS classes for rapid UI development 🎨.
• ngx-pagination: Library for implementing pagination in Angular applications 📚.
• ng2-charts: Integration for displaying charts using Chart.js within Angular 📊.

Getting Started

Follow these instructions to get a local copy of the project up and running on your machine 🛠️.

service test

Prerequisites

• Visual Studio Code - Code Editing ✍️
• Git Bash - Git command line 🖥️
• Node.js and npm installed on your development machine 🌐.

Installation

1. Clone the repository:

   git clone https://github.com/MihirMehar/Health-Track.git
   cd Health-Track

2. Install dependencies:

   npm install

Development Server

• Run the application locally:

  ng serve

• Build the project for production:

  ng build --prod

Testing

• Run unit tests:

  ng test

• Run end-to-end tests:

  ng e2e

Usage

1. Navigate to the Add Workout page ➕.
2. Fill out the form with the user name, workout type, and workout duration ⏰.
3. Submit the form to add the workout ✅.
4. Navigate to the Workout List page to view the list of users and their workouts 📋.
5. Use the search bar to find users by name 🔍.
6. Use the filter option to filter users by workout type 🏋️.
7. Use pagination to navigate through the list if there are more than 5 users 📖.

Additional Information

• Author: Mihir Mehar ✨
• License: This project is licensed under the MIT License. See the LICENSE file for details 📜.
• Contact: [email protected] 📧

You can also view the deployed application on Netlify: Health Tracker 🌍.

This project was generated with Angular CLI version 14.