Home

/

Courses

/Next.JS Real World Blog Project With MongoDB, Prisma, Next-Auth, Tailwind, ShadCN and Much More

Next.JS Real World Blog Project With MongoDB, Prisma, Next-Auth, Tailwind, ShadCN and Much More

Learn with Nikhil Thadani

17 modules

English

Certificate of completion

Lifetime access

Master Next.js and build a professional blog website with modern technologies

Overview

🔥 Course Description:

🌟 Learn how to build a real-world blog project using Next.js, MongoDB, Prisma, Next-Auth, Tailwind, ShadCN, and many more technologies. This course will guide you through the entire process of creating a fully functional blog website with user authentication, database integration, beautiful UI design, and advanced features.

Batch Information:

✅ Start date: 28th July 2023

✅ Duration: 10hr+

✅ Lecture Mode - Recorded 

✅ Recording Post Session - Available for Lifetime
 

🙋‍♂️ What You Will Learn:

✅ Setting up a Next.js project and understanding its core concepts.
✅ Building a dynamic and interactive front-end using Next.js.
✅ Integrating Next-Auth for secure authentication and user management.
✅ Creating a robust and scalable back-end using MongoDB and Prisma.
✅ Styling your application with the flexibility of Tailwind CSS.
✅ Exploring the unique capabilities of ShadCN (add the specific features or functionalities of ShadCN).
 

🎯 Course Goals:

🏆 Master the essential concepts of Next.js and its powerful ecosystem.
🏆 Build a real-world blog project from start to finish, showcasing your newfound skills.
🏆 Gain proficiency in integrating MongoDB, Prisma, Next-Auth, Tailwind CSS, and ShadCN into your projects.
🏆 Understand the best practices for deploying and scaling Next.js applications

 

💻 Prerequisites:

✔️ A solid understanding of HTML, CSS, and JavaScript.

✔️ Familiarity with React.js and basic knowledge of Next.js (though not mandatory) will be advantageous.
 

🌐 External Resources:

🔗Source Code: https://github.com/Nikhilthadani/nextjs-13-full-stack-blog
🔗Prisma: https://www.prisma.io/
🔗MongoDB: https://www.mongodb.com/
🔗Next.js: https://nextjs.org/
🔗React: https://react.dev/
🔗Tailwind CSS: https://tailwindcss.com/
 

Are you ready to embark on this exciting journey of building a Next.js Real World Blog Project? Enroll now and take your web development skills to new heights! 💡🚀 

Key Highlights

Build a complete blog project with Next.js

Integrate MongoDB and Prisma for database management

Implement user authentication with Next-Auth Google and GitHub and Email Sign In

Create a beautiful UI design using Tailwind CSS

Utilize ShadCN for UI Component Library

User Sessions Management With Server and Client Components

Advanced Security With Protected Routes Using Middleware System

Learn To Upload Images With Next.JS to a Cloud System

What you will learn

Learn Next.js fundamentals

Understand the basics of Next.js and its key features

Integrate MongoDB and Prisma

Learn how to connect and manage a MongoDB database using Prisma

Implement user authentication

Create a secure authentication system using Next-Auth

Build A Secure REST API

Build API With Prisma/MongoDB, Password Encryption

Build A Modern and Responsive UI

Build UI With Tailwind, ShadCN UI, React Notifications, Server and Client Components

Build Blogs Page With Advanced Filters

Build Blogs Page With Search and Filter Features and Responsive Designs

Create Blog With Image and Editor

Integrating Rich Text Editor For Blogs and Have Image Upload And Preview To publish a blog

Profile / Search Pages

Create profile pages with image and search features

Modules

Overview

2 attachments • 9.96 mins

Overview and Demo

Github URL

Introduction To Project's Backend

7 attachments • 29.58 mins

Project Intro

Introduction

Create a fresh Next.js app and learn about Folder directories

Introduction to Prisma ORM and Setting Up

Learning about Database Models and Schema

Setting Up Prisma and Connect To MongoDB Database

Defining Database Models

Implement Authentication with Auth.js (Next-Auth)

7 attachments • 45.86 mins

Introduction to Auth.js (NextAuth)

Setting Up Next Auth In Our Project

Setting Up Credentials Provider

