This site is powered by
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lecture
Complete and Continue
Next js and React Build Complete News Portal Application
Introduction
Welcome To My Course (1:15)
Course Introduction (3:45)
Course Overview What You Going to Build (13:56)
React Fundamentals
1 React Introduction (6:46)
2 Create New React App Using Vite (7:21)
3 Project Run And Build Command (6:33)
4 Dive Inside React Project Structure (14:43)
5 Organizing File Folders (5:09)
6 Best VS Code Extensions And Settings For React Development (6:19)
7 Primary Understanding On Component Part 1 (8:59)
8 Primary Understanding On Component Part 2 (7:22)
9 JSX And Conventions (9:41)
10 JSX Short Hand If else (4:01)
11 JSX Immediately invoked function (6:42)
12 JSX Loop Inside (5:52)
13 JSX Conditional Rendering Using If Else (8:55)
14 JSX Conditional Rendering Using Switch Statement (4:07)
15 JSX Conditional Rendering Using Ternary Operator (2:42)
16 JSX Conditional Rendering Using Logical And And (3:32)
17 JSX Conditional Rendering Using Immidiatly Invoked Function (3:40)
18 Passing properties to child component (5:13)
19 Passing simple string to child component (5:06)
20 Passing object to child component (5:35)
21 Passing function to child component (2:52)
22 Managing Click Event (5:40)
23 Managing Form Submit (5:07)
24 Applying React Router Dom (15:15)
25 Link And NavLink For Router (13:37)
26 Browser Router VS HashRouter (5:09)
27 Passing Parameter Via Naviagation (5:45)
28 -Hook- Meet With Hook (1:45)
29 -Hook- useRef InnerText InnerHTML (9:58)
30 -Hook- useRef Working With Attribute (5:44)
31 -Hook- useRef Working With Input Element (7:38)
32 -Hook- useRef Working With CSS Class (6:13)
33 -Hook- useRef Caching Expensive Computation (15:27)
34 -Hook- useState Understading Inside (8:35)
35 -Hook- useState Working With Immutable Object (8:21)
36 -Hook- useState Working With Immutable Array Part 1 (14:15)
37 -Hook- useState Working With Immutable Array Part 2 (6:48)
38 -Hook- useState Managing Form Like Pro Part 1 (12:32)
40 -Hook- useState Managing Form Like Pro Part 2 (11:34)
41 -Hook- useEffect understanding arguments and uses (6:40)
42 -Hook- useEffect calling api using promises (7:00)
43 -Hook- useEffect calling api usig async await (7:09)
Express JS Fundamental
e1 Introduction (4:01)
e2 Your First Express Application (10:23)
e3 Express js routing (6:45)
e4 Four Topic We Need To Focus (1:21)
e5 Understanding Response (4:17)
e6 Simple String Response (5:07)
e7 Response Status Code (4:12)
e8 JSON Response (4:14)
e9 Response Download (4:12)
e10 Response Redirect (4:27)
e11 Response Header (5:43)
e12 Response Set Cookies (4:59)
e13 Response Clear Cookies (4:46)
e14 Working With Request (1:32)
e15 Get Request With URL Query (6:26)
e16 Working With Get Request Header (4:15)
e17 Simple Post Request (2:48)
e18 Post Request With URL Query (3:52)
e19 Post Request With Header Properties (5:14)
e20 Post application-json (7:42)
e21 Working With Multipart Form Data (8:46)
e22 File Upload (9:46)
e23 Middleware (2:18)
e24 Application Middleware (8:05)
e25 Route Middleware (3:49)
MongoDB Fundamental
m1 Introduction to MongoDB (1:42)
m2 Installing MongoDB and Compass (6:23)
m3 Connecting to MongoDB (8:07)
m4 Schema and Models (7:24)
m5 Create and Save a document (8:05)
m6 Find documents in multiple ways (10:21)
m7 Query API Select, Sort, Limit, Count Documents (8:51)
m8 Complex Query Comparison Operators (7:58)
m9 Complex Query And, Or Operations (5:34)
m10 Exercise Advanced Query (6:13)
m11 Update a document (Way 1) (3:43)
m12 Update a document (Way 2) (5:38)
m13 Delete documents in 3 ways (3:53)
Next JS Foundation
b1 Environment Tools Setup (5:25)
b2 What and Why Next JS (3:10)
b3 What is the Different between React and Next js. (4:38)
b4 Create New App And Explore Build Opitmization Process (8:49)
b5 Playing With Project Structure (14:15)
b6 Primary Page Concept And Functional Component (6:40)
b7 Working With Static Asset Inside Public (5:57)
b8 Working With Global And Module CSS (7:18)
b9 Exploring Client Side Rendering (14:06)
b10 Exploring Server Side Redering (5:52)
b11 Where use SSR Where CSR (5:21)
b12 Why we are writing use client (5:27)
b13 Exploring Directory Routing Concept (5:56)
b14 Neasted Directory Routing Concept (4:20)
b15 Basic Link Component (8:50)
b16 Progress Bar In Routing (8:31)
b17 Managing Active Link (7:14)
b18 Link Component Query (6:09)
b19 Link Component Query With useSearchParams (4:14)
b20 Link Component Prefetch and Replace Properties (7:21)
b21 Programatically Routing Details (12:13)
b22 Thinking In Next JS What About Server Component (5:57)
b23 Thinking In Next JS What About Client Component (2:54)
b24 -Config- Understanding Base Path And Environment Variable (11:03)
b25 -Config- Understanding Header Config (5:46)
b26 -Config- Header Security Config Part 1 (7:17)
b27 -Config- Header Security Config Part 2 (7:47)
b28 -Config- Header Security Config Part 3 (8:22)
b29 -Config- Connection And Compression (5:40)
b30 -Optimization- Image Optimization Part 1 (8:36)
b31 -Optimization- Font Optimization Part 1 (7:11)
b32 -Optimization- Font Optimization Part 2 (5:46)
b33 -Optimization- Script And Static Assets (3:56)
b34 Middleware Setup Part 1 (10:13)
b35 Middleware Setup Part 2 (11:13)
b36 Not Found Page (8:59)
Next.js Basic Portfolio Website With Admin Panel
w00 Next.js Basic Portfolio Website With Admin Panel (7:30)
Portfolio Website Excise Files
w01 Create Nextjs Project and Packages (7:24)
w02 Mongodb Database Setup (9:05)
w03 Create Admin Navigation Menu Components Part 1 (14:10)
w04 Create Admin Navigation Menu Components Part 2 (9:58)
w05 Create Admin Navigation Menu Components Part 3 (8:02)
w06 Create Home Form for Store Data Part 1 (11:46)
w07 Create Home Form for Store Data Part 2 (17:16)
w08 Create About Page Form (10:17)
w09 Create Experience Page Form (8:38)
w10 Create Education Page Form (5:57)
w11 Create Project Page Form (7:57)
w12 Work For Cerate Model (13:48)
w13 Create Api for All Components Part 1 (11:16)
w14 Create Api for All Components Part 2 (9:30)
w15 Create Common API Services (11:57)
w16 Add Data to Database Part 1 (21:30)
w17 Add Data to Database Part 2 (Experience Issue Solve) (8:49)
w18 Add Reset From Data (8:45)
w19 Get List of Data and Show (14:34)
w20 Update Home And About Data Part 1 (10:50)
w21 Update Home And About Data Part 2 (13:25)
w22 Render Experience Data in Page (12:29)
w23 Render Education and Project Data in Page (9:46)
w24 Login Authentication Part 1 (12:01)
w25 Login Authentication Part 2 (5:10)
w26 Login Authentication Part 3 (11:03)
w27 Login Authentication Part 4 (11:31)
w28 User Logout (5:23)
w29 Work for Frontend Fetch Data (7:46)
w30 Work for Frontend Fetch Data Part 2 (15:40)
w31 Design Frontend NavBar Part 1 (12:34)
w32 Design Frontend NavBar Part 2 (16:49)
w33 Design Frontend NavBar Part 3 (14:35)
w34 Design Frontend NavBar Part 4 (2:21)
w35 Design Frontend Home Page Part 1 (12:30)
w36 Design Frontend Home Page Part 2 (14:40)
w37 Design Frontend Home Page Part 3 (12:13)
w38 Design Frontend Home Page Part 4 (11:36)
w39 Design Frontend About Page Part 1 (18:51)
w40 Design Frontend About Page Part 2 (11:17)
w41 Design Frontend About Page Part 3 (15:17)
w42 Design Frontend Experience and Education Page Part 1 (16:00)
w43 Design Frontend Experience and Education Page Part 2 (11:31)
w44 Design Frontend Experience and Education Page Part 3 (6:09)
w45 Design Frontend Project Page Part 1 (14:54)
w46 Design Frontend Project Page Part 2 (14:58)
w47 Design Frontend Project Page Part 3 (8:46)
w48 Design Frontend Contact Us Page Part 1 (6:01)
w49 Design Frontend Contact Us Page Part 2 (20:36)
w50 Design Frontend Contact Us Page Part 3 (9:45)
w51 Contact Us Form Submit Part 1 (11:20)
w52 Contact Us Form Submit Part 2 (7:40)
w53 Delete Education Data Part 1 (15:13)
w54 Delete Education Data Part 2 (12:12)
w55 Deploy Next.js Basic Portfolio to Web Server (18:22)
Section 1: Build Next JS Complete Advance News Portal Site
News Portal Introduction Video - What you will build (13:56)
Project Excise File - Downloadable Resource
Welcome to the Course (1:15)
Project Structure (2:01)
Environment Setup (4:14)
Section 2: News Portal Project Setup
n1 Project Setup Part 1 (7:44)
n2 Project Setup Part 2 (13:13)
n3 Install Tailwind Css (6:43)
n4 Project Setup Part 3 (12:47)
Section 3: Admin Panel Design
n5 Admin Panel Design Part 1 (13:02)
n6 Admin Panel Design Part 2 (10:36)
n7 Admin Panel Design Part 3 (14:18)
n8 Admin Panel Design Part 4 (17:55)
Section 4: Nested Route Manage
n9 Nested Route Manage Part 1 (13:00)
n10 Nested Route Manage Part 2 (11:22)
Section 5: News Page Design
n11 News Page Design Part 1 (9:03)
n12 News Page Design Part 2 (8:02)
n13 News Page Design Part 3 (10:28)
n14 News Page Design Part 4 (11:55)
n15 News Page Design Part 5 (9:25)
Section 6: Admin Dashboard Design
n16 Admin Panel Design Part 1 (8:46)
n17 Admin Panel Design Part 2 (9:50)
Section 7: Admin Add Writer Design
n18 Admin Add Writer Design Part 1 (13:38)
n19 Admin Add Writer Design Part 2 (8:56)
Section 8: Admin Writer Page Design
n20 Admin Writer Page Design (9:48)
Section 9: User Profile Page Design
n21 User Profile Page Design Part 1 (9:56)
n22 User Profile Page Design Part 2 (9:29)
Section 10: Writer Add News Page Setup
n23 Writer Add News Page Setup Part 1 (11:30)
n24 Writer Add News Page Setup Part 2 (12:32)
n25 Writer Add News Page Setup Part 3 (15:28)
n26 Writer Add News Page Setup Part 4 (19:24)
n27 Writer Dashboard Design (4:26)
Section 11: Login Page Design and DB Connect
n28 Login Page Design and DB Connect Part 1 (11:31)
n29 Login Page Design and DB Connect Part 2 (8:48)
n30 Login Page Design and DB Connect Part 3 (9:09)
n31 Login Page Design and DB Connect Part 4 (12:47)
Section 12: User Login Backend
n32 User Login Backend Part 1 (12:16)
n33 User Login Backend Part 2 (11:58)
n34 User Login Backend Part 3 (17:14)
n35 User Login Backend Part 4 (13:54)
n36 User Login Backend Part 5 (18:42)
n37 User Login Backend Part 6 (17:10)
Section 13: Dashboard Logout Function
n38 Dashboard Logout Function (10:57)
Section 14: Writer Add Setup
n39 Writer Add Setup Part 1 (15:00)
n40 Writer Add Setup Part 2 (13:00)
n41 Writer Add Setup Part 3 (14:45)
n42 Writer Add Setup Part 4 (17:47)
Section 15: Writer Edit Update And Delete
n43 Writer Edit Update And Delete Part 1 (11:09)
n44 Writer Edit Update And Delete Part 2 (8:58)
n45 Writer Edit Update And Delete Part 3 (8:34)
n46 Writer Edit Update And Delete Part 4 (18:20)
n47 Writer Edit Update And Delete Part 5 (13:08)
Section 16: News Add Function
48 News Add Function Part 1 (19:17)
49 News Add Function Part 2 (14:27)
50 News Add Function Part 3 (7:40)
51 News Add Function Part 4 (12:21)
52 News Add Function Part 5 (20:01)
53 News Add Function Part 6 (4:42)
Section 17: Modal News Image Function
54 Modal News Image Function Part 1 (12:15)
55 Modal News Image Function Part 2 (8:42)
56 Modal News Image Function Part 3 (9:25)
57 Modal News Image Function Part 4 (12:50)
58 Modal News Image Function Part 5 (7:24)
Section 18: Get News Data From Database
59 Get News Data From Database Part 1 (10:36)
60 Get News Data From Database Part 2 (16:11)
Section 19: Edit and Update News Option
61 Edit and Update News Part 1 (17:57)
62 Edit and Update News Part 2 (6:03)
63 Edit and Update News Part 3 (17:47)
Section 20: News Delete with Image Option
64 News Delete with Image Part 1 (8:22)
65 News Delete with Image Part 2 (10:22)
Section 21: Add Demo Data
66 Add Demo Data in Database (11:26)
Section 22: Search and News Pagination
67 Search and News Pagination Part 1 (17:20)
68 Search and News Pagination Part 2 (7:13)
Section 23: Show News Filter Option
69 Show News Filter Option (8:22)
Section 24: News Status Update Function
70 News Status Update Function Part 1 (12:59)
71 News Status Update Function Part 2 (9:25)
72 News Status Update Function Part 3 (7:42)
Section 25: Create Next Js Project for Frontend
73 Create Next Js Project (7:21)
74 Install All Dependencies for News Project (4:21)
Section 26: App Create and Design Header
75 Create and Design Header Part 1 (11:11)
76 Create and Design Header Part 2 (8:01)
77 Create and Design Header Part 3 (11:40)
78 Create and Design Header Part 4 (18:25)
79 Create and Design Header Part 5 (13:33)
80 Create and Design Header Part 6 (4:47)
Section 27: Frontend Headline Design
81 Frontend Headline Design (16:05)
Section 28: Latest News Design
82 Latest News Design Part 1 (11:35)
83 Latest News Design Part 2 (11:21)
84 Latest News Design Part 3 (12:45)
85 Latest News Design Part 4 (9:53)
86 Latest News Design Part 5 (11:32)
Section 29: Popular News Design
87 Popular News Design Part 1 (9:16)
88 Popular News Design Part 2 (12:04)
89 Popular News Design Part 3 (13:12)
90 Popular News Design Part 4 (15:24)
91 Popular News Design Part 5 (13:56)
92 Popular News Design Part 6 (11:13)
Section 30: News and Footer Design
93 News and Footer Design Part 1 (9:07)
94 News and Footer Design Part 2 (12:40)
95 News and Footer Design Part 3 (15:36)
96 News and Footer Design Part 4 (7:56)
Section 31: Category News Page Design
97 Category News Page Design Part 1 (18:22)
98 Category News Page Design Part 2 (9:02)
99 Category News Page Design Part 3 (11:11)
100 Category News Page Design Part 4 (6:06)
Section 32: News Details Page Design
101 News Details Page Design (11:21)
Section 33: News API Create
102 News API Create Part 1 (5:33)
103 News API Create Part 2 (11:42)
104 News API Create Part 3 (20:56)
Section 34: News Data Show Option
105 News Data Show Option Part 1 (12:31)
106 News Data Show Option Part 2 (19:43)
107 News Data Show Option Part 3 (14:45)
Section 35: News Headlines Category
108 News Headlines Category Part 1 (14:14)
109 News Headlines Category Part 2 (6:15)
110 News Headlines Category Part 3 (5:48)
Section 36: News Details Page Show
111 News Details Page Show Part 1 (9:00)
112 News Details Page Show Part 2 (11:26)
113 Related News Shows in Details Page (9:22)
Section 37: News Category List Show
114 News Category Page Show Part 1 (6:05)
115 News Category Page Show Part 2 (5:37)
Section 38: Latest and Popular News
116 Latest and Popular News Part 1 (10:17)
117 Latest and Popular News Part 2 (8:34)
Section 39: Recent News Show
118 Recent News Show Part 1 (7:57)
119 Recent News Show Part 2 (5:10)
120 Update Category with Count (7:18)
Section 40: Image Gallery Option
121 Image Gallery Option (8:01)
Section 41: Show Search Option Api
122 Show Search News Option Part 1 (11:21)
123 Show Search News Option Part 2 (12:24)
124 Show Search News Option Part 3 (13:14)
Section 42: User Profile Update Option
125 User Profile Update Option Part 1 (16:34)
126 User Profile Update Option Part 2 (15:29)
127 User Profile Update Option Part 3 (25:23)
128 User Profile Update Option Part 4 (7:42)
129 User Profile Update Option Part 5 (6:52)
Section 43: User Change Password Functions.
130 User Change Password Functions Part 1 (13:55)
131 User Change Password Functions Part 2 (17:46)
Section 44 : Update Dashboard
132 Update Admin Dashboard (15:08)
133 Update Recent News in Admin Dashboard (4:13)
Section 45 : Project Source Code
Project Complete Source Code - Downloadable Resource
22 Managing Click Event
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock