What you'll learn

Build Rest-API using FastAPi
Build Full App Using React Typescript And MUI
Create WebSocket MicorServices Via FastAPI
Handle RealTime WebSocket Services Using React TS
How to use gRPC for service communication
How to connect frontend + backend in a real-world system

Course content

7 sections • 141 lectures • 21h 43m total length

Introduction1:10
App Overview6:28

Overview & GitHub Resources0:04
Create FastApi App9:26
Create User Model And Init DB12:04
Craete User Interface3:09
Craete User Services5:18
Siginp New User EndPoint11:23
Login User EndPoint10:17
Get User By id EndPoint6:16
Generate And Verify JWT Authentication17:25
generate the token on endpoints4:28
Update User EndPoint9:13
Add Authentication to Update user EndPoint9:50
Following EndPoint12:04
Add Hot Reload Server1:38
User Suggestions Endpoint9:42
User Delete EndPoint4:37
Create Post Model Interface Added To DB5:46
Create Post Service26:44
Craete Post Endpoint8:10
Comment On Post Endpoint5:07
Search Posts Users EndPoint2:32
Get Post ById EndPoint2:32
Get All User Posts by PageNation EndPoint5:13
Update Post Endpoint9:08
Like Post EndPoint5:54
Delete Post EndPoint7:30
Message Model4:43
Message Services22:13
SendMessage Endpoint5:27
Get Messages by Numbers Endpoint8:17
Get User UnReaded Messages Endpoint6:37
Mark Messages As Read Endpoint5:29
Notification Model4:37
Notification Service10:14
Notification Create on Background9:07
Notification EndPoints10:34
Update Version Control and Github Repo2:24

Overview & GitHub Resources0:06
Create New Bransh Setup New FastApi Realtime Chat WebService6:06
Create Chat Proto File On RestApi8:17
Create Chat Grpc Server On RestApi15:44
Test And Debug Chat Server gRPC On RestApi11:10
Create gRPC Client On RrealTime Chat9:28
[Realtime Chat] Create Conenction Manager Class Part One11:28
[RealTime Chat] Connection Manager Part Two10:01
Create Ws Handler7:59
Run App And Debug4:37
debug App Ws Final Test3:26
Update Github Repo2:27

Overview & GitHub Resources0:06
Create React App & New Branch4:15
Install Packages3:33
Create Home Component AndTheme Mode21:04
Create Types6:33
Create API Request File5:49
Create API Posts Functions15:03
Create API User Functions7:08
Create API Chat Functions7:53
Create API Notification Functions2:42
[Store] create actionTypes10:03
[Store] Create Auth Actions And Reducers19:10
[Store] Create Chat Reducer20:28
[Store] Create Chat Action Part One10:00
[Store] Create Chat Action Part Two12:51
[Store] Create Notification Reducers And Actions10:55
[Store] Create Post Reducer11:52
[Store] Create Actions11:58
[WebSocket] Create Notification Ws Class9:57
[WebSocket] Create Chat Ws Class9:42
Create Auth Component Part One14:46
Add Auth Styles To MainStyles5:52
Auth Sigin IN Form11:33
Auth Sigin Up Form9:00
Create Feed Component29:36
Create Comments Component14:03
Create Post Component Script20:57
Post Component Show Template20:01
Post Component Edit Template15:18
Protected Route7:49
Create Post Details Component9:48
Create Profile Component Script17:16
Create Profile Component Template26:27
Debug Profile Component4:18
Create Add Component Script10:47
Create Add Component Template21:39
Create Footer Component9:57
Create RightBar Componont to Show Suggested Pepole To Follow Them18:41
debug Profile Compnont1:34
Debug Backend Api Suggested Users1:58
SideBar Component14:48
Search Component25:16
Notification Component10:29
NotificationList Component Script8:30
NotificatonList Compnont Template Debuging Store11:43
Update MainStyles For NavBar11:05
Create NavBar Script Part One22:17
Create NavBar Script Part Two4:58
Create NavBar Template18:30
[Chat] UserList14:35
[Chat] Conversation Script Constants9:11
[Chat] Conversation Script Functions21:02
[Chat] Conversation Template Part One12:27
[Chat] Conversation Template Part Two20:49
[Chat] Chat Compnont Script Part One17:14
[Chat] Chat Compnont Script Part Two11:25
[Chat] Chat Compnont Tempalte10:51
Debuging Chat Issues & styes29:35
Debug Posts And Notification Styles MakrAs Reeaded2:50
[App Final Test & Touches ]9:59

Requirements

Basic knowledge of TypeScript or Python Or Both
Basic understanding of React (helpful but not required)
Motivation to build a real project

Description

In this course, you will learn how to build a complete real-time full-stack social media application from scratch using modern, production-ready technologies.

My name is Ahmed Khalaf, and I’m a software engineer. I designed this course to help you move beyond basic tutorials and understand how real-world scalable applications are built.

We will build a fully functional social network system that includes posts, comments, likes, authentication, real-time chat, and instant notifications — just like modern platforms such as Instagram or Facebook.

By the end of this course, you will have built:

A full social media platform (like Instagram clone)
Real-time chat system using WebSockets
Instant notification system
User authentication with JWT
Posts, comments, likes system
User following & suggestions system
Profile pages and feed system
Scalable backend architecture with FastAPI + MongoDB
gRPC-based communication for high-performance services

Technologies Used

We will use a modern and powerful tech stack:

Frontend: React + TypeScript + Material UI (MUI)
Backend: FastAPI (Python)
Database: MongoDB
Real-Time: WebSockets
High Performance Communication: gRPC
Authentication: JWT

What You Will Learn

This course is not just about building features — it’s about understanding architecture.

You will learn:

How to structure a full-stack project properly
How to design scalable backend services
How real-time communication works (chat & notifications)
How to use gRPC for service communication
How to build reusable frontend architecture in React
How to connect frontend + backend in a real-world system
How to debug and deploy full-stack applications

Who this course is for:

Junior and mid-level developers
React or Python (FastAPI) developers who want to go full-stack
Developers who want to build real-world portfolio projects
Anyone who wants to learn modern backend + real-time systems

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 8min

Tools & Environment7 lectures • 19min

Build ( REST-API ) Using FastAPI & MongoDB37 lectures • 4hr 55min

Upgrade REST API13 lectures • 1hr 18min

Build [RealTime] Chat gRPC WebSocket12 lectures • 1hr 31min

Build [RealTime] Notification WebSocket gRPC10 lectures • 53min

[ Frontend ] ( React Ts ) & MUI60 lectures • 12hr 40min

Requirements

Description

Who this course is for: