Next.js 15 Full Stack Project: Build a Blog App with Dashboard using Next.js, Clerk, and MongoDB

🎨 Eraser Diagram:

🔍 What sets this course apart is the advanced search functionality. Users can search by title, limit results, and sort through a modern sidebar, utilising the latest MongoDB search query techniques. Everyone can leave, edit, and delete their comments on the post pages, fostering an interactive community.

🔗 Source Code & Final Version:

🎨 Eraser Diagram:

💻 All you need is a basic understanding of JavaScript and React to start this project. If you're as excited as we are, let's dive in and build this incredible project together! Subscribe, hit the bell, and join us on this coding adventure. 🚀✨

00:00 - Intro
12:50 - Create the header section
30:04 - Add next-themes to apply dark mode
43:15 - Add authentication using Clerk
01:07:50 - Sync Clerk data to your application with webhooks
01:26:40 - Add mongoDb and save users from Clerk
02:09:03 - Add the create post page UI and protect it as an admin
02:28:15 - Complete upload post image functionality
02:44:00 - Complete upload post functionality
02:55:53 - Complete post page functionality
03:04:53 - Add recent article section to the post page
03:10:12 - Complete the home page
03:14:44 - Complete the search page
03:25:49 - Add the remaining pages like about, projects, and the footer
03:30:54 - Complete the profile page in the dashboard
03:39:21 - Show the user posts in the dashboard
03:54:55 - Show the users inside the dashboard
03:59:04 - Complete the app overview inside the admin dashboard

[reactproject]

🔗 Source Code & Final Version:


🎨 Eraser Diagram:

[karacan]

Hey Sahand,

I just wanted to say how much I love your videos! I’ve been following your work for a while now, and I really admire how genuine and real your teaching style is. You’re one of the few creators who doesn’t just code in an idealized bubble—you approach projects like a real developer would, starting with a proper UI and working through things systematically. It’s so refreshing and relatable.

That being said, I had a small thought about your latest video. The moment I saw Clerk mentioned for authentication, I kind of paused the video. Personally, even for the smallest projects, I prefer building the authentication myself. It just feels more robust and in my control, especially since relying on a third-party service for such a critical part of the project can be risky in the long run.

Of course, I haven’t even watched the full video yet, and I’m sure you’ve got good reasons for using it. I just hope you stick to the kind of content that’s brought you so much success—the practical, down-to-earth coding approach we all love. Keep doing what you’re doing, because it’s inspiring a lot of us!

Much love and best wishes,

[MenAreBrave-Bat]

Thanks sir . I had completed this project using mern. Now I'll do that using nextjs15.

[musicchoice]

Thank you so much for this amazing tutorial! 🙌

[kooyaw]

Incredible, learnt a lot from the MERN stack project.

[عزیز]

Thanks a lot! I finished the project using MERN. I’m really excited to try out the new features and make everything run even smoother. Can’t wait to show you how it turns out!

[sanazghadimi]

Thanks sir, I have been waiting for this project. Thanks very much.

[leetcodemonkey]

Learnt a lot from your Mern blog project :)

Can you make e-commerce projects using Mern (and Nextjs version) in the future?

[chamathtoo]

YOU MEAN A LOT ME SIR AT THIS MOVEMENT. THANK YOU SO MUCH!!

[ramprasadchauhan]

Thank you more making with nextjs. Sir if possible please use typescript in future project.

[kobbie]

Hello Mr Sahand, great project once more, im yet to launch a promising startup I have been building for months.its something I think you would be interested in, how can I reach you?

[smartdriver]

Thanks for sharing the tutorial, like and comment

[obayedullahkhan]

Hello sir, I have also degrade the version of clerk but metadata issue is not solving. Even I tried by redeploy the project.

[obayedullahkhan]

I am facing an issue with the latest Next.js version (15). When I create the blog project following your tutorial I am getting an hydration error even I clone your GitHub code and set up the environment variables, still I am getting the hydration error. But when I create a new Next.js app using version 14, the hydration error doesn't occur. What steps should I take to resolve this issue? Should I go with next14?

I plan to use the project for production, so I want to ensure that everything is set up optimally. Could you suggest the best practices for making my Next.js website production-ready and improving SEO?

Lastly, thank you again for your help with my previous comment!

[Sneakingmentor]

Is this a full video or part 1? I am building instagram using next js from your channel.

[kashifmurtaza]

Is any plan for eCommerce Project, please

[TV-tqch]

Firstly I am very thankfull to you creating a amazing and very helpful content I have a question about deployment process is this project is for deploy on vercel and is this possible to deploy it on hostinger without cloud and vps. and why you preffered to use firebase instead of cloudinary for storing image?

[MohammadNseirat]

Is there any mern project coming to the channel or not?

Thanks for you 🙏

[Bodesx]

nice tutorial but what about the user comment section how can I go about it

[جريدةالمنتخب-بص]

I LOVE YOUR chanel toy are emzaing keep going with next js and give us movie app with next js