English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 182 lectures (21h 47m) | 18.0 GB
Learn Next JS from scratch with Typescript and Tailwind CSS by building a real world fullstack blog application.
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.
What you’ll learn
- 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
Table of Contents
Typescript For Beginners
1 What is TS
2 Environment Set Up & First Taste of Typescript
3 Basic Types in JavaScript
4 Type Inference
5 Basic Rules to Define Types
6 Types for Objects and Arrays
7 Type Keyword & Optional Type
8 Functions
9 Interface
10 Generic Types
11 Any Type
12 When to use any
React and TypeScript
13 React TS Project Setup
14 Rendering App
15 Component & Props
16 Input and Change Handler
Core Concept of Next JS
17 What is the concept of Next JS
18 React vs Next JS
Project Setup
19 New Next JS Project
20 Custom CSS Style
21 Setting up Tailwind CSS
22 VS Code Shortcuts
23 Cheat Sheet
The Real World Project
24 Future Plan
25 What is Markdown
26 Custom Code Snippets
27 Making Blog Card
28 Let’s Look at API
29 Before We Read Files & Folder
30 Reading Files & Folders
31 Trust Me Gray Matters
32 Fetching Data
33 getStaticProps
34 getStaticProps in action
35 Why getStaticProps
36 Fixing Types
37 Fixing Styles
38 Linking to SinglePage
39 Dynamic Route
40 getStaticPaths
41 Returning All Paths
42 Rendering Static Props
43 Fixing Types Part 2
44 Rendering Markdown
45 Styling Markdown
46 Lets Build Static App
47 The Build Command
48 fallback
49 Setting up GitHub
50 Git Push
51 Publishing The App
52 Updating The App
New Project Setup
53 The Plan
54 Project Setup
55 Custom Colors
Admin Nav
56 Nav Container & Dark Mode
57 App Logo
58 Rendering Nav Items
59 Nav Toggler Button
60 Toggle Nav Logic
61 Using Localstorage For Nav
62 Adding Nav Transition
63 Creating Common Admin Layout
Rich Text Editor
64 Rich Editor Options
65 Configuring Editor
66 Editor Commands
67 Toolbar
68 Custom Dropdown
69 Changing Headers
70 Button Component
71 Rendering Buttons
72 Applying Logic
73 Styling Editor
74 Button Active Style
75 Insert Link UI
76 Insert Link Form
77 Link Form State
78 Insert Link Logic
79 Resetting Link Form
80 Selecting Link Text
81 Bubble Menu
82 Update Link Form
83 Updating Link in Real
84 Embed Youtube
85 Image Gallery
86 Creating Modal
87 Close Logic
88 Gallery For Images
89 Image Component
90 Busy Indicator on Upload
91 Selecting Image
92 Alt Input and Select Button
93 Image Upload Input
94 Handling Change Event
95 Rendering Image
96 Important Changing Prop Name
Image Upload API Route
97 Setup TipTap Edior
98 How to Upload Images (Discussion)
99 Uploading Image Part 1
100 Uploading Image Part 2
101 Reading All Images
102 Fetching Images
103 Uploading Image From UI
Finishing Editor
104 Title Input
105 Seo Form
106 Finishing SEO Form UI
107 Seo Form State
108 Slug and onChange
109 Thumbnail Selector and Submit Button
110 Handling Editor State
111 Accepting Initial Value
112 Head Component
New Post
113 The Database
114 Let’s Install Mongodb
115 Connecting to DB
116 Post Schema
117 Joi
118 Entire Post Validation
119 Handle New Post Submit
120 Accepting FormData
121 Saving Post Inside DB
122 Uploading Thumbnail
123 Types for Schema
124 getServerSideProps
125 Little Cleanup
126 Update Post With getServerSideProps
127 Submit Update Form
128 Update API Route
129 Fixing Types
130 Updating Thumbnail
Rendering New Posts
131 The Plan
132 Basic UI
133 Post Card 1
134 Post Card 2
135 Link inside Link
136 Post Card Final
137 Setting up getServerSideProps
138 Fetching New Posts
139 Posts API Route
140 The Plan for Infinite Scroll
141 Infinite Scroll Component
142 Infinite Scroll Posts – Admin
143 Default Layout
144 Infinite Scroll Posts – User
145 User Nav
146 Github Auth Button
147 Profile Head
148 Dropdown Options
Authentication
149 Next Auth
150 Catch All Route
151 Github Auth Provider
152 Register Github OAuth
153 Session with _app
154 Signin and Signout
155 User Model
156 Storing New User to DB
157 Auth Middleware
158 Updating Auth Token
159 Custom Auth Pages
160 Updating Session
161 dbConnect
Going Live
162 The Plan
163 Single Post
164 Fetching Single Post
165 Rendering Single Post
166 Rendering Tool Tip
167 Dark Mode
168 Device Theme Mode
169 Secondary Nav – Admin
170 Search Bar
171 Fixing Theme
172 Confirm Modal
173 Delete Api Route
174 Problem With Delete
175 Common Ground for Delete
176 Confirm Delete
177 Finding The Culprit
178 It Was My Mistake
179 getServerSession
180 Next Build
181 Uploading to Vercel
182 Setting MongoDB
Resolve the captcha to access the links!