Frontend Developer – Playground Finder UI (Uber-style Map, Directions, and Add Spots)
Budget: €30 – €250 EUR
Project Overview:
We’ve completed the backend (MongoDB + Node API).
Now we need a frontend developer to build the mobile-first web app UI using our clear mockups, design style, and feature list.
This is a real app used to find outdoor sports spots in Finland (football fields, basketball courts, etc).
You’re not here to design — you’re here to implement it smoothly, cleanly, and responsively, like an Apple/Uber-style app.
What You’ll Build:
1. Full-Screen Map (Home View)
Dark-themed map (Google Maps or Mapbox)
Auto-center to user’s GPS on open
Emoji-style markers for each spot:
Football
Basketball
frisbee golf
Map must support satellite view and zoom smoothly
Smooth loading animation while data fetches
2. Marker Popup
When user taps a marker:
Show smooth bottom popup card (Uber-style slide animation)
Popup includes:
Emoji icon + Title
Short description
Image carousel (user can swipe multiple images of the spot)
“Get Directions” button → Should open in Google/Apple Maps or use in-app route view via Directions API
3. Sidebar (“Hamburger” Menu Button)
3-line menu icon on top-left opens left sidebar
Sidebar includes:
Clean list of all locations with emoji, title, and distance (e.g. “ Kamppi Court – 0.2 km”)
Filter system:
User selects one or more categories (e.g. football + basketball)
After pressing “Done,” map reloads showing only selected types
4. “Near Me” Button
Appears in sidebar or directly in UI
Re-centers map and reloads only nearby spots (within 5km)
→ Uses backend endpoint: /api/nearby?lat=...&lng=...
5. Add Location Feature (Basic)
Build a simple form (can be hidden or admin-only) to add test locations:
Fields: emoji, title, image URL, description, coordinates
For now, only a few may be added manually — real spots will be added by us via MongoDB Atlas
Dev Requirements for Long-Term Control:
Must fetch all marker data dynamically from backend
→ No hardcoding – frontend should auto-update when we add new locations
All API and map config (keys, endpoints) must go in a central config.js or env file
Code must be clean, modular (separate map, card, sidebar files)
Graceful fallback: show “no results nearby” or handle empty/error states
Final version should be:
Hosted on Netlify, Vercel, or Replit for testing
Delivered via GitHub or zipped folder
Future-proof: Structure should allow us to easily add an admin panel later if needed
Budget:
€50–150 total
Deadline: 5–7 days
Must look and feel like a polished final product. I have mockups on what it needs to look like in visual side.
We’ve completed the backend (MongoDB + Node API).
Now we need a frontend developer to build the mobile-first web app UI using our clear mockups, design style, and feature list.
This is a real app used to find outdoor sports spots in Finland (football fields, basketball courts, etc).
You’re not here to design — you’re here to implement it smoothly, cleanly, and responsively, like an Apple/Uber-style app.
What You’ll Build:
1. Full-Screen Map (Home View)
Dark-themed map (Google Maps or Mapbox)
Auto-center to user’s GPS on open
Emoji-style markers for each spot:
Football
Basketball
frisbee golf
Map must support satellite view and zoom smoothly
Smooth loading animation while data fetches
2. Marker Popup
When user taps a marker:
Show smooth bottom popup card (Uber-style slide animation)
Popup includes:
Emoji icon + Title
Short description
Image carousel (user can swipe multiple images of the spot)
“Get Directions” button → Should open in Google/Apple Maps or use in-app route view via Directions API
3. Sidebar (“Hamburger” Menu Button)
3-line menu icon on top-left opens left sidebar
Sidebar includes:
Clean list of all locations with emoji, title, and distance (e.g. “ Kamppi Court – 0.2 km”)
Filter system:
User selects one or more categories (e.g. football + basketball)
After pressing “Done,” map reloads showing only selected types
4. “Near Me” Button
Appears in sidebar or directly in UI
Re-centers map and reloads only nearby spots (within 5km)
→ Uses backend endpoint: /api/nearby?lat=...&lng=...
5. Add Location Feature (Basic)
Build a simple form (can be hidden or admin-only) to add test locations:
Fields: emoji, title, image URL, description, coordinates
For now, only a few may be added manually — real spots will be added by us via MongoDB Atlas
Dev Requirements for Long-Term Control:
Must fetch all marker data dynamically from backend
→ No hardcoding – frontend should auto-update when we add new locations
All API and map config (keys, endpoints) must go in a central config.js or env file
Code must be clean, modular (separate map, card, sidebar files)
Graceful fallback: show “no results nearby” or handle empty/error states
Final version should be:
Hosted on Netlify, Vercel, or Replit for testing
Delivered via GitHub or zipped folder
Future-proof: Structure should allow us to easily add an admin panel later if needed
Budget:
€50–150 total
Deadline: 5–7 days
Must look and feel like a polished final product. I have mockups on what it needs to look like in visual side.