- Project Overview
- Purpose and Vision
- Technical Architecture
- Tech Stack
- Features and Functionality
- User Experience Enhancements
- Data Sources and APIs
- Database Structure
- Components Architecture
- Pages and Routing
- Styling and Design
- Development Metrics
- Deployment and Infrastructure
- Installation and Setup
- Contributing Guidelines
- Future Roadmap
IndiaMetrics is a comprehensive web application designed to visualize and analyze India's development metrics across multiple dimensions including economic, social, health, environmental, and governance indicators. The platform serves as a centralized hub for understanding urban development patterns across Indian cities through interactive dashboards, data visualizations, and AI-powered insights.
- Primary Name: IndiaMetrics
- Subtitle: India Growth Metrics
- Tagline: "Exploring India's urban development through comprehensive data analysis and visualization"
IndiaMetrics aims to make complex development data accessible to researchers, policymakers, students, and citizens by providing:
- Interactive data visualizations
- Comparative analysis tools
- Trend identification across time periods
- City-wise and region-wise breakdowns
- AI-powered insights and recommendations
- Seamless user experience with modern UI/UX patterns
- Researchers studying urban development patterns
- Policymakers making data-driven decisions
- Students learning about India's development
- Citizens interested in their city's progress
- NGOs working on development projects
- Businesses seeking market insights
To democratize access to India's development data and empower stakeholders with actionable insights for sustainable urban growth through an intuitive and engaging platform.
The application follows a component-based architecture using React with TypeScript, implementing:
- Single Page Application (SPA) with client-side routing
- Component composition for reusable UI elements
- State management through React hooks and context
- Responsive design with mobile-first approach
- Progressive Web App (PWA) capabilities
- Smooth page transitions for enhanced user experience
User Interface → React Components → Page Transitions → Data Fetching (React Query) → APIs → Database
→ News API
→ AI Services
- React 18.3.1 - Core UI library
- TypeScript - Type-safe JavaScript
- Vite - Build tool and development server
- React Router DOM 6.26.2 - Client-side routing with custom transition system
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - Pre-built component library
- Radix UI - Headless UI components
- Lucide React - Icon library (including TrendingUp for branding)
- class-variance-authority - Component variants
- tailwindcss-animate - Animation utilities
- Recharts 2.12.7 - Chart and graph library
- react-india-states-map - Interactive India map
- html2canvas - Screenshot capabilities
- TanStack React Query 5.56.2 - Server state management
- React Hook Form 7.53.0 - Form state management
- Zod 3.23.8 - Schema validation
- Supabase - Backend-as-a-Service
- PostgreSQL database
- Real-time subscriptions
- Authentication
- Edge functions
- Supabase Edge Functions - Serverless functions
- News API - Real-time news integration
- Google Gemini AI - AI-powered chatbot and insights
- Government Data APIs - Development metrics data
- ESLint - Code linting
- PostCSS - CSS processing
- TypeScript Configuration - Type checking
- Multi-category Visualization: Economic, Social, Health, Environment, Governance
- 33+ Metrics: Comprehensive development indicators
- Chart Types: Bar charts, line charts, scatter plots, area charts
- Filtering System: By city, year, category, region
- Responsive Design: Mobile and desktop optimized
- Smooth Page Transitions: Modern loading animations between pages
- Minimalist Loading Design: Clean white background with sleek loading elements
- Consistent Branding: IndiaMetrics logo with TrendingUp icon throughout
- Responsive Navigation: Mobile-friendly hamburger menu
- Interactive Elements: Hover effects and smooth animations
-
Economic Indicators:
- GDP (Gross Domestic Product)
- GNI (Gross National Income)
- GDP per Capita
- Unemployment Rate
- Inflation Rate
- Foreign Direct Investment
- Export/Import Ratios
- Public Debt as % of GDP
- Gini Coefficient
-
Social Development:
- Human Development Index (HDI)
- Life Expectancy
- Infant Mortality Rate
- Literacy Rate
- Education Index
- Gender Inequality Index
- Population Growth Rate
- Urban Population %
- Poverty Rate
- Social Protection Coverage
-
Health & Well-being:
- Healthcare Expenditure per Capita
- Physicians per 1000 people
- Hospital Beds per 1000 people
- Access to Clean Water %
- Vaccination Coverage %
-
Environment & Sustainability:
- Air Quality Index (AQI)
- Renewable Energy %
- CO2 Emissions per Capita
- Forest Area %
- Environmental Performance Index
-
Governance & Infrastructure:
- Internet Penetration %
- Corruption Perceptions Index
- Mobile Phone Subscriptions
- Infrastructure Quality Index
- Political Stability Index
- State-wise Visualization: Clickable map interface
- Metric Overlay: Color-coded development indicators
- Zoom and Pan: Mobile-friendly map interactions
- Responsive Design: Horizontal and vertical scrolling support
- Gemini AI Integration: Intelligent query responses
- Context-Aware: Understands development metrics
- Real-time Interaction: Instant responses
- Data Insights: AI-generated analysis
- Real-time Updates: Latest development news
- Contextual Content: India-focused development stories
- News API Integration: Live news feeds
- Mobile-First Design: Optimized for small screens
- Touch Interactions: Swipe and tap navigation
- Responsive Charts: Adaptable visualizations
- Horizontal Scrolling: Enhanced mobile navigation
- Custom Hook:
usePageTransitionfor managing navigation state - Transition Component:
PageTransitionwith modern loading animations - TransitionLink: Custom link component for seamless navigation
- Loading Duration: 1.5-second transition for optimal UX
- Visual Feedback: Clean white background with animated loading elements
- Smooth Transitions: CSS transitions for all interactive elements
- Loading States: Skeleton screens and progress indicators
- Hover Effects: Interactive feedback on buttons and links
- Mobile Gestures: Touch-friendly interactions
- Logo: TrendingUp icon in primary color
- Typography: Consistent font hierarchy
- Color Scheme: Primary blue with supporting colors
- Spacing: Uniform padding and margins throughout
-
Government Statistical Offices
- Ministry of Statistics and Program Implementation (MOSPI)
- Census of India
- National Sample Survey Office (NSSO)
-
International Organizations
- World Bank Open Data
- United Nations Development Programme (UNDP)
- International Monetary Fund (IMF)
- World Health Organization (WHO)
-
Research Institutions
- Indian Statistical Institute
- National Council of Applied Economic Research (NCAER)
- Observer Research Foundation (ORF)
- Endpoint: News API service
- Purpose: Real-time news updates
- Data Type: JSON
- Update Frequency: Real-time
- Authentication: API Key (stored in Supabase secrets)
- Provider: Google AI
- Purpose: Chatbot functionality and insights
- Data Type: Natural language processing
- Authentication: API Key (stored in Supabase secrets)
- Supabase Edge Functions: Custom data processing
- Real-time Updates: WebSocket connections
- Data Validation: Server-side validation
The application uses Supabase as the primary backend service with the following setup:
Note: Current implementation uses mock data for development. Production database schema would include:
- cities: City information and metadata
- metrics: Development metric definitions
- data_points: Time-series data for all metrics
- regions: Regional classifications
- news_articles: Cached news data
- user_preferences: User customization settings
- Row Level Security (RLS): Enabled for data protection
- API Keys: Secure access to external services
- Environment Variables: Sensitive data protection
- File Storage: Image and document storage
- Backup Strategy: Automated database backups
- Data Retention: Configurable retention policies
- Navigation.tsx: Primary navigation with TransitionLink integration
- Footer.tsx: Site footer with IndiaMetrics branding
- PageTransition.tsx: Loading animation component
- usePageTransition.tsx: Custom hook for page navigation
- TransitionLink.tsx: Enhanced link component with loading states
- DashboardChart.tsx: Reusable chart component
- DashboardFilters.tsx: Filter controls
- MobileResponsiveChart.tsx: Mobile-optimized charts
- IndiaMap.tsx: Interactive map component
- Button: Styled button components
- Card: Container components
- Tabs: Tabbed interface
- Select: Dropdown selections
- Toast: Notification system
- Chatbot.tsx: AI chatbot interface
- NewsSection.tsx: News display component
- CounterStats.tsx: Animated statistics
- FeatureGrid.tsx: Feature showcase
- InsightCard.tsx: Insight display cards
App
├── PageTransition
├── Navigation (with TransitionLink)
├── Routes
│ ├── Index (Home)
│ ├── Dashboard
│ │ ├── DashboardFilters
│ │ ├── DashboardChart (multiple instances)
│ │ ├── MobileResponsiveChart
│ │ ├── IndiaMap
│ │ └── NewsSection
│ ├── Insights
│ ├── About
│ ├── Resources
│ ├── Contact
│ └── NotFound
├── Chatbot
└── Footer (with IndiaMetrics branding)
- Hero Section: Project introduction and CTA with TransitionLink
- Feature Highlights: Key capabilities showcase
- Statistics Counter: Animated metrics display
- Call-to-Action: Dashboard access with smooth transitions
- Filter Controls: City, year, category selection
- Quick Stats: Key metrics overview
- Tabbed Charts: Categorized visualizations
- Interactive Map: Geographic data representation
- News Section: Latest updates
- AI-Generated Insights: Data analysis
- Trend Analysis: Historical comparisons
- Recommendations: Actionable suggestions
- Project Information: Purpose and goals
- Team Details: Contributors and acknowledgments
- Methodology: Data collection and analysis
- Data Sources: Information about data origins
- API Documentation: Developer resources
- Downloads: Exportable data sets
- Contact Form: User inquiries
- Support Information: Help and documentation
- Community Links: Social media and forums
- React Router DOM: Client-side routing
- Custom Transitions: PageTransition component integration
- Error Boundaries: 404 and error handling
- SEO Optimization: Meta tags and descriptions
- Primary: Blue tones for main interface elements and branding
- Secondary: Supporting colors for accents
- Success: Green for positive indicators
- Warning: Orange/yellow for caution
- Error: Red for negative indicators
- Neutral: Gray scale for text and backgrounds
- Background: Clean white for loading states and base layout
- Font Family: System fonts with web-safe fallbacks
- Font Sizes: Responsive scaling (sm, md, lg, xl, 2xl, etc.)
- Font Weights: Light, regular, medium, semibold, bold
- Grid System: CSS Grid and Flexbox
- Breakpoints: Mobile-first responsive design
- Spacing Scale: Consistent padding and margins
- Container Widths: Responsive container sizing
- Page Transitions: 1.5-second smooth loading animations
- Tailwind Animations: Built-in animation utilities
- Custom Animations: CSS keyframes for specialized effects
- Hover States: Interactive feedback
- Loading States: Modern minimalist spinners and progress indicators
- Mobile First: Base styles for mobile devices
- Progressive Enhancement: Additional features for larger screens
- Touch Interactions: Mobile-friendly interactions
- Performance Optimization: Efficient rendering on all devices
- Bundle Size: Optimized for fast loading
- Code Splitting: Lazy loading for better performance
- Tree Shaking: Unused code elimination
- Image Optimization: Responsive images and formats
- Transition Performance: Smooth 60fps animations
- TypeScript Coverage: 100% TypeScript implementation
- ESLint Rules: Consistent code formatting
- Component Reusability: DRY principle adherence
- Error Handling: Comprehensive error boundaries
- Hook Patterns: Custom hooks for state management
- Unit Testing: Component-level testing
- Integration Testing: Feature testing
- E2E Testing: User journey validation
- Performance Testing: Load and stress testing
- Lovable Platform: Primary hosting service
- CDN: Global content delivery
- SSL/TLS: Secure HTTPS connections
- Domain Management: Custom domain support
- Development: Local development environment
- Staging: Pre-production testing
- Production: Live application deployment
- Automated Builds: Continuous integration
- Testing Pipeline: Automated test execution
- Deployment Automation: Seamless updates
- Rollback Capability: Quick reversion options
- Error Tracking: Runtime error monitoring
- Performance Monitoring: Application performance metrics
- User Analytics: Usage patterns and behavior
- Uptime Monitoring: Service availability tracking
- Node.js: Version 18 or higher
- npm: Package manager
- Git: Version control
- Modern Browser: Chrome, Firefox, Safari, Edge
# Clone the repository
git clone <repository-url>
cd indiametrics
# Install dependencies
npm install
# If faced issues installing (Recommended)
npm install --legacy-peer-deps
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API keys
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewSUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
NEWS_API_KEY=your_news_api_key
GEMINI_API_KEY=your_gemini_api_key
- Create Supabase project
- Run database migrations
- Set up row-level security
- Configure API keys
- Enable real-time subscriptions
- TypeScript: Strict type checking
- ESLint: Code linting and formatting
- Component Structure: Consistent component patterns
- Documentation: Comprehensive code comments
- Animation Patterns: Consistent transition implementations
- Feature Branches: Isolated feature development
- Pull Requests: Code review process
- Commit Messages: Conventional commit format
- Version Tagging: Semantic versioning
- Bug Reports: Detailed issue descriptions
- Feature Requests: Enhancement proposals
- Documentation: Updates and improvements
- Performance: Optimization suggestions
- UX Improvements: User experience enhancements
- Real Data Integration: Connect to actual government APIs
- User Authentication: User accounts and preferences
- Export Functionality: Data download capabilities
- Advanced Filtering: More granular data filtering
- Enhanced Animations: More sophisticated loading states
- Predictive Analytics: AI-powered forecasting
- Comparative Analysis: Multi-city comparisons
- Custom Dashboards: User-created dashboards
- Mobile App: Native mobile application
- Offline Support: PWA capabilities with caching
- Machine Learning: Advanced data insights
- Real-time Data: Live data streaming
- API Platform: Public API for developers
- International Expansion: Other countries' data
- Advanced Visualizations: 3D charts and immersive experiences
- Performance Optimization: Faster load times and smoother animations
- Accessibility: WCAG compliance
- PWA Features: Offline functionality
- Testing Coverage: Comprehensive test suite
- Micro-interactions: Enhanced user feedback systems
- Page Transition System: Added smooth loading animations between pages
- Enhanced Branding: Updated footer and navigation with consistent IndiaMetrics branding
- Modern UX: Implemented minimalist loading design with white background
- Custom Hooks: Created usePageTransition for state management
- Component Architecture: Added TransitionLink for seamless navigation
For questions, suggestions, or contributions, please:
- Email: sapfire007@outlook.com
Last Updated: June 2025 Version: 1.1.0 License: MIT License Maintainer:Saptarshi Bose