Eden Prairie Playground Finder App

This repo is for the frontend user interface for my MS Capstone Project, Eden Prairie Playgrounds. This web app is designed to allow families and outdoor enthusiasts with the opportunity to find and explore all 29 public playgrounds in the community of Eden Prairie, Minnesota.

Link to live project

epplay.today

App Features

📍 Find all 29 Playgrounds in Eden Prairie, even the ones that don't show up on Google Maps

🔍 Search for Playgrounds based on Distance, Equipment, Amenities, and Sports

🧑‍🦽 Locate Playgrounds with Accessible Features to find the best place to play

🅿️ Get directions to the exact location of the Playground, not the park's street address

🚲 Choose your route based on your preferred mode of travel

⚠️ Report on-site maintenance issues directly to the city

Screenshots

Project Materials

Watch a short project overview walkthrough

Check out the backend FastAPI app repo

Use the interactive API documentation

Supporting Documents

Project Proposal

Project Plan

Project Executive Summary

Tech Stack

• React.js
• Leaflet.js
• react-leaflet
• Material UI
• Geoapify
• Mapbox/ESRI (basemaps)

Project Structure and Contents

site/
├── public/
│       ├── CNAME
|       ├── favicon.ico
│       ├── index.html
│       ├── manifest.json
│       └── logo.txt
└── src/
        ├── /components
        |     ├── /FilterDrawer
        |     |      ├── AccordionTemplate.js
        |     |      ├── DistanceSlider.js
        |     |      ├── EquipmentCheckboxList.js
        |     |      ├── FilterAccordion.js
        |     |      ├── FilterDrawer.js
        |     |      ├── FloatingButton.js
        |     |      └── ParkButton.js
        |     ├── /Map
        |     |      ├── /LeafletLayers
        |     |      |     ├── LayerControl.js
        |     |      |     ├── LocationMaker.js
        |     |      |     ├── PlaygroundMarker.js
        |     |      |     └── UserGuide.js
        |     |      ├── /ParkPopup
        |     |      |     ├── AddressBlock.js
        |     |      |     ├── AssetTable.js
        |     |      |     ├── EquipmentCard.js
        |     |      |     ├── InfoBox.js
        |     |      |     ├── ParkCard.js
        |     |      |     └── ParkCardActionBar.js
        |     |      └── /StaticLayers
        |     |            ├── PlaygroundPolygons.js
        |     |            └── TileLayers.js
        |     ├── App.js
        |     ├── NavBar.js
        |     └── ApiQuery.js
        ├── /data
        |     └── ep_boundary.json
        ├── /images
        |     ├── /icons
        |     |     └── ...svg elements
        |     ├── /leaflet
        |     |     └── ...leaflet base icons
        |     ├── /playgrounds
        |     |     └── ...images of playgrounds
        |     └── hero.png
        ├── App.css
        ├── index.css
        ├── index.js
        └── reportWebVitals.js   

/public contains resources for site hosting and publication.

/src contains website source code, including all custom React components, images, data, and api loading.

This project was bootstrapped with Create React App.