FloodGuard Aid Network

FloodGuard Aid Network is a web-based application designed to assist flood-affected people by connecting victims with volunteers for aid distribution and real-time updates. The system includes features such as mapping victim and volunteer locations, weather updates, and a dashboard for tracking aid requests and volunteer deployment.

Table of Contents

• Features
• Technologies Used
• Setup
• Usage
• Environment Variables
• Project Structure
• Screenshots
• Live Demo
• Contributing
• License

Features

• Victim Registration: Victims can register to request aid and be located on the map.
• Volunteer Registration: Volunteers can sign up to offer assistance and be deployed as needed.
• Interactive Map: Displays the locations of victims and volunteers with real-time updates.
• Weather and Alerts: Integrates with OpenWeatherMap API to display weather information and flood alerts.
• Dashboard: Shows statistics on aid distribution, active volunteers, and pending requests.

Technologies Used

• Frontend: React, TypeScript, Tailwind CSS
• APIs:
  • Google Maps API for location and map markers
  • OpenWeatherMap API for weather and alert data

Setup

1. Clone the repository:

   git clone https://github.com/aroyy007/FloodGuard_Aid_Network.git
   cd FloodGuard_Aid_Network

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory and add your API keys (refer to Environment Variables section).

4 Start the development server:

npm run dev

Usage

1. Register as a victim or volunteer:

   • Victims can register to request help.
   • Volunteers can sign up to assist in relief efforts.

2. Dashboard:

   • View real-time updates, aid statistics, and status of requests.

3. Interactive Map:

   • View locations of victims and volunteers.
   • Overlay of current weather and flood alerts using OpenWeatherMap.

Environment Variables

Make sure to set up the following environment variables in your .env file:

 MONGO_DB_URL=<Your MongoDB URL>
 PORT=3000
 VITE_GOOGLE_MAPS_API=<Your Google Maps API>

Project Structure

FloodGuard_Aid_Network/
├── public/             # Public files
├── src/                
│   ├── components/     # UI components (e.g., Map, Dashboard)
│   ├── pages/          # Main pages (Home, Volunteer, Victim)
│   ├── styles/         # CSS and styling files
│   ├── hooks/          # Custom Hooks
│   ├── types/          # Typescript Types
│   ├── App.tsx         # Root component
│   └── index.tsx       # Entry point
├── .env                # Environment variables
├── README.md           # Project documentation
└── package.json        # Project dependencies and scripts

Screenshots

Here are some screenshots of the application:

• Home Page: Displays an overview and options for victim and volunteer registration.
• Live Assistance Map: Real-time map showing victim and volunteer locations.
• Dashboard: Displays statistics on aid distribution and active volunteers.

Live Demo

You can view the live demo of the application here. (https://flood-guard.vercel.app/dashboard)

Contributing

Contributions are welcome! Please fork the repository and create a pull request for any changes you’d like to make.

Contribution Guidelines

1. Fork the repository.
2. Create a new feature branch:

git checkout -b feature/YourFeature

3. Commit your changes:

git commit -m 'Add new feature'

4. Push to the branch:

git push origin feature/YourFeature

4. Create a pull request.

License

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