Building User Registration Functionality (Register Endpoint)

Updating Credentials Provider For User Login

Get Session Data In Server Components

Getting Session Data In Client Components

Designing The API

3 attachments • 21.12 mins

Analyzing Steps For Building The API

Building User's API Endpoints

Building Categories API

Designing Blogs API With Image Upload

4 attachments • 32.52 mins

Setting Up Cloudinary

Designing Add Blog Handler With Image Upload

Completing BLOG Operations With Search and CRUD

Summary For Backend

Starting The Powerful Frontend

2 attachments • 14.93 mins

Setting Up The Dev Environment

Building The Header

Designing Homepage

7 attachments • 55.74 mins

Designing Carousel Of Homepage

Getting Blogs From Backend

Setting up ShadCN UI

Designing Blog Display Card

Limit Amount Of Words From Description To Be Shown In Card

Design Explore More Link

Design The Footer

Designing Blogs Page

2 attachments • 15.81 mins

Design Blogs Page With Filters

Rendering Real Blogs To Blogs Page

Designing Blog Add Page With Rich Text Editor

7 attachments • 59.05 mins

Designing Topbar of Add Page

Preview Selected Image

Adding Form and Editor

Get Form Data With React-Hook-Form

Get Editor's HTML Data

Modify NextAuth To Add ID in Session

Sending Request To Add BLOG

Designing Blog View Page

1 attachment • 20.42 mins

22 Viewing the blog

Designing Profile Page

2 attachments • 23.44 mins

Profile Page Design

Add Real Data To Page

Finishing EDIT and DELETE Functionality

5 attachments • 35.67 mins

Designing EDIT Page

Rendering HTML Data To Editor

Add Loading Animations (Skeleton and Notification)

Working On DELETE Blog

Fix cache Of fetch()

Building Search Page Functionalities

3 attachments • 20.18 mins

Search Page Design

Sending API Request For Search

Remaining Functionalities

Customizing NextAuth

2 attachments • 18.79 mins

Adding API Keys For Google and GitHub Sign in

Storing Google and GitHub Logged In Accounts (Re-recorded)

Designing Custom Login and Signup Pages

3 attachments • 26.93 mins

Designing Login Page

Completing Login Functionalities

Creating User Register Functionality

Optimizations and Add-Ons

4 attachments • 31.28 mins

Add Location In Cards

Protecting Routes With Next.js Middlewares

Creating Responsive Header (Building Side Menu)

Completing with Logout Feature.

Updates

1 attachment • 1 mins

Course Updates

Certification

When you complete this course you receive a ‘Certificate of Completion’ signed and addressed personally by me.

Course Certificate

FAQs

How can I enrol in a course?

Enrolling in a course is simple! Just browse through our website, select the course you're interested in, and click on the "Enrol Now" button. Follow the prompts to complete the enrolment process, and you'll gain immediate access to the course materials.

Can I access the course materials on any device?

Yes, our platform is designed to be accessible on various devices, including computers, laptops, tablets, and smartphones. You can access the course materials anytime, anywhere, as long as you have an internet connection.

How can I access the course materials?

Once you enrol in a course, you will gain access to a dedicated online learning platform. All course materials, including video lessons, lecture notes, and supplementary resources, can be accessed conveniently through the platform at any time.

Can I interact with the instructor during the course?

Absolutely! we are committed to providing an engaging and interactive learning experience. You will have opportunities to interact with them through our community. Take full advantage to enhance your understanding and gain insights directly from the expert.

About the creator

About the creator

Learn with Nikhil Thadani

Hello there! I'm thrilled to introduce myself as a seasoned full-stack developer with a passion for teaching and sharing my knowledge with others. With over four years of hands-on experience in web development, mobile app development, and game development, I have honed my skills and gained valuable insights into the ever-evolving world of technology.
 

Rate this Course

₹ 799.00

999

×

Order ID:

This course is in your library

What are you waiting for? It’s time to start learning!

Illustration | Payment success

Share this course

https://undefined/courses/next-js-64b6a005e4b056eb35f5df5d

or

×

Wait up!

We see you’re already enrolled in this course till Lifetime. Do you still wish to enroll again?

Illustration | Already enrolled in course