Build and Deploy a Full Stack Social Media App with Nuxt 3, TailwindCSS and Prisma | FULL COURSE
🙌 Stuck?! Join our Discord Server: https://discord.gg/5KfYYcCaD4
💰 Make money coding with fiverr : https://iwd.sh/fiverr
We are going to be making a Social Media App (a Twitter clone) and you will learn how to build the best and most modern one using Nuxt 3, Tailwind CSS and Prisma simply by watching this course.
Our Social Media Application includes Auth made from scratch using JWT the ability to create posts , upload images using cloudinary , nested posts , searching functionality , post details page, responsive design using Tailwind css and much more.
💰 Get 100$ of FREE Credit with Linode : https://iwd.sh/linode
📚 Materials/References:
Assets: https://gist.github.com/hassnian/a8ef7f243dcc933887b31af77e73df29
Code: https://github.com/insidewebdev/twitter-clone
⌛️ Timestamps:
00:00 - Intro
02:00 - Freebie
02:22 - Demo
05:41 - Installing Nuxt 3
06:56 - Installing TailwindCSS
08:16 - App overview and starting left sidebar
45:52 - Starting right sidebar
01:14:57 - Creating main section
01:30:00 - Prisma setup and starting with auth and nitro server
02:02:54 - Creating auth page and implementing refresh tokens
02:55:10 - Adding tweet model and tweet creation logic
03:15:12 - Adding tweet form
03:48:27 - Starting with tweet list feed logic
04:23:56 - Starting tweet item component and tailwind classes issue
04:55:34 - Backend get tweet endpoint
05:06:01 - Starting tweet details page
05:35:28 - Creating tweet modal component
06:04:27 - Creating tweet search page
06:24:51 - Adding logout functionality and fixing auth form
06:40:28 - Deployment
👉 Checkout Insidewebdev on social:
Instagram: https://iwd.sh/ig
Twitter: https://iwd.sh/twitter
Facebook: https://iwd.sh/fb
GitHub: https://iwd.sh/github
Discord community: Coming soon..
Website: https://insidewebdev.com
👨⚖️ Disclosure
This video might have affiliate links . This means that if you buy or signup from my link, I will get a small commission at NO EXTRA COST TO YOU. Thank you for supporting me!
--
Тэги:
#javascript #master_javascript #mongodb_tutorial #full_stack #nuxt_3_app #nuxt_3_app_authentication #nuxt_3_tailwind_prisma #nuxt_3_tutorial_for_beginners #nuxt_3_application #full_stack_nuxt_prisma_application #nuxt_3_crash_course #full_stack_social_media #insidewebdev #vue_full_stack #nuxt_3 #nuxt_3_tutorial #nuxt_3_course #prisma_auth #javascript_for_beginners #prisma_tutorial #tailwind_css #tailwind_css_tutorial #nuxt_course #nuxt_3_full_courseКомментарии:
When I try to get event.context.auth.user in user.get.js, i get an error that its undefined. Is there a new way of setting it or accessing it?
Ответить
大神你这个教程可太棒了，虽然听不太懂，依然照着敲了一遍
Ответить
Note that retrieving cookies has changed. Now, you need to do something like:
import { parseCookies } from "h3"
export default defineEventHandler(async (event) => {
const cookies = parseCookies(event)
const cookie_value = cookies.cookie_name
return {
desired_name: cookie_value
}
})
I think it's a really great video. 2.28.50 It says that useCookies in this part is missing and does not work. Could you tell me anyone?
Ответить
thanks! but where the firebase section is
Ответить
This is a really nice tutorial, but maybe it would be useful to explain what you are about to do as an overview, as well as how it's done. Otherwise we just have to follow and try to make sense of it. Try using a flowchart before each part. Could help a lot of people
Ответить
Good tutorial. Congratulations...
Ответить
I had an error trying to use heroIcons, it seems they changed the way to import the icon you want to use. Now you have to add the size before the type.
For example: @heroicons/vue/24/solid for size 24 and @heroicons/vue/20/solid for size 20
For those who don't know, useBody() is now readBody().
Ответить
Hey, this is my first project of this sort and I'm having trouble understanding the authentication system of this. What are the access and refresh tokens used for? What about the session and cookies? It's a bit confusing for me. Other then that, this is phenomenal and truly helpful. Thanks :)
Ответить
A powerful application. Can you do something else like that?
Ответить
cookie refresh_token on server side undefined, how it fix?
Ответить
