🎯 Khabri - Civic Incident Reporting Platform

Your Civic Voice Matters - A modern, responsive web application for reporting and tracking civic incidents in your community.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

🌟 Overview

Khabri is a beautifully designed civic engagement platform that empowers citizens to report infrastructure issues, civic problems, and community concerns. With a modern, intuitive interface and robust backend integration, Khabri makes it easy for communities to stay connected and address local issues efficiently.

✨ Key Features

• 🎨 Modern UI/UX - Beautiful gradients, smooth animations, and glassmorphism effects
• 📱 Fully Responsive - Optimized for desktop, tablet, and mobile devices
• 🔐 Secure Authentication - Firebase-powered user authentication
• 📊 Real-time Data - Live incident reporting and tracking
• 🌍 Location-based - GPS integration for accurate incident locations
• 📷 Media Upload - Photo and video support for incident documentation
• 🔍 Advanced Filtering - Filter incidents by location, category, and severity
• 📈 Analytics Dashboard - Global aggregated reports and insights
• ♿ Accessibility - WCAG compliant with high contrast and reduced motion support

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Modern web browser

Installation

1. Clone the repository

   git clone https://github.com/your-org/khabri-frontend.git
   cd khabri-frontend

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

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

Demo Login

Use any valid email format for quick access:

• Email: demo@khabri.com
• Password: anything

🏗️ Project Structure

khabri-frontend/
├── public/                 # Static assets
├── src/
│   ├── components/        # Reusable UI components
│   │   ├── Sidebar.tsx
│   │   ├── QuerySection.tsx
│   │   └── ReportSection.tsx
│   ├── context/          # React context providers
│   │   └── MockAuthContext.tsx
│   ├── pages/            # Page components
│   │   └── Dashboard.tsx
│   ├── services/         # API and external services
│   │   ├── api.ts
│   │   └── firebase.ts
│   ├── types/           # TypeScript type definitions
│   │   └── index.ts
│   ├── App.tsx          # Main application component
│   ├── App.css          # Global styles and animations
│   └── main.tsx         # Application entry point
├── package.json
└── README.md

🎨 UI/UX Features

Design System

• Color Palette: Modern gradients with accessibility-first contrast ratios
• Typography: Inter font family for clean, readable text
• Animations: Smooth micro-interactions and page transitions
• Responsive: Mobile-first design with breakpoints at 768px and 480px

Interactive Elements

• Hover Effects: Subtle animations on buttons and cards
• Focus States: Clear keyboard navigation indicators
• Loading States: Animated spinners and progress indicators
• Success Feedback: Slide-up notifications and confirmations

Accessibility

• Screen Reader Support: Semantic HTML and ARIA labels
• Keyboard Navigation: Full keyboard accessibility
• High Contrast: Support for high contrast mode
• Reduced Motion: Respects user motion preferences

🔧 Tech Stack

Frontend

• React 19.1.0 - Modern React with latest features
• TypeScript 5.8.3 - Type-safe development
• Vite 7.0.4 - Fast build tool and dev server
• Styled Components 6.1.19 - CSS-in-JS styling

Backend Integration

• Firebase 12.0.0 - Authentication and real-time database
• Axios 1.11.0 - HTTP client for API calls
• React Hook Form 7.61.1 - Efficient form handling

Development Tools

• ESLint - Code linting and formatting
• TypeScript ESLint - TypeScript-specific linting rules
• Vite React Plugin - React integration for Vite

📡 API Integration

Backend Services

• Authentication: Firebase Auth integration
• Report Submission: POST /api/reports/demo-submit
• Data Retrieval: GET /api/reports
• Aggregated Analytics: GET /api/aggregation/issues

Base URL

const API_BASE_URL = 'https://us-central1-pulsebengaluru-backend.cloudfunctions.net/api';

🎯 Features Deep Dive

📝 Incident Reporting

• Multi-step Form: Intuitive form with validation
• File Upload: Drag-and-drop photo/video upload
• Location Services: GPS-based location detection
• Severity Classification: Low, Medium, High priority levels
• Category Selection: Pre-defined incident types

🔍 Incident Browsing

• Real-time Updates: Live data from backend
• Advanced Filtering: Location, category, and status filters
• Card-based Layout: Easy-to-scan incident cards
• Detailed View: Comprehensive incident information

📊 Analytics Dashboard

• Global Reports: Aggregated incident data
• Hotspot Analysis: Location-based incident clustering
• Trend Insights: Data-driven community insights
• Export Options: Data export for analysis

🛠️ Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

Environment Setup

Create a .env file for environment variables:

VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id

Code Style

• ESLint: Enforced code standards
• Prettier: Consistent code formatting
• TypeScript: Strict type checking enabled

🌐 Deployment

Build for Production

npm run build

Deployment Platforms

• Netlify: Automatic deployments from Git
• Vercel: Zero-config deployments
• Firebase Hosting: Integrated with Firebase services

Performance Optimizations

• Code Splitting: Automatic route-based splitting
• Tree Shaking: Unused code elimination
• Asset Optimization: Compressed images and fonts
• Lazy Loading: Components loaded on demand

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

📱 Mobile Experience

Khabri is designed mobile-first with:

• Touch-friendly interface elements
• Optimized layouts for small screens
• Fast loading on mobile networks
• Offline capabilities (coming soon)

🔒 Security

• Input Validation: All user inputs are validated
• XSS Protection: Sanitized data rendering
• CSRF Protection: Token-based request validation
• Secure Headers: Security headers implemented

📈 Performance

• Lighthouse Score: 95+ performance rating
• Core Web Vitals: Optimized for all metrics
• Bundle Size: Optimized with code splitting
• Caching: Efficient asset caching strategies

🎨 Browser Support

• Chrome (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Edge (last 2 versions)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

• Frontend Development: Modern React with TypeScript
• UI/UX Design: Accessibility-first design system
• Backend Integration: Firebase and REST APIs

🆘 Support

For support, email support@khabri.com or create an issue in this repository.

🙏 Acknowledgments

• Design Inspiration: Modern civic tech platforms
• Icons: Emoji-based iconography for universal understanding
• Animations: CSS animations and micro-interactions
• Community: Open source contributors and civic tech enthusiasts

---

Made with ❤️ for better communities
_{Empowering citizens through technology}