Summary
Keywords
Full Transcript
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 👉 Source Code: https://greatstack.dev/go/blogger SUBSCRIBE: @GreatStackDev ❤️ Complete JavaScript Course with Certification: 👉 https://greatstack.dev/go/javascript-course - 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. Download the assets: https://greatstack.dev/assets/next-js-blog-app Next JS Beginner's Full Course: 👉https://youtu.be/r5kO-E6NI14 Watch Full Stack Food Order Website tutorial: 👉 https://youtu.be/DBMPXJJfQEA Watch Full Stack E-commerce Website tutorial: 👉 https://youtu.be/y99YgaQjgx4 #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: 👉 https://youtu.be/4ag1LsgIUc0 Build ChatGPT Clone In React: 👉 https://youtu.be/EzkWAviyYgg Build AI Image Generator with OpenAI In React 👉 https://youtu.be/PZG2MvOjud0 Create Weather App In React 👉 https://youtu.be/7JqdjWB88Kk ------------------------------------- Recommended HTML and CSS Projects: Learn Complete HTML and CSS from basics: ► https://www.youtube.com/playlist?list=PLjwm_8O3suyO2gdXdWHKgM-mO2Y251zzU Make A Complete Website for college using HTML & CSS: ► https://www.youtube.com/playlist?list=PLjwm_8O3suyP5kGKmwS_DM0Hs1j7fshi5 How to make personal resume website step by step: ► https://www.youtube.com/watch?v=qCFN8EujbGI How to make an Ecommerce Website Design: ► https://www.youtube.com/playlist?list=PLjwm_8O3suyM_2Lo9aAIw3HqjOPor8j9g How to make travel website design with HTML CSS Bootstrap: ► https://www.youtube.com/watch?v=AiaEqc9UMf8 ------------------------------------- Images Credit: https://www.pexels.com/ https://unsplash.com/ ------------------------------------- Connect with me: 👉 https://linktr.ee/iamavinashkr Connect with GreatStack: Instagram: https://instagram.com/GreatStackDev Twitter: https://twitter.com/GreatStackDev Facebook: https://facebook.com/GreatStack
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
