Flood Map Visualization Project

This project is a starting point for building a flood map and heat‑map web application. It’s designed for a hackathon environment where you might want to quickly prototype a front‑end in React/JSX and a back‑end in Python for data processing and future machine‑learning (ML) tasks.

Overview

• Front‑end (React/JSX) – Lives under the frontend/ directory. It’s set up as a typical React app with a home page component and placeholders for map and heat‑map components. The front‑end uses React Router for navigation and React Leaflet to render interactive maps on top of Leaflet. It also includes axios for making HTTP calls to the back‑end.

• Back‑end (Python) – Lives under the backend/ directory. It uses Flask to provide a simple API endpoint (/api/flood_data) that returns example geographic points with intensity values. The ml/ subdirectory contains placeholders for ML code and training scripts you can expand later. A requirements.txt file lists the Python dependencies.

• Domain and Hosting – During many Major League Hacking (MLH) events you can claim a free custom domain for a year. MLH’s Domain.com partnership lets participants register .com, .net and other domains using a promo code: go to Domain.com’s MLH landing page and search your desired domain. At the billing screen, set the registration period to one year and enter the event’s promo code to reduce the price to $0【577755454228724†L150-L160】. Alternatively, MLH and GoDaddy Registry offer free domains ending in .co, .us, .biz, .courses or .study for a year – visit tech.study to search for an available name and sign up through their registrar partner Porkbun; no credit card is required【418398544552487†L68-L104】.

Structure

flood_map_project/
│
├── backend/
│   ├── app.py               # Flask app exposing API endpoints (e.g. /api/flood_data)
│   ├── requirements.txt     # Python dependencies for backend and ML
│   ├── ml/
│   │   ├── __init__.py
│   │   ├── model.py         # Placeholder for ML model definition/loading
│   │   └── train.py         # Placeholder script to train your ML model
│   └── utils/
│       ├── __init__.py
│       └── data_processing.py  # Functions to clean/prepare flood data
│
├── frontend/
│   ├── package.json         # NPM dependencies for React app
│   ├── src/
│   │   ├── index.jsx        # Entry point for React application
│   │   ├── App.jsx          # Main application component with routing
│   │   └── components/
│   │       ├── HomePage.jsx   # Simple home page component
│   │       ├── MapView.jsx    # Component to render map and markers
│   │       └── Heatmap.jsx    # Component to render heat‑map overlay
│   └── public/
│       └── index.html       # HTML template used by React
│
└── README.md               # This file

Getting Started

Backend

1. Create a Python virtual environment:

   cd flood_map_project/backend
   python3 -m venv venv
   venv\Scripts\activate.bat
   pip install -r requirements.txt

2. Start the Flask server:

   set FLASK_APP=app.py
   set FLASK_ENV=development
   
   flask run --port 3000

   By default, the API runs on http://localhost:3000. The GET /api/flood_data endpoint returns a small JSON payload of example flood‑intensity points.

Front‑end

1. Install the dependencies:

   cd flood_map_project/frontend
   npm install

2. Run the development server (using vite):

   npm run dev

   The React app will be available at http://localhost:5050 by default. It fetches data from the Flask API on localhost:3000 and displays markers on a Leaflet map.

Bringing It Together

Use the free domain you register through Domain.com or GoDaddy Registry to point to your deployed app. When you’re ready to deploy, you can host the back‑end on a platform like Render or Fly.io and the front‑end on Netlify or Vercel. Set up DNS records in your domain registrar to route your domain to the hosting platform’s URL. The instructions from MLH emphasise that domain registration is free for one year when you use the hackathon promo code【577755454228724†L150-L160】 or claim a .study/.co/.us domain via GoDaddy Registry【418398544552487†L68-L104】.