Build a Full Stack MERN Next.js 13 Facebook Clone App | React, Next JS, Typescript, Docker, Django

Hi guys 🖐, in this video, we will learn to create a social network, a functional clone of facebook, in it we will be able to register users, log them in, create posts, update them, delete them and interact with other users, through likes and comments on each published post.

For the frontend we will use react and typescript with next js in its 13.4 version, together with redux toolkit to handle the global state, framer motion for page transitions and effects when creating and deleting posts, and tailwind to style the application.

For the backend we will use a very popular python framework called django, supported by django rest framework to create our rest api easily and quickly and in turn we will document the api with swagger, all our data will be stored in postgresql created with docker

This is an ideal project to put in your portfolio.

Repositories:

Timestamps:
0:00 Intro
0:55 Project presentation
05:33 Create the project - Docker (Django & Postgresql)
13:40 Users Model
15:00 Posts Model
16:50 Comments Model
20:40 Users View
37:15 Configuring Swagger and Simple JWT
40:40 User Test
50:25 Post and Likes View
59:10 Post and Likes Test
01:05:30 Comments View
01:26:20 Redux, Store, Auth Reducer
01:36:41 Login, Register
01:57:40 Files (backend)
02:01:00 Protect login and register paths
02:05:50 Protected Routes
02:10:14 Page Transitions
02:13:30 Navbar + Search logic
02:34:30 Dark Mode
02:36:20 Right Bar
02:39:10 Left Bar
02:41:54 Main Section (Create Post + Dialog Modal)
03:05:34 Post container
03:28:55 Update and Delete Post (Div Modal + Custom Hook)
04:05:49 Likes
04:15:50 Comments and Images Modal
04:44:20 Infinite Scroll
04:49:43 Search Page
04:56:11 Profile Page

#ReactJS #nextjs13 #JavaScript

[tuan]

Love it ❤.
Please make more apps like this using Django backend and nextjs for the frontend.
This is very useful. I really love the way combined Django+Nextjs.
Thank you so much for your hard work.
Keep it up bro!!

[shreyojitdas]

excellent we need more app clones like this soon

[aregaa]

we need more django clone like this one

[mahendranath]

nice and amazing content thank you 🎊🎊🎉🎉👌👌🙌🙌, subscribed and like👍

[SR-zipw]

Nice one brother no need TTS voice but your voice don't shy 😉

[kynjal]

great job
please do more django as back and next js as front

[korngsamnang]

Along with explanation pls in the next video.

[kynjal]

your boyfriend or your husband should be the luckyest on earth

[jadbenabderazzak]

Can u make some react native apps with symfony api with authentication pleeease. By the way keep going nice video ❤

[enayatullarezaie]

what is the name of auto complete extension in python when you create you django models

[Tam-wcqm]

hey, please edit this video with explanation

[Ali-ebr]

How is this a full stack MERN when you are not using Mongo, Express or NodeJS?. The only part you are using is ReactJS

[dvwb-epuq]

i love wonyoung, but i don't like django😂

[VladdyHell]

How is it a "MERN Stack" when it uses Django lol

[harshjha]

it doesn't look like clone to me😅