Before I kick off this series, I want to explain the background of what we are building. I’m a coffee fanatic and I’m always looking for the newest micro roast or specialty brew to try. In this series we will be building an application to help coffee-holics find their fix. We will be implementing Google Maps, some GIS, a few social aspects, user submission process, and a whole bunch of cool features ending with a mobile app at the end. I like to approach app development with the mindset of “begin with the end in mind”. Ask yourself, what do you want to build? It will help motivate and keep the momentum going. I definitely have more than enough ideas for loads of tutorials, so hopefully you will enjoy the ride and please, please provide feedback and updates.
This tutorial will be 100% open source. All code for our application can be found here: https://github.com/serversideup/roastandbrew. Every feature added to the application will include a tutorial in this series. You can view the final application here: https://roastandbrew.coffee and soon hopefully download a mobile app. If you like the tutorial, sign up for our mailing list ServerSideUp Mailing List, we are writing a book on API Driven development and will dive in a lot deeper to the progress.
A mobile app you ask? Well that brings me to the next point of why a single page application and API driven. I’ll start with the API driven. The reason I like to develop API driven applications is because the data is consumable from practically anywhere whether you write the code or someone else does. This is HUGE for scaling purposes and code maintainability. With Laravel and Laravel Passport the process of setting up a secure oAuth server is insanely easy: https://laravel.com/docs/5.4/passport.
I’m looking forward to writing this tutorial series. It can be consumed in a modular way and tweaked to what you want, but this is my approach. The articles are in the order I published them, but feel free to jump around to what you need and of course ask questions as needed.
A functioning webserver with the ability to install Laravel 5.4 https://laravel.com/docs/5.4/installation.
- Installing and Configuring Laravel For a Single Page Application
- Installing And Configuring Laravel Socialite
- Installing and Configuring Laravel Passport
- Configuring JS and SASS for a Single Page App
- Structuring Vue 2, Vue Router, Vuex for a Single Page Application
- Configuring Vue Router for a Single Page App
- Add Laravel API End Points
- Build a Vuex Module
- Using Vuex Modules Inside Components
- Building a Page Layout for Vue Router
- SPA Tutorial Progress Update
- Using SASS in Vue Components with Laravel Mix
- Geocode An Address With Google Maps
- Displaying Resources on a Google Map With Vue JS
- Custom Markers on Google Map
- Custom Google Maps Info Windows
- SPA Tutorial Update 2
- Many To Many Relationships With Laravel
- Dynamic Forms with VueJS
- Eloquent Parent Child Relationship in Laravel
- Favoriting or Liking With Laravel and VueJS
- Tagging With Laravel
- Implementing the Vue JS Tag Component
- Vue JS Tag input
- SPA Tutorial Update 3
- Filtering with VueJS Mixins
- Re-using VueJS Mixins and Filtering Google Map Data
- Customize Google Map Info Windows