🆘 Post-Disaster Relief Resource Locator

Emergency relief resource locator helping disaster victims find nearby shelters, food, medical care, and water within 25km. Features interactive mapping with OpenStreetMap, postal code search, and a calming blue interface designed for clarity during emergencies.

Relief Resource Locator

A lightweight web application that helps people find nearby relief resources (shelters, supplies, medical, and info hubs) during and after natural disasters.

Dev URL: http://localhost:5000

✨ Features (high level)

Search and browse local relief resources
Filter by category (e.g., food, shelter, medical)
Map/list views (implementation-specific)
Offline-first considerations and error handling (where supported)
Simple, fast setup for hackathon/competition environments

🗺️ Interactive Mapping

Color-Coded Markers - Red (shelters), Orange (food), Blue (medical), Purple (water)
User Location Tracking - Pulsing marker shows your current position
Auto-Zoom & Bounds - Map automatically fits all nearby resources
OpenStreetMap Integration - Free, no API key required

🔍 Search & Filter

Postal Code Search - Find resources by entering any postal code
Browser Geolocation - "Use My Location" for instant results
Resource Type Filtering - Filter by shelter, food, medical, or water
25km Radius - Only shows resources within practical distance

📱 Mobile-Optimized Design

Calming Blue Theme - Material Design optimized for high-stress situations
Viewport-Fitted Layout - No page scroll, only resource list scrolls
Responsive Design - Works seamlessly on desktop, tablet, and mobile
Touch-Friendly - Large buttons and interactive elements

💾 Offline Support

LocalStorage Caching - Relief center data cached for offline access
Geocoding Cache - 24-hour cache reduces API calls
Hardcoded Postal Codes - 100+ Toronto postal codes work offline

🌍 Multi-City Coverage

Toronto - 18 relief centers across all districts
Guelph - 8 relief centers
Hamilton - 8 relief centers
Easy Expansion - Add more cities by updating seed data

🧰 Tech & Requirements

Node.js (v18+ recommended; v20+ ideal)
npm (v9+)
git
Linux/macOS/WSL supported

If you’re on Windows, we recommend WSL (Ubuntu) for the smoothest experience.

🚀 Quick Start

# 1) Clone the repo
git clone https://github.com/rinnegannn/ReliefLocator.git
cd ReliefLocator

# 2) Run setup (installs system deps where needed + npm packages)
./setup.sh

# 3) Start the dev server
npm run dev

# 4) Open the app
# Follow the link printed in the terminal, or visit:
http://localhost:5000

🗄️ Database Options

SQLite (Local Development) - Default

No configuration needed! The app automatically uses SQLite when DATABASE_URL is not set.

Database File: ./dev.db (auto-created)
Seeding: 34 relief centers loaded automatically
Perfect For: Local development, testing, demos

PostgreSQL (Production)

For production deployment with Neon, Supabase, or any PostgreSQL:

# Set your database URL
export DATABASE_URL="postgresql://user:password@host:5432/database"

# Push schema to database
npm run db:push

# Start the app
npm run dev

The app will automatically detect DATABASE_URL and use PostgreSQL instead of SQLite.

🛠️ Tech Stack

Frontend

React 18 - Modern UI framework
Vite - Lightning-fast build tool
Wouter - Lightweight routing
TanStack Query - Server state management
Tailwind CSS - Utility-first styling
Shadcn/ui - Beautiful accessible components
Radix UI - 20+ accessible primitives
Leaflet - Interactive maps

Backend

Node.js - JavaScript runtime
Express - Web server framework
Drizzle ORM - Type-safe database queries
TypeScript - Type safety across the stack

Database

SQLite - Local development (better-sqlite3)
PostgreSQL - Production (Neon serverless)
Dual support - Auto-detects based on environment

External Services (Free)

OpenStreetMap - Map tiles (no API key)
Nominatim - Geocoding (rate-limited to 1 req/sec)

📁 Project Structure

relief-resource-locator/
├── client/                 # Frontend application
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── pages/         # Route pages
│   │   ├── lib/           # Utilities
│   │   └── hooks/         # Custom hooks
│   └── index.html
├── server/                # Backend application
│   ├── db.ts              # Database connection (dual support)
│   ├── routes.ts          # API endpoints
│   ├── seed.ts            # Database seeding
│   └── storage.ts         # Data access layer
├── shared/                # Shared types and schemas
│   ├── schema.ts          # PostgreSQL schema
│   └── sqlite-schema.ts   # SQLite schema
├── setup.sh               # Automated setup (Linux/Mac)
├── setup.bat              # Automated setup (Windows)
├── dependencies.md        # Comprehensive dependency docs
└── package.json           # Project dependencies

