🏛 Samadhan - Civic Issue Reporting Platform

A multilingual mobile application for reporting and tracking civic issues in Jharkhand, India

📱 Overview

Samadhan is a citizen-first mobile application developed for the Government of Jharkhand to enable citizens to report civic issues and track their resolution status. The app supports three languages: English, Hindi, and Nagpuri (Sadri), making it accessible to the diverse population of Jharkhand.

✨ Key Features

🌐 Multilingual Support

• 3 Languages: English, Hindi (हिन्दी), and Nagpuri (नागपुरी सदरी)
• Real-time Language Switching: Change language instantly from any screen
• Persistent Language Selection: User's language preference is saved and restored
• Native Script Display: Proper rendering of Devanagari and Nagpuri scripts
• Fallback System: Graceful handling of missing translations

📋 Core Functionality

• Issue Reporting: Take photos and report civic issues instantly
• Issue Tracking: Monitor the status of submitted reports
• Community Feed: View issues reported by other citizens
• Status Updates: Real-time notifications for issue status changes
• User Authentication: Secure login/signup with Aadhaar verification
• Government Integration: Official Government of Jharkhand branding and security

🎨 User Experience

• Modern UI/UX: Clean, government-appropriate design
• Dark/Light Theme: Automatic theme switching based on system preferences
• Responsive Design: Optimized for various screen sizes
• Smooth Animations: Engaging transitions and micro-interactions
• Accessibility: Support for screen readers and accessibility features

🛠 Technical Stack

Frontend Framework

• React Native 0.81.4: Cross-platform mobile development
• Expo 54.0.6: Development platform and build tools
• TypeScript 5.9.2: Type-safe JavaScript development

Navigation & Routing

• Expo Router 6.0.3: File-based routing system
• React Navigation 7.1.6: Navigation library for React Native

Internationalization

• react-i18next 15.7.3: React integration for i18next
• i18next 25.5.2: Internationalization framework
• AsyncStorage: Persistent language storage

UI & Styling

• NativeWind 4.1.23: Tailwind CSS for React Native
• Expo Vector Icons 15.0.2: Icon library
• React Native Reanimated 4.1.0: Advanced animations

State Management

• React Context API: Global state management
• Custom Hooks: Reusable state logic

📁 Project Structure

SIH-Team-Overclock/
├── app/                          # App screens and routing
│   ├── (tabs)/                   # Tab navigation screens
│   │   ├── index.tsx            # Home screen
│   │   ├── camera.tsx           # Camera for issue reporting
│   │   └── profile.tsx          # User profile
│   ├── _layout.tsx              # Root layout with providers
│   ├── login.tsx                # Login screen
│   ├── signup.tsx               # Signup screen
│   ├── landing.tsx              # Landing/welcome screen
│   ├── splash.tsx               # Splash screen
│   └── ...                      # Other screens
├── components/                   # Reusable UI components
│   ├── LanguageSelector.tsx     # Language selection dropdown
│   ├── ThemedText.tsx           # Themed text component
│   ├── ThemedView.tsx           # Themed view component
│   └── ...                      # Other components
├── contexts/                     # React contexts
│   └── LanguageContext.tsx      # Language management context
├── hooks/                        # Custom React hooks
│   ├── useTranslation.ts        # Translation hook
│   ├── useThemeColor.ts         # Theme color hook
│   └── useColorScheme.ts        # Color scheme hook
├── i18n/                         # Internationalization
│   ├── index.ts                 # i18n configuration
│   └── locales/                 # Translation files
│       ├── en.json              # English translations
│       ├── hi.json              # Hindi translations
│       └── nagpuri.json         # Nagpuri translations
├── constants/                    # App constants
│   ├── Colors.ts                # Color definitions
│   └── CivicIssues.ts           # Issue type definitions
├── assets/                       # Static assets
│   ├── images/                  # Images and logos
│   └── fonts/                   # Custom fonts
└── ...                          # Configuration files

🌍 Language Support

English (en)

• Complete English translations for all UI elements
• Standard English terminology for government services
• Clear, professional language suitable for official use

Hindi (hi)

• Full Hindi translations using Devanagari script
• Culturally appropriate terminology
• Government-appropriate formal language

Nagpuri (nagpuri)

• Complete Nagpuri (Sadri) translations
• Local language support for Jharkhand residents
• Preserves regional linguistic identity

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• Android Studio (for Android development)
• Xcode (for iOS development, macOS only)

Installation

1. Clone the repository bash git clone cd SIH-Team-Overclock

2. Install dependencies bash npm install

   or

   yarn install

3. Start the development server bash npm start

   or

   yarn start

