BigMap ist eine interaktive React-Anwendung, die alle McDonald's Standorte in Deutschland visualisiert.
Ziel ist es, Besuche zu dokumentieren, Fortschritte zu tracken und spielerisch ganz Deutschland zu „erobern“.
- Kartenansicht mit allen McDonald's-Filialen in Deutschland
- Standort-Details: Öffnungszeiten, Adresse, weitere Infos
- Besuchs-Tracker: Markiere besuchte Restaurants als „erledigt“
- Regionale Färbung: Bereiche auf der Karte färben sich grün, wenn der nächste McDonald's besucht wurde
- Account-System mit vorgefertigten Accounts zur Anmeldung
- Fortschrittsanzeige: Überblick, wie viele Restaurants bereits besucht wurden
- React + TypeScript (Frontend-Framework)
- Leaflet.js (Kartenbibliothek)
- GeoJSON (Datenbasis der Standorte)
- Node.js / Express (Backend-Server)
- JSON-Server (Mock-Datenbank für Accounts und Standortinfos)
- CSS/Styled Components (UI-Design)
- Repository klonen:
git clone https://github.com/ByCalis/BigMap.git
cd BigMap- Abhängigkeiten installieren (Frontend + Backend):
# im Root-Verzeichnis
npm install
# ggf. in /frontend oder /backend separat
npm install- Entwicklungsserver starten:
# Backend (Mock-API)
node server.js
# Frontend (React-App)
npm start- Anwendung öffnen unter:
http://localhost:3000
- Mit einem der vordefinierten Accounts anmelden.
- Karte erkunden und auf einen McDonald's klicken.
- Standort als „besucht“ markieren.
- Fortschrittsanzeige beobachten – und sehen, wie sich die Karte dynamisch einfärbt.
BigMap/
├─ backend/
│ ├─ server.js # Express/JSON-Server Backend
│ ├─ db.json # Mock-Datenbank für Accounts & Standorte
│ └─ package.json # Backend-Dependencies
│
├─ frontend/
│ ├─ public/ # Statische Dateien (index.html, manifest.json, icons)
│ ├─ src/
│ │ ├─ components/ # React-Komponenten (Map, Tracker, Account)
│ │ ├─ data/ # GeoJSON-Daten mit Standorten
│ │ ├─ images/ # Icons, Logos, Bilder
│ │ ├─ pages/ # Login, Dashboard, Map
│ │ ├─ App.tsx # Haupteinstieg React
│ │ ├─ McDonaldsApp.tsx# Hauptlogik für Standort-Interaktion
│ │ ├─ LoginPage.tsx # Account-Handling
│ │ └─ index.tsx # Einstiegspunkt
│ ├─ package.json # Frontend-Dependencies
│ └─ tsconfig.json # TypeScript-Konfiguration
│
└─ README.md
- Das Account-System basiert aktuell auf statischen Accounts (kein produktives Auth-System).
- Die Standortdaten beziehen sich ausschließlich auf Deutschland.
- Dieses Projekt ist ein privates Hobbyprojekt und steht nicht in Verbindung mit McDonald's.