The app for thirsty beer lovers, which will help you find the closest brewery near you and shows you how to get there. Bottoms up! You can view a live demo of the app here .
- Clone the repository
- Install the dependencies with yarn or npm:
npm install||yarn install - Run the app:
npm run start||yarn start
This app originally had one requirement which was to find the closest brewery given a certain zipcode input. I decided to extend this with map and directions functionality, because recently I had dived into the Leaflet library and thought it would be perfect for the goal of this project. Here's the feature list as I defined them at the start, based on user stories.
- Find the closest brewery based on zipcode input
- See location of all breweries on map, highlight the one closest when found
- See location of own zipcode input + closest found brewery on a map
- Know the distance between the input location and the brewery location
- Automatically set user location based on browser geolocation API (if allowed)
- Configure own location in a setup wizard at the start of the app
- Filter breweries based on whether they are open today or not
- Set my travel method (bike or car)
- Show a route between my location and closest brewery
This is a map app build with React and React Leaflet, which is an extension of the LeafletJS interactive map library. It utilizes resources from OpenStreetMap, for displaying the map and Styled Components for styling of the non map elements.
This app makes use of two external api's:
- GeoApify for finding location coordinates
- OpenRouteService for calculating routes between coordinates
Both these API's have a limited amount of requests per day, attached to an API key. For code demonstration purposes these keys are included in the repository but normally they should be in a gitignored .env file.
Finally the list of breweries comes from the supplied breweries data file. Because of the limited amount of requests on the GeoApify Api (3000 a day), I added latitude and longitude coordinates to this data for each brewery. These are loaded locally by React in this demo app and then stored in the Redux store, normalle these would probably come from an API with a GET all call.
I broke the process of making this app into three sprints:
- Input zipcode and get correct closest brewery result, show it in a simple popup to the user
#2
- Find user location and adjust map to show both the location and the closest brewery
#4
- Calculate a route based on user location or search input and show it. Make a wizard that configures it. This is the final version of the app obrewon.mivd.be
Because the challenge was to make this in one week, there's obviously still features that could be added if there was more time. Some features that I would make if I had more time:
- The app could be made more mobile-friendly, or even turned into a full native mobile app.
- Track your GPS location changes as you move about to track your route.
- Be able to not just get a route to closest open brewery but also other breweries if you want
- Have a backend that stores data about the user so it remembers when you revisit the app
- After finding a route, be able to share a link with other beer loving friends which automatically loads the app and shows the route
- Add unit tests and end-to-end tests to ensure performance of the app