SecurEd is a Full-Stack AI-powered disaster preparedness and response education system designed for schools and colleges. The platform provides immersive simulations, interactive learning modules, and real-time guidance to help students master emergency response protocols.
- Immersive 3D virtual disaster drills with real-time decision making
- Multiple disaster scenarios: Earthquakes, Fires, Floods, and more
- Instant feedback and performance analytics
- Realistic environment simulations using Three.js
- 24/7 AI assistant for disaster-related questions
- Context-aware guidance and emergency protocols
- Multi-language support
- Real-time response system
- Points, badges, and achievement system
- Student leaderboards and progress tracking
- Interactive quizzes and assessments
- Certification upon completion
- Interactive maps showing safe zones and evacuation routes
- Real-time disaster heatmap visualization
- Location-based emergency resources
- Integration with Leaflet.js for mapping
- Comprehensive disaster preparedness modules
- Government resources and guidelines
- Video tutorials and documentation
- Downloadable emergency checklists
- Quick access emergency contact system
- Real-time alert notifications
- Location sharing capabilities
- Emergency protocol guides
- Framework: React 18.3 with TypeScript
- Build Tool: Vite 5.4
- Routing: React Router DOM 6.30
- UI Components: Radix UI + shadcn/ui
- Styling: TailwindCSS 3.4 with animations
- 3D Graphics: Three.js with React Three Fiber
- Maps: Leaflet.js with heatmap support
- Charts: Recharts
- State Management: TanStack Query (React Query)
- Forms: React Hook Form with Zod validation
- Icons: Lucide React
- Database: Supabase (PostgreSQL)
- Authentication: Supabase Auth
- Real-time: Supabase Realtime subscriptions
- Storage: Supabase Storage for media files
- API: RESTful API with Supabase client
@react-three/fiber&@react-three/drei- 3D simulationsleaflet&leaflet.heat- Interactive mapsrecharts- Data visualizationcmdk- Command palettesonner- Toast notificationsdate-fns- Date formatting
securEd/
├── public/
│ ├── favicon.svg # Application icon
│ ├── models/ # 3D models for simulations
│ ├── placeholder.svg # Placeholder images
│ └── robots.txt
├── src/
│ ├── assets/ # Images and static assets
│ ├── components/
│ │ ├── 3d/ # Three.js 3D components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── InteractiveSimulation.tsx
│ │ ├── Navigation.tsx
│ │ └── RealLifeSimulation.tsx
│ ├── data/ # Static data and configurations
│ ├── hooks/ # Custom React hooks
│ ├── integrations/
│ │ └── supabase/ # Supabase client and types
│ ├── lib/ # Utility functions
│ ├── pages/
│ │ ├── Index.tsx # Landing page
│ │ ├── Dashboard.tsx # User dashboard
│ │ ├── Simulations.tsx # Simulation selection
│ │ ├── SimulationPlay.tsx # Active simulation
│ │ ├── Learning.tsx # Learning modules
│ │ ├── GovtResources.tsx # Government resources
│ │ ├── SafetyMap.tsx # Interactive safety map
│ │ ├── Heatmap.tsx # Disaster heatmap
│ │ ├── Chatbot.tsx # AI chatbot interface
│ │ ├── Auth.tsx # Authentication
│ │ └── sos.tsx # Emergency SOS
│ ├── App.tsx # Main app component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── package.json
├── vite.config.ts
├── tailwind.config.ts
└── tsconfig.json
The application uses Supabase with the following main tables:
- users - User profiles and authentication
- simulations - Disaster simulation scenarios
- user_progress - Student progress tracking
- achievements - Badges and achievements
- leaderboard - Gamification scores
- resources - Learning materials
- emergency_contacts - SOS contact information
- safety_locations - Map markers and safe zones
- Built with React and Vite
- UI components from shadcn/ui
- 3D graphics powered by Three.js
- Maps by Leaflet
- Backend by Supabase
SecurEd - Empowering communities through disaster preparedness education.