How To Create Full Stack Blog App Using Next JS & MongoDB | Backend, Frontend and Admin Project

Learn How To Build A Full Stack Blog Website Using Next JS And MongoDB | Create A Full Stack Blog App / News website using Next JS | Next JS Project tutorial step by step 2024

SUBSCRIBE: @GreatStackDev

❤️ Complete JavaScript Course with Certification:
- Beginner + Advance + ES6 + Notes
- 30 Project With Source Code
- React Beginner course with project
- Course Completion certificate
- Chat Support

-------------------

In this tutorial we will learn to make a Full Stack website using Next JS, MongoDB and Tailwind CSS. In this step by step Next JS project tutorial we will create the Blog App / website. In this full stack website project we will create forntend, Backend and admin panel.

On our website or web app we will display the blog post. We will create a admin panel / admin dashboard using Next js to upload and manage our blog post. We will also create the Backend for our APIs. Using these Backend API we can save the blog post on our MongoDB database and we can also fetch the Data from MongoDB database and display the blog post on your website.

To design our Blog Website or Blog App we will use Tailwind CSS so that we can easily design our components layout in Next JS Project.

Next JS Beginner's Full Course:

Watch Full Stack Food Order Website tutorial:

Watch Full Stack E-commerce Website tutorial:

#Nextjs #FullStack #GreatStack
Next JS projects, Next JS Full Stack Project, Full Stack Web development

Timestamp:

00:00 Project Overview
06:43 Setup Next JS Project
12:49 Create Header section
25:02 Create Blog List for Home page
41:42 Filter blog by Category
47:33 Create Footer
52:25 Create Blog Post page
01:26:34 Start building Backend
01:28:14 Setup MongoDB Database
01:40:25 Create API
02:03:20 Create Admin Dashboard
02:22:14 Create Add Product Page
03:03:46 Display blog list using API
03:19:52 Create Blog List Page for Admin
03:43:02 Create Delete Blog Feature
03:56:56 Create Email subscription Feature
04:14:11 Create Email subscription Page for Admin

-------------------------------------
Build more React JS projects:

Complete Portfolio Website In React:

Build ChatGPT Clone In React:

Build AI Image Generator with OpenAI In React

Create Weather App In React

-------------------------------------
Recommended HTML and CSS Projects:

Learn Complete HTML and CSS from basics:

Make A Complete Website for college using HTML & CSS:

How to make personal resume website step by step:

How to make an Ecommerce Website Design:

How to make travel website design with HTML CSS Bootstrap:

-------------------------------------
Images Credit:

-------------------------------------
Connect with me:

Connect with GreatStack:

[Sneakingmentor]

Super excited

I know we all want chat app. Guys share hard.

[freguenshoodjean]

If someone tell you, coding is difficult, you cant learn from YouTube. Just tell that person (Greatstack) is exist... you teach me 80% of all what i know about coding . Thank you deep down my heart ❤

[bharat...chaiaustudent__h.c.]

Extremely awaited for full stack chat app

[kashmirtechtv]

1st video that doesn't include those fancy 3rd party services like convex, prisma, drizzle, kinde, oauth, that's great👍👍👍👍❤❤

[pavant]

Much awaited, Nextjs, tailwind, , without typescript . Thank u sir, keep uploading .

[divyadharshini]

Your projects are just awesome, it's beginner friendly ! Thanks 👍

[deepasharma]

Wow so amazing!! And i am excited to start soon!!😍🔥
Still love to learn from u moreee!!

[argharoy]

You are a gem of a person bro. Thankful to you for your projects🙏

[shahzaibkhan]

Sir, I was in learning phase for almost 2 years and knew nothing and then I started following you. Truly Sir, I realized what I actually have to do. Made me a true developer by following your projects. I strongly suggest you to follow Greatstack if you want to furnish yourself in your skills. Love you from Pakistan Sir.

[Hama_Maik]

I completed the project by the grace of Allah.
I was looking for the exact blog web..
Thank You Love from Pakistan 💚...

[ansarmahmood.]

Thank you, sir, for the project. I've been eagerly waiting for a project like that.

[bharat...chaiaustudent__h.c.]

Great journey great learnings from great stack...

[Lord-Zee]

I came across ur videos just recently and it has helped me alot i really appreciate you 🙌🙏

[sayankhutia]

Great Tutorial with proper and easy to understand explanation. Thanks a lot.

[mohitsahu]

very nice
Great journey great learnings from great stack...

[theintjengineer]

Amazing video. Thank you.

It'd be nice if we had the option for users to login and post comments, like, etc.

Also, if the text editor supported syntax-highlighted code snippets and images along the blog's body.

Also, using Drizzle with PostgreSQL would be an option, so we could easily and _cheaply_ host that on a Docker Container.

[Mr_Gentle_Tutorial]

GreatStack is Great indeed ❤🎉, Can't wait for new upload..thanks a million from Your student

[adityashinde]

thank you so much sir for this video learnt so many new concepts. you have explained each and everything in details.

[bharat...chaiaustudent__h.c.]

Amazing video qaluality pure learnings simply learnings all topics covered in very simply way

[ajiteshmishra]

Hello,

Your projects are helping us great.

Please create one video using Redux OR Redux Toolkit with some JWT authentication technique on any React Application.


If you create this project, we will learn a lot.