Full Stack TikTok Clone with Nuxt 3, Vue 3, Tailwind CSS, Laravel API,, Pinia, Axios, Javascript

This is a Full Stack TikTok clone. In this tutorial, I'll walk you through how to create a Full Stack TikTok clone using Nuxt 3, Vue 3, Tailwind CSS, Laravel, Pinia, and Axios. We'll also cover how to handle video uploads, crop images using Vue Advanced Cropper / vue-advanced-cropper on the front end, and PHP / Laravel Intervention Image on the backend. Additionally, I'll demonstrate how to implement Axios interceptors to check for session expiration on the backend, using Laravel Sanctum (SPA Authentication) for stateful APIs. Follow along with me as I create a fully functional TikTok clone step by step, and learn the essential skills you need to build similar apps. Subscribe to the channel and hit the notification bell to be notified when we upload new tutorials.

LIKE!!! SUBSCRIBE!!! SMASH THE NOTIFICATION BELL!!!

And I'll see you in the video!

For freelance or contract work inquiries, kindly connect with me via Twitter / X:
Thank you.

GitHub Repo:

00:00 - TikTok Clone Project setup
07:29 - Nuxt Layouts / MainLayout | Nuxt 3 | Vue JS | Tailwind CSS
07:49 - TopNav Component | Nuxt 3 | Vue JS | Tailwind CSS
17:35 - SideNavMain Component | Nuxt 3 | Vue JS | Tailwind CSS
19:12 - MenuItem Component | Nuxt 3 | Vue JS | Tailwind CSS
21:49 - SideNavMain Component | Nuxt 3 | Vue JS | Tailwind CSS
22:31 - MenuItemFollow Component | Nuxt 3 | Vue JS | Tailwind CSS
24:37 - SideNavMain Component | Nuxt 3 | Vue JS | Tailwind CSS
27:02 - PostMain Component | Nuxt 3 | Vue JS | Tailwind CSS
33:45 - Upload Page | Nuxt 3 | Vue JS | Tailwind CSS
51:33 - Profile Page | Nuxt 3 | Vue JS | Tailwind CSS
56:42 - PostUser Component | Nuxt 3 | Vue JS | Tailwind CSS
1:02:09 - Post Page | Nuxt 3 | Vue JS | Tailwind CSS
1:17:19 - AuthOverlay Component | Nuxt 3 | Vue JS | Tailwind CSS
1:19:34 - Login Component | Nuxt 3 | Vue JS | Tailwind CSS
1:20:05 - TextInput Component | Nuxt 3 | Vue JS | Tailwind CSS
1:22:49 - Login Component | Nuxt 3 | Vue JS | Tailwind CSS
1:34:35 - Register Component | Nuxt 3 | Vue JS | Tailwind CSS
1:27:09 - Pinia Stores setup / User / Profile / General
1:29:23 - Nuxt Plugins | Adding Pinia stores to a plugin
1:30:39 - Nuxt Plugins | Adding Axios to a plugin
1:31:29 - Using plugins in app
1:33:59 - Using Pinia Plugin Persistedstate
1:34:27 - EditProfileOverlay Component | Vue Advanced Cropper
1:49:00 - Laravel API Setup | Laravel Sanctum (SPA Authentication)
1:59:05 - Pinia Login / Register / Logout
2:09:52 - Laravel create UserController
2:03:15 - Laravel Collections create UsersCollection
2:24:37 - Laravel migrations update user migration
2:05:37 - Pinia Login / Register / Logout
2:13:23 - Axios interceptors
2:16:14 - Overflow function helper
2:18:00 - Laravel UserController
2:19:40 - Laravel FileService | Intervention Image
2:23:11 - Laravel UserController
2:23:37 - Laravel GlobalController
2:23:11 - Laravel Post Model PostController & Migration
2:27:37 - Laravel FileService | Add Video
2:28:26 - Laravel Collections | AllPostsCollection
2:32:05 - Laravel Post Model PostController & Migration
2:32:47 - Laravel ProfileController
2:34:33 - Laravel HomeController
2:35:14 - Laravel Comment Model CommentController & Migration
2:36:40 - Laravel Like Model LikeController & Migration
2:28:26 - Laravel Migrations
2:39:13 - Laravel Relations | Eloquent Relationships | OneToMany - BelongsTo
2:41:00 - Laravel API Endpoints
2:43:12 - Uploading a Post
2:48:49 - Display profile page with real data
2:56:22 - Update User Details / Image Crop from EditProfileOverlay / Vue Advanced Cropper
3:06:52 - Displaying random users in SideMenu
3:09:25 - Displaying all posts on the main page
3:15:25 - Like and Unlike post
3:18:40 - Displaying posts on the main page
3:22:14 - Update post page | Add comments | delete post | Loop through users posts
3:39:39 - Nuxt middleware Auth
3:41:00 - TESTING APPLICATION! FINISHED!

#tiktokclone
#nuxt3
#laravel

[mircast]

Dude I like your humor. Didn't expect to laught that hard at 8:39 😂"sweatin' again like an animal!!1" The stack is what I was looking for. Impressive work man!

[samuelkung]

FINALLY SOMEONE WHO UNDERSTANDS PEOPLE Who CANT CODE! Love your vids please make more!!!

[mahinchowdhury]

From the bottom of my heart, thanks John. I was looking for a course that covers Laravel and Nuxt 3 and couldn't find any good courses except yours. Keep up the good work.

[gomesbruno]

seeing this man reading all those tailwind classes in 2x speed is absolutely amazing

[reayhs]

Thank you! Currently, I am learning Nuxt3, and in 1-2 months, I plan to learn PHP and then Laravel. I hope that these courses or videos will still be available here by that time :D

[davidmutua]

At 1:17:03 you can use a local videoSrc state then set it inside onMounted i.e. videoSrc.value = "/lynx.mp4"; which triggers loadeddata event which in turn fires the watcher which plays your video. On the actual video element :src="videoSrc"

[javierbosch]

You are hilarious. Loved the start of your video. I'll be sure to watch it all the way through!

[piercegearhart]

This video was amazing. Would love more laravel based videos like these!

[endawekeenkuahone]

Thank you man 🙏🙏🙏. I have been learning from your tutorial. Please don't give up, do more video like Nuxt and Vuejs and backend laravel and tailwind css. They are my favorites.Thank very much

[namoudnormand]

I just discovered this guy. underrated channel keep up the hard work 💪

[prodbysmxky]

didnt know if i should learn php but you just convinced me

[vuedev]

oh hell yeah. killer work. not sure if you take suggestions but i’ve been searching for a booking application using multiple external APIs using these technologies — or inertia and vue — to no avail.

[josealeonf]

Great tutorial, thanks!
can you give a list of the vscode plugins you use?

[narekvardapetyan]

Thanks a lot bro. very interesting and helpful tutorials.

[mingxindong]

Thank you bro, another awesome clone !!!

[lesssass]

I am waiting for another big course. Thanks.

[yoskokleng]

bro just need 4h for making tiktok product and bro need 1 hour more to register the company then 1 hour more for become billionaire. haha thank you for this video.

[上岛咖啡-sb]

Just wonder how did you achieve that paste whatever you want so quickly, it is so amazing!!

[ronaldopeo]

🎉 Supper man 😮 ❤ Hope you will build tiktok mobile app with this tech 🎉🎉🎉

[alaat]

thank you man for this course, but i have question why you add dynamic class with condition "route.fullPath" i do not understand why please explain