A modern web application for monitoring and analyzing children's growth patterns using WHO standards. Built with Next.js, React, Supabase, and TailwindCSS.
- Dashboard: Real-time overview of growth metrics and trends
- Program Management: Track multiple health programs and interventions
- Growth Analysis:
- Population Analysis
- Growth Trends
- Intervention Impact
- Data Visualization:
- WHO Standard Growth Charts
- Height-for-Age Analysis
- Weight-for-Age Analysis
- Data Management:
- Individual Child Records
- Batch Upload Functionality
- Data Entry Forms
- Documentation: Comprehensive guides on WHO standards and metrics
- Recumbent Length: Measured lying down
- Required Equipment: Length board with fixed headpiece and movable footpiece
- Precision: Measurements recorded to nearest 0.1 cm
- Two people required for accurate measurement
- Standing Height: Measured standing upright
- Required Equipment: Stadiometer or height board
- Precision: Measurements recorded to nearest 0.1 cm
- Child should stand with:
- Heels together
- Shoulders level
- Head in Frankfurt plane position
- Equipment: Electronic scale with 0.1 kg precision
- Procedure:
- Zero scale before each measurement
- Child wearing light clothing only
- Record to nearest 0.1 kg
We use the WHO Child Growth Standards (0-5 years) and WHO Growth Reference (5-19 years):
- Length/height-for-age
- Weight-for-age
- Weight-for-length/height
- Body mass index (BMI)-for-age
- Above 3: Severely high
- Above 2: High
- 0: Median
- Below -2: Low
- Below -3: Severely low
interface GrowthData {
age: number; // Age in months
measurement: number; // Height or weight
zscore: number; // Standard deviation from median
}
// Z-score calculation
const calculateZScore = (measurement: number, median: number, sd: number): number => {
return (measurement - median) / sd;
};
// Growth velocity calculation (cm/month)
const calculateGrowthVelocity = (
currentHeight: number,
previousHeight: number,
monthsDifference: number
): number => {
return (currentHeight - previousHeight) / monthsDifference;
};
We use the following WHO growth chart data:
who-growth-standards.json
: Contains median and SD values for different ages- Growth charts are generated using
react-chartjs-2
- Data is interpolated for precise age-based calculations
- Node.js 16.x or higher
- npm or yarn
- Git
- Clone the repository:
git clone https://github.com/satishskid/skidfi.git
cd skidfi
- Install dependencies:
npm install
# or
yarn install
- Set up environment variables:
cp .env.example .env.local
- Run the development server:
npm run dev
# or
yarn dev
- Open http://localhost:3000 in your browser.
src/
├── components/ # Reusable UI components
├── pages/ # Next.js pages and API routes
├── styles/ # Global styles and Tailwind config
├── utils/ # Helper functions and utilities
└── data/ # Data models and mock data
- Frontend: Next.js, React, TailwindCSS
- Charts: Chart.js
- State Management: React Hooks
- Forms: React Hook Form
- Data Visualization: Chart.js, WHO Growth Standards
- Development: TypeScript, ESLint, Prettier
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- World Health Organization for growth standards data
- React and Next.js communities
- All contributors and maintainers