SPA Tutorial Update 3

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]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[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!