Building Next.js Fullstack Blog with TypeScript, Shadcn/ui, MDX, Prisma and Vercel Postgres.

🎉 Welcome to my comprehensive MDX Blog Site Project! 🚀

In this video, I’ll walk you through my feature-rich blog site that’s built to offer an exceptional experience for both bloggers and readers. Here’s what you can expect:

📝 Key Features:

- MDX and Markdown Support: Enjoy the flexibility of writing your blog posts in MDX and Markdown, combining the best of both worlds with easy formatting and custom React components.
- RSS Feed: Stay connected with your audience through the integrated RSS feed, allowing readers to subscribe and get updates on new posts.
- Dynamic OG Images: Enhance your social media presence with dynamic Open Graph images, automatically generated to make your content stand out.
- Syntax Highlighting: Perfect for tech bloggers, our site includes syntax highlighting to display code snippets beautifully and clearly.
- Tailwind CSS: Designed with Tailwind CSS, our site offers a modern and responsive design that looks great on all devices.
- Shadcn/ui: Leverage the power of Shadcn/ui for a stunning and user-friendly interface.
- Prisma: Our backend is powered by Prisma, providing a robust and efficient way to interact with our database.
- Vercel Postgres: Deployed on Vercel with a Postgres database, our site ensures high performance and scalability.

Join us as I dive into the details of how I’ve built this site, showcasing each feature and providing insights into my development process. Whether you’re a developer looking for inspiration or a blogger searching for the perfect platform, this video has something for you!

Don’t forget to like, comment, and subscribe for more tutorials and project showcases! ✨

Timestamps:
00:00 - Introduction
01:24 - Project Demo
08:20 - Build Start
09:10 - Folder Structure
13:00 - MDX Contents
14:44 - Interact with MDX files
24:35 - Date Formating
31:22 - Components
41:45 - Main Navigation
42:30 - Shadcn/UI
53:42 - Icons
59:13 - Dark Mode
1:04:26 - Container Component
1:07:51 - Homepage
1:10:44 - CSS Sticky
1:11:55 - Top Categories
1:17:27 - Popular Posts
1:21:49 - Fixing Layout Issues
1:24:48 - Footer
1:39:46 - Refactoring with Constants
1:55:31 - Top Categories Refactor
1:57:00 - Category Dynamic Page
2:13:13 - Layout/Footer Refactor
2:19:46 - Updating Shadcn/ui component
2:22:51 - Blog Post Dynamic Page
2:32:28 - CustomMDX
2:55:26 - Latest Post Refactor
2:57:30 - Static Site Generation (SSG)
3:03:30 - Not Found
3:07:35 - Database with Prisma
3:10:23 - Deployment with Vercel
3:12:00 - Vercel Postgres
3:13:03 - Prisma Models
3:18:39 - View Count
3:23:35 - Route Handlers
3:37:16 - Vercel Deployment with Prisma
3:39:55 - Updating Domain on Vercel
3:43:04 - Query Data with SWR
3:54:51 - Skeleton
3:59:07 - Newsletter with Server Actions
4:04:24 - Validation with Zod
4:08:20 - UseFormState Hook
4:26:20 - Other Pages
4:33:27 - SEO with Metadata
5:13:07 - Conclusion

#BlogSite #WebDevelopment #MDX #Markdown #SEO #RSS #TailwindCSS #Prisma #Vercel #Postgres #DynamicOGImages #SyntaxHighlighting #shadcnui #nextjs14 #nextjs13 #javascriptframework #javascript #database #fullstack #reactjs

🔗 Resources:

Thanks for watching, and happy coding! 🚀

Reach out to me:

🎥 Other Videos to Watch:

[prashlovessamosa]

hey budding loved it validation part is too informative for me keep creating and sharing good stuff with us

[abdellah.coding]

i love it, you got a new subscriber bro, keep going <3

[hasanulhaquebanna]

there is no backend or admin panel! Would you mind mentioning why it's a Fullstack? Won't we are creating MDX file statically or locally or by github, but at the end isn't it static?

[torres]

I like this tutorial very much, btw, what is this extension to give the tip that your function is not defined ( in 4:01:15)

[rakeshkumarparida]

Bro could you please bring part 2 of it where you can implement a functionality to add multiple images in blog page as code pallet?

[abelmarkos]

Could do a couple more projects like this
On for eCommerce
And the other for chat app
I've not finished this tutorial yet but it seems there are a ton of useful information

[itsdio]

thanks for the content. definitely will try to build this one. but the keyboard sound is annoyingly loud.

[BunThong-cp]

Really good and thank to you. Could you do it more advance or adding more feature such as the advertising...

[tanny]

We currently store Markdown files in the 'contents' folder. However, if we're publishing new articles daily, this folder may become unwieldy over time. While this approach works well for infrequently updated documentation, is it suitable for frequent content creation? Should we instead consider implementing a content management system (CMS) like Sanity for more efficient handling of regularly published articles?

[corpsedad]

Hey bro. Is it possible to add mdx in some database and change it by cms

[deepakkumarchouhan]

Can you help me to make my web ap fast I am working on Nextjs protect but my data fetching is too slow ?

[jejeexd]

Does the blog have a pagination in the list of articles?

[Karma-eb]

I'm currently working on the app and wanted to ask a few questions about adding some dynamic features. Specifically, I’m interested in implementing the following:

1. **Comments**: I'd like to add a feature where users can leave comments. Could you guide me on the best way to approach this from both the front-end and back-end?

2. **Users**: I want to include user authentication and profiles. What are the best practices for managing user registration, login, and profile data securely?

3. **User Dashboard**: I would also like to create a user dashboard where users can see their information and possibly interact with their own data. What technologies or frameworks would you recommend for this feature?

I’d appreciate any guidance or resources you can provide to help me add these dynamic features .

[cant_sleeeep]

why swr? i don't understand? cant we just fetch in server components?

[KunalJadhav-pqtx]

hi bro
your content is super
i want to connect with you for collebration

[RamrachaiMarma]

Sadly it does not have many crucial bloggin features. Blog without ➡Search, ➡comment, ➡login, is like chicken curry without salt.