React app (Google Map + Clustering)

Description

Frontend focused project for people in need which provides map with humanitarian aid centers. I've been working hard to provide the best client experience observing points on Google Map: I added custom point markers, clustering for group of markers, hover animations etc. I encountered some bugs in @react-google-maps/api library but interactive map still works good with it. But ofc here is room for improvement.

Main used technologies:

• React 18 (Plain react)
• TypeScript
• Google Maps API (Map components & geocoding)
• SCSS modules (Styling)

Key Features

• Animated Landing page
• Integrated Google Map view
• Custom map markers
• Clustering for group of markers on different zoom level
• List of centers of help
• Fully responsive UI
• Error handling on client

Setting up

1. Step 1: Install all dependencies npm i
2. Step 2: Define Google Map API Key in public/.env file.
3. Start the app npm start

Screenshots