SPA Tutorial Update 3

Part 28 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori December 4th, 2017
⚡️ 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 Roast and Brew is coming along nicely! We are starting to get a few people using the app and some traffic which is awesome!

There are a few quick updates I made to the site outside of the scope of a tutorial.

Fixed Github Issue

There was a GitHub issue with the way the individual cafe page loaded: Clicking on one cafe entry does not show up details · Issue #1 · serversideup/roastandbrew · GitHub. Luckily this was a simple fix because the issue was I left a link in the code without completing the page.

Multiple Social Accounts

Since we are authenticating by social media accounts, there is a possibility that a user wants more than one log in. If that user used the same email for each social media account, then they wouldn’t be able to create a separate account since the email field was unique.

I made the change to remove the unique email address field since we authenticate through socialite.

Displaying Tags on Cafe Page

Since we have the tagging implemented, we should display the tags on the individual cafe page. This is a really quick to implement. First,
open the /resources/assets/js/pages/Cafe.vue component.

Right below the <toggle-like> component, add the following template:

<div class="tags-container">
  <div class="grid-x grid-padding-x">
    <div class="large-12 medium-12 small-12 cell">
      <span class="tag" v-for="tag in cafe.tags">#{{ tag.tag }}</span>
    </div>
  </div>
</div>

The styles we will add are:

div.tags-container{
  max-width: 700px;
  margin: auto;
  text-align: center;
  margin-top: 30px;

  span.tag{
    color: $dark-color;
    font-family: 'Josefin Sans', sans-serif;
    margin-right: 20px;
    display: inline-block;
    line-height: 20px;
  }
}

Now we just need to load the app/Http/Controllers/API/CafesController.php and find the getCafe() method.

In there, we need to grab the tags with the cafe so they are returned when the cafe is loaded:

$cafe = Cafe::where('id', '=', $id)
            ->with('brewMethods')
            ->with('userLike')
            ->with('tags')
            ->first();

Now we can display the tags on the cafe page.

Less Strict URL Regular Expression

In Github Issue number 2, we had a request to include a much less strict regular expression for validating website urls so I updated it to:

/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w][email protected])?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w][email protected])[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/

A little bit more complex, but it definitely works a lot better!

Future Tutorials

The next couple tutorials will involve some filtering of the cafe data on the maps page and more map customization. We will then bridge into opening up the cafe data publicly so you can use roast to search and sort cafes without an account. This will be a huge group of tutorials since we need to do a minor re-design. It makes sense though, because sometimes the user just wants to browse the data without interacting through liking or following cafes.

All code is housed here: GitHub – serversideup/roastandbrew: Helping the coffee enthusiast find their next cup of coffee. Also, helping aspiring web and mobile app developers build a single page app and converting it to a mobile hybrid. All tutorials can be found at https://serversideup.net

Book

If you are interested, we are working on compiling a book about API Driven Application Development. Be the first to know by signing up here: http://eepurl.com/eGN_6. We will promise not to spam you! The book will contain a more in depth approach to writing an API Driven Application and a few other awesome features!

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → Filtering with VueJS Mixins

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?