DEV Community

Cover image for My first laravel + vue App
Jumzeey
Jumzeey

Posted on • Edited on

My first laravel + vue App

If you are a beginner in development and you are yet to build your first project, what are you waiting for? give it a shot, even if it has to do with following up a tutorial project, add some spice to it along the way. This project was inspired by andre Madarang youtube channel (https://www.youtube.com/playlist?list=PLEhEHUEU3x5pYTjZze3fhYMB4Nl_WOHI4). The fact that it was a project made by following his youtube tutorial, doesn't mean it was easy. There was quite a boatload of hiccups and obstacles along the way, which almost made me give up on the project. But, I really wanted to complete this project of mine. I really wanted to assign such accomplishment to myself, all of which kept driving me to continue.it began with a mindset of wanting to learn laravel PHP framework, I downloaded several books, but they weren't giving me the push I needed, then I decided it's best I challenge myself big time. Then, my next step was to go to youtube, on searching for laravel, brad traversy media's laravel course came up (https://www.youtube.com/playlist?list=PLillGF-RfqbYhQsN5WMXy6VsDMKGadrJ-). I followed up his tutorial, and I can tell you, he was really good, but deep down inside I needed something much more advanced, something that pose to become a real challenge. On the quest for this, andre course showed up. At first, the course is based on building aa movie app, using TMDB's Api and laravel 7 HTTP client, this alone was enough to spike my interest. So, I was like well..... Let's get to it. We started out by first installing all the needed dependencies, compiling the needed assets via webpack and then building out the UI using Tailwind CSS. This is the first of hearing about tailwind CSS, I wasn't ready to learn a new CSS framework, so I decided to follow up using my knowledge of bootstrap, to cut the long story short, I just decided to give Tailwind a try and it turned out to be great. Along the way, some of the obstacles I faced was integrating laravel livewire (for the play trailer button) and alphine js(for the search component). Eventually, I decided to use my very own vue js to write out the search component, using a step by step guide from (Christain Nicholas - create a searchable dropdownlist-medium)article, which also increased my problems.

  1. vue js doesn't use blade routing.
  2. I had to learn Axios, in order to call the search API endpoints into laravel. Alt Text To fix the issue of routing in vuejs, vue router wasn't an option for I wasn't building a SPA, so I had to parse the link manually. All in all, it was a really good experience, tackling problems and debugging the app, really gave me a sense of purpose, of wanting to become a developer. Do check out the app at https://zonamv1.herokuapp.com/. I plan to release more features to it in the nearest future. Explore, but please don't break. if you ever want to learn a new framework, try watching a project being built out of it, to begin with, then venture into whichever method works best for you.

Top comments (2)

Collapse
 
mdhesari profile image
Mohammad Fazel

Good job! Keep going there

Collapse
 
jumzeey profile image
Jumzeey

thank you