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
1 attachment • 9.96 mins
Overview and Demo
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.
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
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!
Wait up!
We see you’re already enrolled in this course till Lifetime. Do you still wish to enroll again?