A modern React.js application for managing tasks and health activities, styled with Tailwind CSS. The app allows users to add, edit, and track tasks with status indicators (Pending, Active, Completed) and live alerts.
Check out the live application here: My Health App
View the source code on GitHub: GitHub Repository
- Add, edit, and delete tasks
- Track task progress (Pending, Active, Completed)
- Real-time alerts for task start
- Responsive design with Tailwind CSS
- Fully functional task manager interface
Replace the image filenames with your actual uploaded screenshots in the
imagesfolder.
- React.js (v19)
- Tailwind CSS (v3)
- Framer Motion for animations
- Lucide Icons
- Vite for project bundling
- Git & GitHub for version control
- Clone the repository
git clone https://github.com/PLP-MERN-Stack-Development/react-js-jsx-and-css-mastering-front-end-development-Mukangafu.git
2. Navigate to the project directory
cd react-js-jsx-and-css-mastering-front-end-development-Mukangafu
3. Install dependencies
npm install
4. Start the development server
npm run dev
**. The app will run on http://localhost:5173 by default.**
🚀 Deployment
This app is deployed on Vercel:
Sign up/log in to Vercel
Connect your GitHub repository
Vercel automatically builds and deploys the app
Access the live app via: My Health App
📋 Usage
Click Add New Task to create a task.
Set Start Time and End Time for your task.
Tasks will automatically update their status (Pending → Active → Completed) based on the current time.
Alerts notify you when a task starts.
Edit tasks by double-clicking on them.
🔧 Notes
Make sure your browser allows notifications for live task alerts.
The app is responsive and works on desktop, tablet, and mobile devices.
📜 License
This project is licensed under the MIT License.
**👤 Author
Daniel Muturi**