4. Run on device/simulator bash

   Android

   npm run android

   iOS

   npm run ios

   Web

   npm run web

📱 Screens & Features

Splash Screen

• Animated app logo and branding
• Multilingual welcome messages
• Feature highlights in selected language
• Smooth transition to main app

Authentication Screens

• Login: OTP-based authentication
• Signup: Aadhaar-verified account creation
• Language selector on both screens
• Form validation in selected language

Home Screen

• Language selector (compact mode)
• Quick action buttons for reporting and tracking
• Community issues feed
• Real-time status updates
• Interactive post cards with upvoting

Issue Reporting

• Camera integration for photo capture
• Category selection for issue types
• Location-based reporting
• Multilingual form fields

Issue Tracking

• Personal reports dashboard
• Status tracking (Submitted, In Progress, Resolved, Rejected)
• Timeline view of issue progress
• Notification system

🔧 Configuration

Language Configuration

The app uses i18next for internationalization with the following configuration:

typescript // i18n/index.ts i18n .use(LANGUAGE_DETECTOR) .use(initReactI18next) .init({ compatibilityJSON: 'v3', resources: { en: { translation: en }, hi: { translation: hi }, nagpuri: { translation: nagpuri }, }, fallbackLng: 'en', debug: DEV, interpolation: { escapeValue: false, }, });

Theme Configuration

The app supports both light and dark themes with government-appropriate color schemes:

typescript // constants/Colors.ts export const Colors = { light: { text: '#1e293b', background: '#ffffff', tint: '#2563eb', // ... other colors }, dark: { text: '#f1f5f9', background: '#0f172a', tint: '#3b82f6', // ... other colors }, };

🎯 Key Implementations

1. Multilingual System

• Translation Files: Comprehensive JSON files for all three languages
• Language Context: React context for global language state management
• Language Selector: Beautiful dropdown component with native script display
• Persistent Storage: AsyncStorage integration for language preference

2. User Interface

• Themed Components: Consistent theming across all components
• Responsive Design: Adaptive layouts for different screen sizes
• Accessibility: Screen reader support and accessibility features
• Animations: Smooth transitions and micro-interactions

3. State Management

• Context API: Global state for language and theme
• Custom Hooks: Reusable logic for translations and theming
• Local Storage: Persistent user preferences

4. Navigation

• Expo Router: File-based routing system
• Tab Navigation: Bottom tab navigation for main features
• Stack Navigation: Modal and screen transitions

📊 Translation Coverage

Complete Translation Keys

• Common: 15+ common UI elements (buttons, labels, etc.)
• App: 6+ app-specific terms (name, subtitle, etc.)
• Authentication: 20+ auth-related terms
• Home: 10+ home screen elements
• Landing: 8+ landing page elements
• Splash: 6+ splash screen elements
• Language: 4+ language selection terms
• Categories: 9+ issue categories
• Issue Types: 6+ specific issue types
• Terms: Complete terms of use content

Total Translation Keys: 100+ comprehensive translation keys

🔒 Security Features

• Aadhaar Integration: Government-verified identity system
• Secure Storage: Encrypted local storage for sensitive data
• Input Validation: Comprehensive form validation
• Error Handling: Graceful error handling and user feedback

🎨 Design System

Color Palette

• Primary Blue: Government-appropriate blue (#2563eb)
• Success Green: Issue resolved status (#059669)
• Warning Amber: In-progress status (#d97706)
• Error Red: Rejected status (#dc2626)

Typography

• System Fonts: Native font rendering for all languages
• Font Weights: Multiple weights for hierarchy
• Responsive Sizing: Adaptive font sizes

Components

• Consistent Styling: Unified design language
• Accessibility: WCAG compliant components
• Theme Support: Light and dark mode compatibility

🚀 Deployment

Build Configuration

• Expo Build: Optimized production builds
• Platform Support: Android and iOS
• Asset Optimization: Compressed images and fonts

Environment Setup

• Development: Hot reload and debugging
• Staging: Pre-production testing
• Production: Optimized release builds

📈 Performance Optimizations

• Lazy Loading: On-demand component loading
• Image Optimization: Compressed and optimized images
• Translation Caching: Efficient translation loading
• Memory Management: Optimized state management

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add translations for new features
5. Test across all supported languages
6. Submit a pull request

📄 License

This project is developed for the Government of Jharkhand and is subject to government licensing terms.

👥 Team

SIH Team Overclock - Smart India Hackathon 2024

📞 Support

For technical support or feature requests, please contact the development team.

---

Built with ❤ for the people of Jharkhand

Making civic issue reporting accessible, multilingual, and efficient for all citizens.