I Built Full Stack Application with Laravel, Vue 3 and Tailwindcss

⭐⭐Project Source code⭐⭐

🤝Support me by subscribing🤝

Table of Contents
00:00:00 - Intro
00:00:25 - Demo
00:05:14 - What you will learn
00:09:21 - What is Hostinger
00:13:52 - Setup Hosting and Domains
00:17:32 - Setup Laravel Project
00:21:04 - Setup Vuejs Project
00:21:55 - Setup Vuex
00:24:18 - Add Tailwindcss
00:26:10 - Add Vue Router
00:28:52 - Vue Components (Login, Register, Layout)
00:32:42 - Redirect to Login Page
00:40:03 - Create Layout and Navbar
00:48:10 - Create Reusable PageComponent
00:50:48 - Generate Migrations
00:53:43 - Signup on Backend
00:56:51 - Signup on Frontend
01:04:28 - Login on Backend
01:06:36 - Login on Frontend
01:20:09 - Logout on Backend
01:22:05 - Logout on Frontend
01:23:46 - Define Surveys Structure
01:27:31 - Create Survey Pages
01:31:00 - Survey Card with Tailwindcss
01:34:04 - Create Survey Form
01:41:48 - Start Working on Questions
01:44:00 - Display Question inputs
01:47:48 - Render Question Type Select
01:47:37 - Render Options for question
01:56:23 - Add Question, Delete Question
02:01:59 - Laravel Survey CRUD
02:12:03 - Save Survey in Vue
02:16:21 - Add Image to Survey
02:36:53 - Survey Update in Vue
02:47:56 - Show Loading on Survey View
02:50:45 - Survey Delete in Vue
02:54:18 - Get Surveys From Backend
03:03:34 - Implement Saving Questions
03:22:52 - Show Notification on Survey Update
03:28:23 - Add Animations
03:30:19 - Implement Pagination
03:39:00 - Create Survey Public Page
03:45:22 - Implement Get Survey By Slug
03:52:45 - Display Questions on Public Page
03:59:14 - Implement Saving Answers
04:12:24 - Implement Dashboard
04:28:00 - Fix Dashboard Bugs
04:35:26 - Show Validation Errors
04:49:42 - Prepare Vue for Production
04:53:39 - Deploy Frontend
04:55:25 - Deploy Backend
05:15:41 - Add .htaccess for Vue routing
05:17:52 - The End

🖱️Follow me on social media:🖱️

Check my Github:

Please Take the Survey

[terterola]

Just documenting TROUBLESHOOTING I had that might be useful to someone else:

24:45 - If tailwind formatting does not work, try this: when adding the content values to the tailwind.config.js, pay hight attention to copy the code from the tab USING VUE of the Tailwindcss website. There are two tabs, near the top of the page. One is "Using React", the other one is "Using Vue". You can also add manually the extension "vue" to the list. That is the difference that causes tailwind not to work in this VUE project.

26:25 - If the header context menu does not work properly (when clicking the user picture), again, it is because you didn't copied the VUE version of the code. Pay attention that next to the COPY icon (button) there is a dropdown where we must select VUE to copy the full code that represents the entire component (with the TEMPLATE and SCRIPT sessions)

01:05:45 - When adding the Auth call, an error rises on the editor, something like "undefined type auth". For those who are new to PHP/Laravel, things like this can be tricky. But the solution is easy. Just add use at the top of the file.

[bartff]

one hour through and I'm pretty impressed about how much work you put in these videos

[jdmpanthers]

Writing this comment when only 9 minutes into the video and I can already tell that you are going to be more helpful and thorough than 99% of YouTube programming tutorial makers! I'm excited to get through the whole guide, it's exactly what I need to get back into programming after a few years off!

[zoltanhorvathandsomenumbers]

This video is utterly useful for me as a software developer to help me understand things better.

[Wojtasvx]

Thanks for tutorial, I have been waiting for simple app with Vue 3 + Laravel. Thanks for all you are doing for the community.

[sayedahmadnaweed]

I am about to completed it. It took me at least more than 50 hours studying, watching, rewatching, researching and following alone coding. If it is not the best tutorial, but it could be a best tutorial for learning vue3. Be careful newbies to not dive into this tutorial without any prior basic vue3 knowledge. Otherwise you may quit in the middle. Thank you @TheCodeholic for your immense effort.

[mrxmrx]

Best stack! Most popular and common use. Didn’t watch yet but I’m sure u did a great job!

[tukeidavid]

The first ten minutes, you gave me the energy to follow and watch the all toturial. Thank you

[maxnicolaev]

used to code for a couple of years and at some point due to poor project management I gave up on coding and did a career break. I start off with your tutorial and hopefully to get that burning desire of coding back!

[topalek]

Спасибо большое за такое видео. Долго ждал новых уроков на канале, с возвращением)))

[joshuankrumah-buadu]

Your approach is a senior developer approach. Great job.

[hristov]

Great stuff man! I made online shopping application with Vue and Laravel for my semester project & I wish this video dropped before I presented it to my teacher, so I can take some ideas and implement them in the project but whatever, lol. It still doesn't stop me to learn something valueble. Keep it up 👍

[leminhman]

You are the savior of my life this is the 2nd series I learnt from you and it totally works out fine for me. Very detail and I could learn from 0 knowledge of the framework. Keep up the greate spirit.

[davidsyengo]

Thanks alot!
Between 1:09:00 to 1:13:00, that's a good example of the S and O in SOLID pattern, you've changed from fetch API to Axios without affecting other code in the login and register components. Genius!

[ayoubakkal]

im literally here because im struggling so much about linking laravel auth with vue, i will give you my review as soon as i finish the video
edit :
after finishing the video the only thing i have to say is perfection i love how much your code is clean, you gained a subscriber.

[jimson]

because the tutorial is so compact its will not be easy for beginners to digest the coding methodology logic and path of the project.

[maruf]

I had not seen a tutorial like this. This is a perfection

[dipenparmar]

Aswsome tutorial so far for laravel, Vue. A to z real real world project, . Thank you for your efforts... Amazing

[thatsenam]

You are almost nearly close to Brad Traversy. Best of luck buddy. Loved you content.

[jamestangeres]

Excited to tackle this new valuable video. I started watching your tutorials after I watched your video about PHP roadmap. I like the way you explained the topics, easy to understand. God bless as always. Thank you Sir Zura, from phil with ❣️