🔧 Available Scripts

# Development
npm run dev          # Start dev server (frontend + backend)
npm run check        # TypeScript type checking

# Database
npm run db:push      # Sync schema to database (PostgreSQL)

# Production
npm run build        # Build for production
npm start            # Start production server

🌐 Environment Variables

Required for Production

# PostgreSQL Connection (for production)
DATABASE_URL="postgresql://user:password@host:5432/database"

# Session Secret (for production)
SESSION_SECRET="your-secure-random-string-here"

Optional

# Development uses SQLite by default
# No environment variables needed for local development!

📊 Relief Center Data

The application comes pre-seeded with 34 relief centers across three cities:

Toronto (18 locations)

5 Emergency Shelters
4 Food Banks
5 Medical Centers
4 Water Distribution Points

Guelph (8 locations)

2 Emergency Shelters
2 Food Banks
2 Medical Centers
2 Water Stations

Hamilton (8 locations)

2 Emergency Shelters
2 Food Banks
2 Medical Centers
2 Water Stations

Adding More Cities

Edit server/seed.ts and add your relief centers:

const newCityReliefCenters: InsertReliefCenter[] = [
  {
    name: "City Hall Emergency Shelter",
    type: "shelter",
    latitude: 43.1234,
    longitude: -79.5678,
    address: "123 Main St, City, ON",
    phone: "(555) 123-4567",
    hours: "Open 24/7",
  },
  // ... more centers
];

🎨 Design System

Color Scheme (Material Design Blue)

Primary: #1976D2 (Calming blue for emergency contexts)
Primary Dark: #1565C0
Primary Light: #E3F2FD
Accent: #FFC107 (Warning amber)

Resource Type Colors

Shelter: Red (#EF4444)
Food: Orange (#F97316)
Medical: Blue (#3B82F6)
Water: Purple (#A855F7)

Typography

Headings: System font stack
Body: System font stack optimized for readability

🚢 Deployment

Replit (Recommended)

Import this repository to Replit
Set DATABASE_URL secret (get free PostgreSQL from Neon)
Set SESSION_SECRET secret
Click "Run" - auto-deploys!

Manual Deployment

# Build the application
npm run build

# Set environment variables
export DATABASE_URL="your-postgres-url"
export SESSION_SECRET="your-secret"

# Push database schema
npm run db:push

# Start production server
npm start

The app will be available on port 5000.

📖 Documentation

dependencies.md - Complete dependency reference (85+ packages)
design_guidelines.md - UI/UX design system
replit.md - Project architecture and technical decisions

🤝 Contributing

Contributions are welcome! This project helps people in emergency situations.

Ways to Contribute

Add More Cities - Expand coverage to new regions
Improve UI/UX - Enhance mobile experience
Add Features - SMS alerts, push notifications, etc.
Fix Bugs - Report or fix issues
Translate - Add multi-language support

Development Workflow

# Fork and clone
git clone https://github.com/yourusername/relief-resource-locator.git

# Create feature branch
git checkout -b feature/amazing-feature

# Make changes and test
npm run dev
npm run check

# Commit and push
git commit -m "Add amazing feature"
git push origin feature/amazing-feature

# Open Pull Request

📄 License

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

🙏 Acknowledgments

OpenStreetMap - Free map tiles and data
Nominatim - Free geocoding service
Shadcn/ui - Beautiful component library
Radix UI - Accessible primitives
Replit - Hosting and development platform

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions

🗺️ Roadmap

Real-time Updates - WebSocket-based emergency alerts
SMS Notifications - Twilio integration for alerts
Multi-language - i18n support (English, French, Spanish)
PWA - Offline-first progressive web app
Dark Mode - Infrastructure ready, needs implementation
More Cities - Expand beyond Toronto/Guelph/Hamilton
Community Reports - User-submitted relief center updates
Route Navigation - Turn-by-turn directions

Built with ❤️ for disaster relief efforts

Help us expand coverage to more cities! Contribute today

Name		Name	Last commit message	Last commit date
Latest commit History 41 Commits
.github/workflows		.github/workflows
attached_assets		attached_assets
client		client
server		server
shared		shared
.gitignore		.gitignore
.replit		.replit
LICENSE		LICENSE
README.md		README.md
components.json		components.json
dependencies.md		dependencies.md
drizzle.config.ts		drizzle.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
setup.sh		setup.sh
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

License

rinnegannn/ReliefLocator

Folders and files

Latest commit

History

Repository files navigation