Human Stats Progression App 🌟

A modern, interactive web application that visualizes your life progress by calculating your age and comparing it to the expected life expectancy based on your gender and location. Built with React, Vite, and Tailwind CSS.

📊 What It Does

The Human Stats Progression App provides a unique perspective on your life journey by:

• Age Calculation: Precisely calculates your current age based on your date of birth
• Life Expectancy Data: Uses World Health Organization (WHO) 2019 data to determine expected lifespan by country and gender
• Visual Progress: Displays your life progress as a grid of squares, with each square representing one year
• Interactive Visualization:
  • Green squares = years you've lived
  • Purple square = your current year (with animation)
  • Gray squares = years ahead
• Progress Percentage: Shows what percentage of your expected lifespan you've completed

✨ Features

• 🌙 Dark/Light Theme Toggle: Switch between themes with a beautiful animated toggle
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• 🎨 Modern UI: Clean, intuitive interface built with Tailwind CSS and DaisyUI
• 🌍 Global Data: Life expectancy data for countries worldwide from WHO
• ⚡ Fast Performance: Built with Vite for lightning-fast development and builds
• 🎯 Real-time Calculations: Instant updates as you input your information

🚀 Live Demo

https://humanstats-app.vercel.app/

🛠️ Tech Stack

• Frontend: React 18
• Build Tool: Vite
• Styling: Tailwind CSS + DaisyUI
• Icons: Font Awesome
• Data Source: World Health Organization (WHO) 2019 Life Expectancy Data
• Deployment: Vercel (configured)

📦 Installation

1. Clone the repository

   git clone https://github.com/yourusername/humanstats-progression-app.git
   cd humanstats-progression-app

2. Install dependencies

   cd client
   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

🎯 How to Use

1. Enter Your Information:

   • Select your date of birth
   • Choose your gender (Male/Female)
   • Select your country/location

2. View Your Progress:

   • Click "Check Progress" to see your life visualization
   • Each square represents one year of your expected lifespan
   • Green squares show years you've lived
   • Purple square highlights your current year
   • Gray squares represent your future

3. Reset and Try Again:

   • Use the "Reset" button to clear all inputs and start over

📁 Project Structure

humanstats-progression-app/
├── client/
│   ├── src/
│   │   ├── components/
│   │   │   ├── calc components/
│   │   │   │   ├── InputRow.jsx
│   │   │   │   └── YearsProgress.jsx
│   │   │   ├── Header.jsx
│   │   │   └── Landing.jsx
│   │   ├── contexts/
│   │   │   └── ThemeContext.jsx
│   │   ├── data/
│   │   │   ├── whoFemaleData.json
│   │   │   └── whoMaleData.json
│   │   ├── utils/
│   │   │   ├── calculateAge.jsx
│   │   │   ├── calculateAgeAndLifeExpectancy.jsx
│   │   │   └── getUniqueLocations.js
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── public/
│   └── package.json
├── package.json
└── vercel.json

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📊 Data Sources

This application uses life expectancy data from the World Health Organization (WHO) Global Health Observatory, specifically:

• Dataset: Life expectancy at birth (years)
• Year: 2019
• Coverage: Global (all WHO member countries)
• Breakdown: By country and gender

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• World Health Organization for providing the life expectancy data
• React Team for the amazing framework
• Vite Team for the fast build tool
• Tailwind CSS for the utility-first CSS framework

---

Note: This application is for educational and entertainment purposes. Life expectancy data is based on 2019 WHO statistics and should not be used for medical or financial planning decisions.

---

Repository Topics

life-expectancy, life-progress, age-calculator, health-stats, data-visualization, react-app, vite, tailwindcss, who-data, interactive-dashboard, progress-tracker, demographic-data, life-journey, statistical-analysis, web-application, modern-ui, responsive-design, dark-mode, theme-toggle, health-metrics