Build and Deploy: TWITTER clone with React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023)

Опубликовано: 13 Ноябрь 2024
на канале: Code With Antonio

236,075

6.6k

Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord

Github & Live Website: https://www.codewithantonio.com/proje...

If you are having problems with "Edit" / "Follow" functionality throwing "Not Signed In" error, It is because you have a newer version of Next & NextAuth, a small modification is needed (you can find it in the github repostory). Here are the steps:

1. Your [...nextauth].ts file should export authOptions separately
2. Your serverAuth.ts file should use getServerSession(req, res, authOptions) instead of getSession({req})
3. Modify serverAuth(req) to serverAuth(req, res) everytwhere in your code.
4. Logout, shutdown the app, login again, everything should work ❤

In this tutorial, we'll be building a Twitter clone with React, Tailwind CSS, Next.JS, Prisma and MongoDB. We'll also be deploying it to Vercel!

This is a great video for anyone who wants to learn how to build a fullstack web application from scratch.

We are going to learn funcionalities such as:
Authentication system
Notification system
Image Upload using Base64 strings
Prisma ORM with MongoDB
Responsive Layout
1 To Many Relations (User - Post)
Many To Many Relations (Post - Comment)
Following functionality
Comments / Replies
Likes functionality
Vercel Deployment

Timestamps
00:00 Intro
02:02 Environment setup
06:41 Layout
31:00 Auth UI
01:05:59 Prisma, Mongo, NextAuth
01:49:35 Users and Individual User Profile
02:25:36 Edit User, Image Upload
02:47:45 Load & Create Posts
03:23:19 Like & Follow Functionality
03:56:48 Comments
04:12:20 Notifications
04:30:68 Vercel Deployment