Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Next.js
Next JS & Typescript Full Stack Blog App

Next JS & Typescript Full Stack Blog App

Loại khoá học: Web Development

Learn Next JS from scratch with Typescript and Tailwind CSS by building a real world fullstack blog application.

image
50.000 VND
1.499.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

There's no better way to learn programming than by making real world projects.

This is the lesson I learned as a self taught programmer. There is no doubt that learning to code is hard, but only if you don't know how and from whom to learn.


Hi my name is Niraj I teach beginners how to code. And I made this course to teach Next JS for all levels of programmers. In this course we will learn to-


  • build an advance blog app to understand the concept of Next JS

  • build Authentication and Middlewares

  • add user intraction like comments, likes

  • build an admin panel

  • build custom rich text editor

  • build real world advance UI using Tailwind CSS

  • use real world database like MongoDB

  • use cloud storage called cloudinary


Inside this course we have everything for you to understand fullstack development using Next JS and Typescript. Like I mentioned above here you will learn to build advance UI using React JS and a populer CSS framework Tailwind CSS.


Introduction to Typescript

At first we will understand what is Typescript, how to write Typescript and how to use it with React JS. Because Next JS is just an advance of React JS.


Small Project for Fundamental

Then we will directly jump to learn about Next js fundamentals by building a small blog application. Where you will learn to fetch and render data from local file system and also we will cover topics like server side rendering, github and publishing a Next js app.


The Blog App

Once we understand the fundamental of Next js. We will gradually jump to the advance topics. Where you will learn to build your own custom and advance UI using Tailwind CSS, you will learn to use your own database called MongoDB, you will learn to build your own admin panel, you will learn to upload image from next js to your cloud storage.


There are so many things available inside this course which I can't include everything here even if I want to. But you will find out that on your own once you enroll. And don't worry if you don't like what I am teaching which I think will not happen but if it happens you can always make full refund.     


Bạn sẽ học được gì

Learn basic of Next JS

Build a Next JS foundation with simple project

Build advance real world fullstack blog app

Learn to manage database, api and cloud using Next JS

Learn to build real word project using React Typescript Tailwind CSS and Next JS

Yêu cầu

  • Must be familler with the concept of React
  • Participatence must know the basic Api building using express js
  • Do not need to be advance developer

Nội dung khoá học

21 sections

Welcome

2 lectures
Welcome
02:25
Checkout Final Project
00:12

Typescript For Beginners

12 lectures
What is TS
08:55
Environment Set Up & First Taste of Typescript
06:29
Basic Types in JavaScript
03:48
Type Inference
04:10
Basic Rules to Define Types
06:18
Types for Objects and Arrays
04:41
Type Keyword & Optional Type
04:39
Functions
10:17
Interface
15:20
Generic Types
04:53
Any Type
05:19
When to use any
01:38

React and TypeScript

4 lectures
React TS Project Setup
02:14
Rendering App
07:49
Component & Props
09:50
Input and Change Handler
09:42

Core Concept of Next JS

2 lectures
What is the concept of Next JS?
07:27
React vs Next JS
07:36

Project Setup

5 lectures
New Next JS Project
12:31
Custom CSS Style
05:23
Setting up Tailwind CSS
05:59
VS Code Shortcuts
04:59
Cheat Sheet
00:10

The Real World Project

30 lectures
Future Plan
06:10
What is Markdown
07:28
Custom Code Snippets
09:21
Making Blog Card
13:20
Let's Look at API
10:40
Before We Read Files & Folder
02:49
New Formidable Update
00:33
Reading Files & Folders
09:15
Trust Me Gray Matters
05:07
Fetching Data
07:29
getStaticProps
02:57
getStaticProps in action
05:52
Why getStaticProps?
04:19
Fixing Types
04:20
Fixing Styles
01:24
Linking to SinglePage
04:17
Dynamic Route
05:37
getStaticPaths
07:02
Returning All Paths
04:01
Rendering Static Props
05:04
Fixing Types Part 2
03:56
Rendering Markdown
07:53
Styling Markdown
04:05
Lets Build Static App
08:56
The Build Command
07:17
fallback
15:27
Setting up GitHub
03:55
Git Push
04:46
Publishing The App
04:01
Updating The App
03:48

