Health Tracker is a modern web application that helps users monitor, log, and improve their health by tracking vital signs, daily activities, and wellness goals. It also provides secure data sharing with healthcare providers for better patient care and remote monitoring.
- React 18 - React version with improved rendering and concurrent features
- Vite - Lightning-fast build tool and development server
- Redux Toolkit - State management with simplified Redux setup
- TailwindCSS - Utility-first CSS framework with extensive customization
- React Router v6 - Declarative routing for React applications
- Data Visualization - Integrated D3.js and Recharts for powerful data visualization
- Form Management - React Hook Form for efficient form handling
- Animation - Framer Motion for smooth UI animations
- Testing - Jest and React Testing Library setup
- Node.js (v14.x or higher)
- npm or yarn
-
Install dependencies:
npm install # or yarn install -
Start the development server:
npm start # or yarn start
react_app/
├── public/ # Static assets
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── styles/ # Global styles and Tailwind configuration
│ ├── App.jsx # Main application component
│ ├── Routes.jsx # Application routes
│ └── index.jsx # Application entry point
├── .env # Environment variables
├── index.html # HTML template
├── package.json # Project dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration
This project uses Tailwind CSS for styling. The configuration includes:
- Forms plugin for form styling
- Typography plugin for text styling
- Aspect ratio plugin for responsive elements
- Container queries for component-specific responsive design
- Fluid typography for responsive text
- Animation utilities
The app is built with responsive design using Tailwind CSS breakpoints.
Build the application for production:
npm run buildMade by YASSINE
linkedin: My LinkedIn
© 2025 Health Tracker. All rights reserved.