I’ve made some progress on the frontend interfaces for logging a coffee/rating a cafe and the cafes section for managing your preferred cafes.
The coffee counter cup is now a working Vue component. The proportions will need a little bit of media query love to work at different sizes, but the main features of the interaction, the long shadow and the chamfer curved buttons are all in place ????
The Cafe component of this UI will need a reasonable amount of backend work to function in order to auto-suggest cafes based on name and location.
I’m hoping that allowing users to enter new cafes not yet in the DB will be fairly straight forward. There’s a chance that managing duplicate or incorrect data could require additional processes beyond standard CRUDing. We’ll see.
My Cafes
This is my first use of Vue Router to provide a semi SPA type structure to this page. The Recent / Favs / To Try links are Vue Router links which dynamically swap out the component below for the appropriate content. Vue Router handles updating the browser URL to maintain back button functionality. I had to put a bit of work into detecting the current route in order to swap out the icon SVG symbol. All the icons on this screen including the active state color versions are referenced from a single SVG sprite.
I’m really happy with this approach for both performance and maintainability reasons. I can create different color variations of symbols directly in the SVG code without needing to use Sketch.
To lower the barrier to entry for using HadCoffee.com I’d like to allow anonymous users to be able to save cafes to their favs/to try lists as well. I’d likely just store cafe ids in localStorage and expand that data from the server.
Signed up users will have the more robust backend storage of all this data.