Roast Designs Have Been Updated

Part 39 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori May 16th, 2018
⚡️ Updated content is available We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue/NuxtJS, and Capacitor.

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!

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → Animista CSS Animations with VueJS Transitions

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or you can buy us a beer.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?