Have data comply with the GeoJSON format to allow data export.

This would help people export coffee shops to their own personal maps, for example on uMap or Google Maps.

⚠️ the problem is that I'm fetching coordinates from OSM, they're not in my JSON file to start with... Could I imagine a two-step process where first, the data is fetched from OSM, and subsequently added to a JSON file that complies with GeoJSON?

Validate form with Yup
Can be of use: article

Don't display the Not Found message before state has been fetched from firebase.

Currently, a popup opens when clicking a marker (layer.click).

I want a tooltip to appear when hovering a marker with the café's name, and a click event (react-leaflet events docs) to trigger a state change in App that renders:

1. If logged in, an edit form for the clicked café
2. If not logged in, the details of the clicked café

Unicode icons look good on Firefox but they're ugly on Chrome 🙁

• Fetch coordinates
• Fetch URL (website or, if unavailable, Facebook page)
• Fetch opening hours

Feedback received: make it more natural

• text next to icons in ViewCafe
• faster title popup for PanelIcons

• set box-sizing to avoid padding interfering with layouts

Render a pace-like progress indicator while fetching cafes from Firebase

For now, simply add a breakpoint where the panel will cover the map entirely instead of a fraction of it.

Instead of an unreadable opening_hours string, render something like this

• legible text (part of #14)
• meta tags

@firebase/database: FIREBASE WARNING: set at /some/path failed: permission_denied

State is correctly cleared on logout, but I think that re-base is attempting to clear the firebase data too (hence the errors).

This should not happen, since I'm removing the firebase binding here.

i.e. change the icon or place a popup for the marker whose osm id is state.clicked

Also rename clicked into active

... and then work on a web form to add coffee shops (#6)

Think about a system to save each created coffee shop (object) on Github, Staticman style. (Staticman?)

Style admin panel with this

Done in some components, check that it's up to date everywhere

This typically means that a café has closed. What would happen attempting to fetch it?

Making a small function locally will probably be quicker that importing everything manually into Firebase

Lost in the transfer to a React-based app

To reproduce, visit the map and hover a café.

On any second hover event, the tooltip is properly positioned on tooltipAnchor.

Routing with react-router params (declared as path:"/:myParam" and accessed as props.match.params.myParam) breaks on the deployed app.

Accessing /:myParam should render the <ViewResume /> component and either fetch a resume or show an error message.

Instead, it lands on a GitHub 404.

List a selection of cities (set in Firebase) in a Leaflet control to re-center the map on the chosen city.

Write about the project in an about page.

Also fetch and display total number of coffee shops, and total number of coffee shop additions to OpenStreetMap.

https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

(to do when everything else is functional)

The best case scenario would be to use the LocalStorage API to save whether a user has visited before or not.

• If yes, simply display the map.
• If not, open up the Panel and display a welcome message.

Another, simpler but not ideal solution would be to show this message to all visitors, new and returning alike, by setting the panel status as open by default in App.js

That would be nice 🙂

Main question: where to host them?

Use Leaflet.markercluster

The solution, in this case, is to hide the overflow on a parent element, rather than relying on the hidden overflow on the body.

?

• use react-router
• better for linking to a specific café, for SEO, and for analytics

logout() should only disable the possibility of editing cafes, but keep them on the map.

Similar to how I am already pulling coordinates, just like I was doing it in the old version of robinmetral/coffee

Add a feature to filter coffee shops by:

• price
• laptop-friendliness
• coffee drink option (filter and latte)

Highlight coffee shops that fit the filtering (maybe set the icon for other coffee shops in grayscale?)

Nice to have (or for later): display results as a list in a sidebar

I'm trying to learn flow and use it in this app.

However I can't stop it from screaming at my styled-components (see StackOverflow).