Next.JS 13 Advance SaaS Project: Build Blog Posting Platform

Focused View

Indian Coders

7:40:26

73 View

1. Introduction

1. Introduction.mp4

03:12

2. Setting Up Things

1. Creating a new Next.JS 13 App.mp4

06:12

3. Setting Up Backend Of Our Project

1. What is Prisma How to set it up.mp4

02:00

2. What are Database Models (Schemas) How we can define in this application.mp4

03:07

3. Setup MongoDB Database Connection With Prisma.mp4

06:03

4. Defining Models For Prisma and MongoDB (With Relations).mp4

08:58

4. Adding Authentication Introduction and Setup NextAuth.js (Auth.js)

1. Deep Dive Introduction To NextAuth.mp4

05:10

2. Setting Up NextAuth For Our Application.mp4

10:20

3. Setup Google, GIthub, Credentials Provider (Email and Password).mp4

03:57

4. Create User Registration Route For User Signup Via Credentials.mp4

11:45

5. Finishing Setting Up Everything With Credentials Provider.mp4

07:07

6. Getting Users Session Data In React Server Components.mp4

02:07

7. Getting Session Data In Client Components.mp4

05:21

5. Building Backend API for Blogs CRUD For Our Application

1. Analysing Steps To Build API.mp4

03:09

2. Building Users API Endpoints and Handlers.mp4

09:43

3. Building Categories API Endpoints and Handlers.mp4

08:14

4. Setting Up Cloudinary For Blog Insertions.mp4

04:59

5. Add Blog Handler.mp4

19:30

6. Completing BLOGS Operations.mp4

07:18

7. Summary.mp4

00:43

6. Settting Up Frontend and Designing Basic Layouts

1. Setting Up Frontend.mp4

02:27

2. Designing Header Of Application.mp4

12:28

3. Desinging Homepage Carousel.mp4

14:24

4. Getting Blogs From Server.mp4

09:24

5. Setting up ShadCN UI.mp4

03:18

6. Desinging Blog Item Card.mp4

11:31

7. Limiting Amount Of Words To Display in Card.mp4

03:16

8. Design Links For Exploring More Articles.mp4

02:32

9. Designing Footer.mp4

11:17

7. Designing Blogs Page

1. Designing Blogs Home With Filters and Search.mp4

12:18

2. Rendering Real Data To Blogs.mp4

03:30

8. Designing Blog Writing Page With Rich Text Editor

1. Starting Blogs Add Page.mp4

08:35

2. Preview Selected Image From Local.mp4

08:11

3. Adding Dropdowns and Editor.mp4

06:21

4. Implementing React Hook Form For Handling Form.mp4

10:40

5. Getting Rich Text Editors Data.mp4

06:52

6. Customizing NextAuth For Adding ID in Session.mp4

05:53

7. Sending Post To Database.mp4

12:27

9. Designing Blog View Page

1. Designing View Page.mp4

20:25

10. Designing Profile Page

1. Design Structure.mp4

12:45

2. Adding Real Data To Profile.mp4

10:41

11. Designing Edit Page Of Blog

1. Design The Structure.mp4

04:56

2. Rendering HTML Data to Rich Text Editor.mp4

09:22

3. Adding Animations.mp4

09:49

4. Working on cache.mp4

04:12

5. Blog Delete Functionality.mp4

07:18

12. Desinging Search Page Functionality

1. Designing Search Page.mp4

10:01

2. Sending API Request.mp4

07:15

3. Remaining Functionalities.mp4

02:53

13. Adding Google And Github Sign In

1. Adding Passwordless sign in.mp4

08:20

2. Customizing NextAuth For Storing Google and Github Signed In Accounts.mp4

10:27

3. Designing Customized Login Page.mp4

15:38

4. Completing Login.mp4

06:18

5. Adding User Register Frontend.mp4

04:59

14. Optimizing and Addons

1. Fixing Blogs Page Filters.mp4

09:33

