Google Maps Scraper - Frontend

A sleek and efficient frontend interface for scraping business names, phone numbers, addresses, and websites from Google Maps.
It works with the Node.js backend and provides real-time WebSocket logs, CSV download, and cancel functionality.

---

Features

• Real-time log updates via WebSocket
• Auto CSV file download
• Cancel scraping mid-run
• Works locally or in production (Vercel / AWS Amplify)

---

Tech Stack

Layer	Technology
Frontend	React + Vite
Hosting	AWS Amplify or Vercel
Communication	WebSocket (with backend)

---

Folder Structure

frontend/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── assets/
├── vite.config.js
├── index.html
├── package.json
└── .env

---

Environment Variables

Update .env file in frontend:

Local Development

VITE_BACKEND_URL=http://localhost:4000

Production

VITE_BACKEND_URL=https://backend.onrender.com

---

Local Development

# Install dependencies
npm install

# Start frontend
npm run dev

Then open the browser at:

http://localhost:5173

---

Deployment Guide

1. Push frontend folder to GitHub.
2. Deploy on Vercel or AWS Amplify.
3. Set environment variable:

VITE_BACKEND_URL=https://backend.onrender.com

4. Build and deploy.

---

License

MIT License © 2025 [FluxMessenger]