New Project Setup

3 lectures
The Plan
06:04
Project Setup
05:24
Custom Colors
06:07

Admin Nav

8 lectures
Nav Container & Dark Mode
07:46
App Logo
04:51
Rendering Nav Items
14:48
Nav Toggler Button
03:58
Toggle Nav Logic
13:53
Using Localstorage For Nav
09:56
Adding Nav Transition
04:40
Creating Common Admin Layout
08:48

Rich Text Editor

33 lectures
Rich Editor Options
06:31
Configuring Editor
04:14
Editor Commands
08:32
Toolbar
06:48
Custom Dropdown
09:22
Changing Headers
10:38
Button Component
06:36
Rendering Buttons
06:54
Applying Logic
04:53
Styling Editor
07:49
Button Active Style
03:06
Insert Link UI
00:48
Insert Link Form
13:02
Link Form State
06:39
Insert Link Logic
10:23
Resetting Link Form
04:55
Selecting Link Text
06:36
Bubble Menu
07:07
Update Link Form
09:09
Updating Link in Real
03:36
Embed Youtube
11:51
Image Gallery
02:12
Creating Modal
11:15
Close Logic
06:28
Gallery For Images
07:50
Image Component
11:42
Busy Indicator on Upload
06:50
Selecting Image
07:41
Alt Input and Select Button
07:53
Image Upload Input
03:17
Handling Change Event
09:25
Rendering Image
05:49
Important Changing Prop Name
00:56

Image Upload API Route

7 lectures
Setup TipTap Edior
01:07
How to Upload Images (Discussion)
05:56
Uploading Image Part 1
08:59
Uploading Image Part 2
16:36
Reading All Images
07:05
Fetching Images
05:25
Uploading Image From UI
05:34

Finishing Editor

9 lectures
Title Input
02:31
Seo Form
12:22
Finishing SEO Form UI
02:30
Seo Form State
07:16
Slug and onChange
08:34
Thumbnail Selector and Submit Button
17:45
Handling Editor State
11:36
Accepting Initial Value
11:01
Head Component
08:11

New Post

18 lectures
The Database
03:03
Let's Install Mongodb
02:27
Connecting to DB
08:18
Post Schema
12:23
Joi
13:39
Entire Post Validation
11:19
Handle New Post Submit
13:24
Accepting FormData
07:11
Saving Post Inside DB
10:53
Uploading Thumbnail
06:06
Types for Schema
03:41
getServerSideProps
06:58
Little Cleanup
05:45
Update Post With getServerSideProps
15:27
Submit Update Form
04:18
Update API Route
15:42
Fixing Types
06:53
Updating Thumbnail
07:21

Rendering New Posts

18 lectures
The Plan
01:48
Basic UI
06:03
Post Card 1
09:14
Post Card 2
08:16
Link inside Link
05:05
Post Card Final
02:48
Setting up getServerSideProps
03:05
Fetching New Posts
14:12
Posts API Route
07:16
The Plan for Infinite Scroll
03:03
Infinite Scroll Component
09:17
Infinite Scroll Posts - Admin
09:05
Default Layout
06:35
Infinite Scroll Posts - User
05:16
User Nav
05:43
Github Auth Button
09:10
Profile Head
09:42
Dropdown Options
03:31

Authentication

13 lectures
Next Auth
06:29
Catch All Route
05:32
Github Auth Provider
03:25
Register Github OAuth
07:50
Session with _app
08:58
Signin and Signout
06:10
User Model
07:43
Storing New User to DB
08:07
Auth Middleware
17:03
Updating Auth Token
10:34
Custom Auth Pages
02:41
Updating Session
14:30
dbConnect
01:03

Going Live

23 lectures
The Plan
01:29
Single Post
09:21
Fetching Single Post
08:10
Rendering Single Post
09:31
Rendering Tool Tip
07:32
Dark Mode
15:16
Device Theme Mode
03:40
Secondary Nav - Admin
07:17
Search Bar
03:23
Fixing Theme
04:16
Confirm Modal
12:09
Delete Api Route
06:52
Problem With Delete
02:51
Common Ground for Delete
09:06
Confirm Delete
09:19
Finding The Culprit
10:25
It Was My Mistake
02:32
getServerSession
07:48
Next Build
08:04
Uploading to Vercel
05:49
Setting MongoDB
10:55
revalidate
03:51
Show Progress on Route Change
04:59

