Roast Designs Have Been Updated

So if you’ve visited https://roastandbrew.coffee recently, you might have noticed a major overhaul in the design. It actually looks good! It’s essentially what happens when I don’t design a product. Jay took over the design and went from there. With the new design and re-grouping on the project, I gained a lot of focus. Before I dive into what has changed, let me first say that there will be more awesome tutorials to come! When really looking at UX it opened up some new ideas on how to handle simple tasks like notifications and animations with VueJS. These are going to be the next upcoming tutorials since they are simple and really add the next level of UX.

The best thing about the redesign? Not much changed on the API side. This is the power of API driven development. You can dramatically change the front end without making core changes to your API or PHP code in general. That being said I added a few things and removed a few things that aren’t necessary any more on the API. I will explain those in this update.

As for the existing tutorials that may have features from the previous design, we will be re-building some of them, and I will update where necessary the code to match what is going on. This will be a longer process so bear with me and ask questions specifically if you need a faster response!

Where is the project going?

This is what really hung me up for awhile. I loved writing about API driven development (loads more to come on that, a book is in process that dives way deeper, sign up here: API Driven Development Early Access Mailing List ) , but I got too in depth on roast specific tutorials that were hard to use outside of https://roastandbrew.coffee. From here on out, I will be continuing to maintain https://roastandbrew.coffee and add a load of exciting features, but will focus the tutorials in a way that you can adopt for your app specifically. This should make the content more consumable for people wanting to get more into API Driven Development without re-building Roast. With that being said, let’s hop into what has been changed!

Merged Cafes Page Into Home Page

This is for simple use ability. The main focus of Roast is helping the coffee enthusiast find their next cup of coffee. A list doesn’t help find. It’s cool to browse, but the map shows coordinates. We made the list a secondary feature so if you are filtering and want to see a list it’s available, but the map is the primary focus. With this new feature, we got rid of the /home route and made the /cafes route the landing page.

Removed Info Windows

Up until this point, we had info windows that opened when a user clicked on an icon on the map. These were useful, but didn’t fit the flow of the design. They also linked to an individual cafe page that was pretty blank with limited data. Instead, we linked the markers to the cafe page directly, but made the page a simple box that overlapped on the map. This perfectly houses the data and is able to be linked to. The tutorial for using info windows in this scenario is still relevant, just not used any more.

Removed Tags and Tags Filter (for now)

Definitely coming back to this. Right now, we didn’t have a place for it in the app with the new re-design and honestly, we think we can do it better. The existing article is still useful and can be re-used in your app, but we will re-write this in a more solidified scenario and make it a little more user friendly.

Removed File Uploads

From the app, we removed file uploads for pictures. This will change. We will re-add this for cafe logos once we find a way to implement it in the designs properly. For now, the file upload tutorials still works, but for a better tutorial check out: Your Guide To Uploading Files with VueJS and Axios – Server Side Up. I dive in depth on a variety of scenarios for uploading files with VueJS and Axios

Changed is roaster? To a cafe type

This was a weird flag. We had a question when adding a cafe of if it was a roaster or not. Now we have a selection of cafe type as general cafe or roaster. Roaster just means that the company roasts their own coffee.

Migrated Parent Cafe to Company

This is one of the bigger API changes we made. We made the “parent” cafe a company. There are times and places for self referencing entities like parent-child, but for Roast we decided to break it off. The tutorial written about self referencing is still accurate, we just changed the way we structured Roast. Now we have a company table in the database. These companies can have cafes as children entities. This way it’s a one to many hierarchy.

Add one Cafe at a time

For UX right now, we looked at how cafes were added and the majority of the time it was one at a time per user. We eliminated the adding of multiple locations at the same time. This involved API changes of not looping over each cafe to add children and validating the adding of a single cafe. The tutorial on dynamic forms with VueJS is still valid, but we won’t be adding it to Roast right now.

Next Tutorials

There’s a few tutorials that I’ll be writing next for some of the features in the new design update:
* withCount() method for Laravel (super useful)
* Animista CSS Animations with VueJS Transitions
* Simple notification system for events
* Autocomplete Google Place
* Pan To Location with VueJS events and Google Maps

Conclusion

There’s been a load of updates to the design of Roast, but we love it! Feel free to reach out if you have any questions or need more information on one of the changes.

Be sure to sign up for our upcoming book API Driven Development. We will be releasing early access emails soon. There’s lots of content on our blog, but we will be taking a deeper dive into structure, use cases, and entirely new app in the book!