Next JS & Typescript Full Stack Blog App by Udemy
Learn Next JS from scratch with Typescript and Tailwind CSS by building a real world fullstack blog application.
Course Highlights
- 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
Skills you will learn!
Curriculum
2 Topics
Welcome
Checkout Final Project
12 Topics
What is TS
Environment Set Up & First Taste of Typescript
Basic Types in JavaScript
Type Inference
Basic Rules to Define Types
Types for Objects and Arrays
Type Keyword & Optional Type
Functions
Interface
Generic Types
Any Type
When to use any
4 Topics
React TS Project Setup
Rendering App
Component & Props
Input and Change Handler
2 Topics
What is the concept of Next JS?
React vs Next JS
5 Topics
New Next JS Project
Custom CSS Style
Setting up Tailwind CSS
VS Code Shortcuts
Cheat Sheet
30 Topics
dynamic Route
What is Markdown
Custom Code Snippets
Making Blog Card
Let's Look at API
Before We Read Files & Folder
New Formidable Update
Reading Files & Folders
Trust Me Gray Matters
Fetching Data
getStaticProps
getStaticProps in action
Why getStaticProps?
Fixing Types
Fixing Styles
Linking to SinglePage
Dynamic Route
getStaticPaths
Returning All Paths
Rendering Static Props
Fixing Types Part 2
Rendering Markdown
Styling Markdown
Lets Build Static App
The Build Command
fallback
Setting up GitHub
Git Push
Publishing The App
Updating The App
3 Topics
The Plan
Project Setup
Custom Colors
8 Topics
Nav Container & Dark Mode
App Logo
Rendering Nav Items
Nav Toggler Button
Toggle Nav Logic
Using Localstorage For Nav
Adding Nav Transition
Creating Common Admin Layout
33 Topics
Rich Editor Options
Configuring Editor
Editor Commands
Toolbar
Custom Dropdown
Changing Headers
Button Component
Rendering Buttons
Applying Logic
Styling Editor
Button Active Style
Insert Link UI
Insert Link Form
Link Form State
Insert Link Logic
Resetting Link Form
Selecting Link Text
Bubble Menu
Update Link Form
Updating Link in Real
Embed Youtube
Image Gallery
Creating Modal
Close Logic
Gallery For Images
Image Component
Busy Indicator on Upload
Selecting Image
Alt Input and Select Button
Image Upload Input
Handling Change Event
Rendering Image
Important Changing Prop Name
7 Topics
Setup TipTap Edior
How to Upload Images (Discussion)
Uploading Image Part 1
Uploading Image Part 2
Reading All Images
Fetching Images
Uploading Image From UI
9 Topics
Title Input
Seo Form
Finishing SEO Form UI
Seo Form State
Slug and onChange
Thumbnail Selector and Submit Button
Handling Editor State
Accepting Initial Value
Head Component
18 Topics
The Database
Let's Install Mongodb
Connecting to DB
Post Schema
Joi
Entire Post Validation
Handle New Post Submit
Accepting FormData
Saving Post Inside DB
Uploading Thumbnail
Types for Schema
getServerSideProps
Little Cleanup
Update Post With getServerSideProps
Submit Update Form
Update API Route
Fixing Types
Updating Thumbnail
18 Topics
The Plan
Basic UI
Post Card 1
Post Card 2
Link inside Link
Post Card Final
Setting up getServerSideProps
Fetching New Posts
Posts API Route
The Plan for Infinite Scroll
Infinite Scroll Component
Infinite Scroll Posts - Admin
Default Layout
Infinite Scroll Posts - User
User Nav
Github Auth Button
Profile Head
Dropdown Options
13 Topics
Next Auth
Catch All Route
Github Auth Provider
Register Github OAuth
Session with _app
Signin and Signout
User Model
Storing New User to DB
Auth Middleware
Updating Auth Token
Custom Auth Pages
Updating Session
dbConnect
23 Topics
The Plan
Single Post
Fetching Single Post
Rendering Single Post
Rendering Tool Tip
Dark Mode
Device Theme Mode
Secondary Nav - Admin
Search Bar
Fixing Theme
Confirm Modal
Delete Api Route
Problem With Delete
Common Ground for Delete
Confirm Delete
Finding The Culprit
It Was My Mistake
getServerSession
Next Build
Uploading to Vercel
Setting MongoDB
revalidate
Show Progress on Route Change
32 Topics
New App Config for Dev
useAuth hook
Login to Add Comment
Auth From Git Button
Comment Form UI
Comment API Route
Comment Schema
Comment Validation
Adding New Comment
Reply to Comment
Comment Like
Remove Comment
Update Comment
Get Comment
Format Comment
Submit Comment
Creating New Comment
Rendering Comments
Comment Card 1
Comment Card 2
Edit and Delete Button
Rendering Edit and Reply Form
Submit Edit and Update
Submit Reply Comment
Updating State & Rendering Replies
Fixing Replies UI
Control For owner only
Submit Edited Comment
Delete Confirm Modal
Confirm Delete Comment
Like Comment
Updating App With Comment
20 Topics
Admin Dashboard
UI - Content Wrapper
If You Skipped Previous Video
UI - Latest Post Card
If You Skipped Previous Video
UI - Latest Comment Card
If You Skipped Previous Video
Latest Comments API Route
Rendering Posts & Comments
UI - Latest Users Table
If You Skipped Previous Video
Latest Users API Route
Fetching User Profiles
Fetch All Comments API Route
Rendering All Comments
Let Me Explain
Page Navigator
Pagination For Comments
Fixing Comments
Users Page
17 Topics
Post Like API Route
API Route For Post Like Status
Liking Post
Rendering Like Status
Responsive UI
Author Info Component
Rendering Author Profile
Comment Like UX
Busy Icon For Single Comment
Busy on Comment Submit
Busy on Post Like
Post Share
Fetching Related Posts
Rendering Related Posts
Responsive YouTube
Publish Changes
Updating New URL Github
4 Topics
Search API
Search Form Submission
Making Request to Search API
Rendering Search Results
7 Topics
Intro
Initializing Project
Styling
Tailwind CSS
Layout
Head
use client
19 Topics
Server Component
API Route
Data Fetching From API
Product List Component
Image
Fetching Products in All Pages
Typescript Problem
Server Code Inside Page
Catch All Route
Loading Products
Client & Server Component
Modifying Product List Component
Rendering Products
generateStaticProps
generateStaticParams for fetch all route
Building Static Pages
Loading
Error
On Progress
Next JS & Typescript Full Stack Blog App
Related Next.js Courses
Thank You!
Your review has been submitted successfully.