Lets build a Markdown blog using Next.js, Shadcn UI, Rehype and Tailwind CSS 🔥

Let me know what you think about the blog we created and/or any followup videos you would like to watch

TimeStamp:
00:00:00 - Introduction
00:01:38 - Getting Started with the Blog
00:01:59 - Creating a New Application
00:03:33 - Installing and Configuring Shadcn UI
00:03:33 - Creating the Blog Post Page
00:10:32 - Creating the Blog Page
00:14:39 - Building the Page UI
00:15:10 - Creating a Max Width Wrapper
00:17:08 - Understanding the CN Function
00:22:51 - Creating the Navbar Component
00:25:13 - Styling the Navbar
00:29:43 - Adding Buttons to the Navbar
00:30:26 - Adding Button Variants
00:31:06 - Aligning Buttons Vertically
00:31:13 - Adding Space and Padding
00:31:59 - Adding Dark and Light Mode Toggle
00:32:20 - Installing Next Themes Package
00:32:36 - Creating Theme Provider
00:33:53 - Troubleshooting Theme Provider Errors
00:35:28 - Adding Mode Toggle Button
00:39:15 - Fixing Mobile View
00:40:22 - Adding Hamburger Icon
00:45:57 - Installing Sheets and Adjusting Navbar
00:47:37 - Creating a Responsive Navbar
00:49:06 - Creating the Blog Page
00:49:32 - Creating the Contact Page
00:50:07 - Using Max Width Wrapper for Blog Page
00:50:38 - Using AI to Generate Blogs
00:52:25 - Creating Sample Blogs
00:53:19 - Adding Sample Blogs to Blog Page
00:58:25 - Adding Images to Blogs
01:01:03 - Using Tailwind CSS for Blog Styling
01:05:02 - Creating Blog Page
01:05:32 - Adding Content to Blog Page
01:08:35 - Fetching Data Using Slug
01:10:20 - Storing Blog Data in File System
01:10:43 - Parsing Markdown Using Gray Matter
01:12:32 - Understanding Unified, Rehype, and Remark
01:14:24 - Installing Necessary Packages
01:16:40 - Starting from Scratch with UnifyJS
01:17:44 - Installing and Importing Gray Matter
01:18:29 - Creating the File Path
01:19:09 - Reading the Directory with FS
01:20:00 - Parsing Content with Gray Matter
01:20:39 - Creating HTML Content
01:22:25 - Debugging Content Rendering
01:24:39 - Styling with Tailwind Typography
01:27:29 - Creating 'On This Page' Component
01:34:26 - Creating HTML Content
01:34:32 - Styling 'On This Page' Component
01:39:17 - Fixing Scroll Padding
01:40:50 - Creating Two Separate Columns
01:42:13 - Adding Class Name to Component
01:43:19 - Removing Tailwind Typography
01:44:24 - Fixing Scroll Issue
01:46:01 - Installing Rehype Prettycode
01:47:02 - Importing and Using Rehype Prettycode
01:48:09 - Checking Responsiveness and Dark Theme
01:49:02 - Adding Copy Button
01:50:49 - Adding More Blogs
01:53:24 - Fixing Display Flex and Width
01:56:36 - Updating Headings
01:58:23 - Adding Home Button to Navbar
01:58:47 - Using Tailwind CSS Templates
02:02:22 - Implementing Dark Theme
02:07:01 - Creating About and Contact Page
02:07:32 - Making Blog Page Dynamic
02:14:35 - Adding React Top Loading Bar
02:17:33 - Adding Progress to Loading Bar
02:18:19 - Adjusting Loading Bar Progress
02:18:33 - Troubleshooting Loading Bar Issue
02:20:50 - Changing Loading Bar Color
02:22:08 - Changing the Title Using Metadata
02:24:07 - Adding Metadata to Blog Post
02:27:45 - Highlighting Words and Lines in Code
02:34:48 - Conclusion and Future Video Suggestions

[ProgrammingWithHarry]

Thanks for all the love and support on this video. I guess I will do more of these :)

[devalnath]

I've started coding few months ago, and I've come a long way from where I started... It's really refreshing to see how pros do it.

[IOSALive]

ProgrammingWithHarry, amazing video I really liked it

[HarshPatnaik]

Loved the video, Part 2 would be great indeed :D

[Alpha_movies]

yes harry bhai we want part 2 of this video.😊😊

[IOSALive]

ProgrammingWithHarry, nice work, keep the videos coming

[sultanurrahmanshuvo]

Yes, sir, definitely I want part two, and thank you so much for all the videos so far; those have helped me come this far in my web development journey.

[lakshyarajdash]

Thanks Harry bhai, I was looking for this content eagerly. While watching a comedy video, I got notification and switched to this. ❤

[safwansiddiqui]

Harry sir please keep making project videos like this it helps us a lot.

[dipaksaha]

Please make this type of real world project videos ...it will help us a lot... waiting for the upcoming ones

[ItachiUchiha-ixsg]

Currently learning next js from you when its over I will make this project and post it on linkedin

[emperoralthaf]

bhai i finished this and I'm eagerly waiting for the dashboard and database connection part. Please cover it in part 2. Thank you 💖💖

[apnapakistandb]

Code with harry sir please also upload this video in Urdu on your Famous YouTube channel Code with Harry...
Thanks ❤

[Alphatells-tech]

Harry bahi .. web cam sa video b add kro na .. mza nae atta waise dekhny mein .. 😢

[LaughterCraze-vk]

Please esi koi aap ka easy short tutorial banaein

[IbadurRehman-mg]

Hi harry sir I am from Pakistan and I am college student I request you to make a new complete beginners course on c++ as you recently made on C language.

[LolProgrammer]

Brother can you make a video on Astro js

[sankeerthanakolli]

Please upload java tutorial harry bhai

[hamza_Techy]

@ProgrammingWithHarry Biggest Fan Of Yours

[pyjango]

This is the Video I am searching for A year, Sir can I get blog posts from an api and display as you you shown here, Plz make a video on it.