Comment

32 lectures
New App Config for Dev
06:19
useAuth hook
03:06
Login to Add Comment
04:17
Auth From Git Button
01:56
Comment Form UI
10:21
Comment API Route
05:18
Comment Schema
09:54
Comment Validation
08:12
Adding New Comment
05:22
Reply to Comment
12:26
Comment Like
09:54
Remove Comment
14:39
Update Comment
04:56
Get Comment
08:35
Format Comment
10:37
Submit Comment
07:28
Creating New Comment
05:57
Rendering Comments
07:27
Comment Card 1
10:45
Comment Card 2
06:18
Edit and Delete Button
02:55
Rendering Edit and Reply Form
11:36
Submit Edit and Update
04:07
Submit Reply Comment
06:53
Updating State & Rendering Replies
06:09
Fixing Replies UI
03:27
Control For owner only
02:36
Submit Edited Comment
11:31
Delete Confirm Modal
07:14
Confirm Delete Comment
09:43
Like Comment
12:54
Updating App With Comment
06:04

Admin Pannel

20 lectures
Admin Dashboard
01:01
UI - Content Wrapper
07:25
If You Skipped Previous Video
00:09
UI - Latest Post Card
07:18
If You Skipped Previous Video
00:15
UI - Latest Comment Card
10:25
If You Skipped Previous Video
00:15
Latest Comments API Route
08:03
Rendering Posts & Comments
06:55
UI - Latest Users Table
07:50
If You Skipped Previous Video
00:13
Latest Users API Route
07:23
Fetching User Profiles
04:04
Fetch All Comments API Route
07:58
Rendering All Comments
08:59
Let Me Explain
02:36
Page Navigator
04:11
Pagination For Comments
09:10
Fixing Comments
02:39
Users Page
08:09

Few Updates to Single Post

17 lectures
Post Like API Route
10:20
API Route For Post Like Status
04:43
Liking Post
10:26
Rendering Like Status
03:57
Responsive UI
07:15
Author Info Component
06:14
Rendering Author Profile
12:38
Comment Like UX
06:41
Busy Icon For Single Comment
03:24
Busy on Comment Submit
02:16
Busy on Post Like
02:03
Post Share
11:20
Fetching Related Posts
05:59
Rendering Related Posts
03:05
Responsive YouTube
01:26
Publish Changes
03:05
Updating New URL Github
05:27

Search

4 lectures
Search API
07:32
Search Form Submission
07:09
Making Request to Search API
04:22
Rendering Search Results
05:28

Next JS 13

7 lectures
Intro
02:05
Initializing Project
04:11
Styling
04:13
Tailwind CSS
02:26
Layout
08:03
Head
07:05
use client
06:02

Data Fetching

19 lectures
Server Component
08:08
API Route
07:40
Data Fetching From API
06:33
Product List Component
05:57
Image
08:40
Fetching Products in All Pages
07:23
Typescript Problem
05:39
Server Code Inside Page
05:19
Catch All Route
05:23
Loading Products
05:03
Client & Server Component
05:40
Modifying Product List Component
04:36
Rendering Products
03:42
generateStaticProps
09:57
generateStaticParams for fetch all route
09:40
Building Static Pages
01:11
Loading
08:20
Error
10:26
On Progress
00:02

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
Angular - The Complete Guide (2024 Edition)

Angular - The Complete Guide (2024 Edition)

120 VND
50.000 VND
.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

100 VND
50.000 VND
Unreal Engine 5: The Complete Beginner's Course

Unreal Engine 5: The Complete Beginner's Course

1.899.000 VND
50.000 VND
Complete WordPress Developer Course 2023 - Plugins & Themes

Complete WordPress Developer Course 2023 - Plugins & Themes

1.999.000 VND
50.000 VND
The Data Science Course: Complete Data Science Bootcamp 2024

The Data Science Course: Complete Data Science Bootcamp 2024

140 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi