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:
👉Frontend: https://github.com/miladevweb/faceboo...
👉Backend: https://github.com/miladevweb/faceboo...
Timestamps:
0:00 Intro
0:55 Project presentation
05:33 Create the project - Docker (Django & Postgresql)
09:40 Configuring the backend (settings.py)
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:17:35 Configuring the frontend (Next.js and dependencies)
01:26:20 Redux, Store, Auth Reducer
01:36:41 Login, Register
01:45:14 Image in Next.js (blur.svg)
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
Watch video Build a Full Stack MERN Next.js 13 Facebook Clone App | React, Next JS, Typescript, Docker, Django online without registration, duration hours minute second in high quality. This video was added by user Just Mila 31 August 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 9,12 once and liked it 44 people.