2. Adding Location In BlogCard.mp4

02:52

3. Protecting Routes With Middlewares.mp4

10:32

4. Making Header Responsive.mp4

12:10

5. Logout Functionality.mp4

05:41

Description

Learn How To Build A Full Stack Real World Blog Posting Platform Like Medium With Latest Techs In Web Development

What You'll Learn?

Learn How to create a Fully Authenticated Blog Posting SaaS
Learn latest technologies with NextJS 13 Concepts
Create a Responsive Design With Tailwind, shadCN UI
Integrate NextAuth (AuthJS), Prisma, MongoDB
Learn Modern Development With Image Upload To Cloudinary, Rich Text Editor, Google and Github Sign In and Much More.

Who is this for?

Next/React/MERN Developers who wants to learn how to build an advance and real world apps with Nextjs

Any Level JavaScript Developer With Basic API and Frontend Knowledge

What You Need to Know?

Basic NextJS 13 Knowledge Required. You can watch the resources provided in course description.

More details

Description
Learn how to build a fully-featured SaaS blog posting application with Next.js 13, NextAuth, Prisma, MongoDB, Typescript, React, Tailwind, ShadCN UI, middlewares, API routes, passwordless sign-in, protected routes, rich text editor, and Image upload to Cloudinary.
This course is perfect for developers who want to learn how to build a modern, scalable, and secure blog posting application. We will cover all the essential concepts and technologies, including:
Next.js 13: A React framework that makes it easy to build server-rendered and static websites.
NextAuth: A headless authentication solution for Next.js applications.
Prisma: A modern ORM that makes it easy to interact with MongoDB from TypeScript.
MongoDB: A scalable and flexible NoSQL database.
Typescript: A typed programming language that helps to prevent errors.
React: A popular JavaScript library for building user interfaces.
Tailwind CSS: A utility-first CSS framework that makes it easy to style your application.
ShadCN UI: A beautiful and responsive UI library for Next.js applications.
Middlewares: Custom code that runs between the client and server.
API routes: Routes that expose your application's data to other applications.
Passwordless sign in: A secure and convenient way for users to sign in to your application.
Protected routes: Routes that can only be accessed by logged-in users.
Rich text editor: A tool that allows users to create and edit rich text content.
Image upload to Cloudinary: A service that makes it easy to upload and store images.
By the end of this course, you will have the skills and knowledge to build your own SaaS blog posting application. You will also be able to apply these skills to build other types of web applications.
What you will learn:
How to set up a Next.js 13 project with NextAuth, Prisma, MongoDB, and Typescript.
How to build a user authentication system with NextAuth.
How to interact with MongoDB from TypeScript using Prisma.
How to create a beautiful and responsive UI with Tailwind CSS and ShadCN UI.
How to add middlewares to your application to protect it from attacks.
How to expose your application's data to other applications using API routes.
How to implement passwordless sign in for your users.
How to protect routes in your application so that only logged-in users can access them.
How to use a rich text editor to create and edit rich text content.
How to upload images to Cloudinary and display them in your application.
Who this course is for:
Developers who want to learn how to build a modern, scalable, and secure blog posting application.
Developers who want to learn how to use Next.js 13, NextAuth, Prisma, MongoDB, Typescript, React, Tailwind CSS, ShadCN UI, middlewares, API routes, passwordless sign in, protected routes, rich text editor, and image upload to Cloudinary.
Developers who want to learn the latest trends in web development.
Who this course is for:
Next/React/MERN Developers who wants to learn how to build an advance and real world apps with Nextjs
Any Level JavaScript Developer With Basic API and Frontend Knowledge

User Reviews

Rating

average 0

Total votes0

Focused display

Hi,We are Indian Coders, helping you out in Web Development, Game Development, and much more. We are motivated to provide content to the Students which they actually require to understand and without wasting much time they can learn and build things on their own.So If you have doubts and need support, just refer to the comment section for the doubts and we are always ready to help you out.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.