Next.js 14 Social Network App ( Instagram )

Next.js 14 Social Network App ( Instagram ), available at $54.99, has an average rating of 5, with 84 lectures, based on 4 reviews, and has 163 subscribers.

You will learn about Build user authentication using clerk user management library , this will include new user sign-up , email verification , sign-in , middlewares etc. Users can update their profile info like name , bio , profile picture right after their sign-in. And users can also make their account as private if they want. Users can find other users by searching their name and email id. Users can send follow request to other users , if it is accepted then the followers and following count will be incremented. If a user made his account as private , only his followers can see his profile , posts etc. Users can upload post with multiple images , include captions and also tag their friends. Likes , comments , save functionality for the posted uploaded. Users can also reply to the existing comments for a post. Users can archive their posts after uploading and they can see the archived posts in profile. Users can view saved , uploaded posts in their profile and they can unsave and edit if required. If a post is liked , commented , or any follow request is placed the end user will receive the notification. Users can search posts using their captions and hashtags , and if they can view the individual posts based on the search results. Entire application will be responsive , it can be viewed in desktops , i-pads and also mobile devices For every section source code will be provided separately Q/A Support This course is ideal for individuals who are Students who want to explore latest features of nextjs or Students who want to build real time projects using cutting edge technologies like nextjs , antd , tailwind css , mongodb etc It is particularly useful for Students who want to explore latest features of nextjs or Students who want to build real time projects using cutting edge technologies like nextjs , antd , tailwind css , mongodb etc.

Enroll now: Next.js 14 Social Network App ( Instagram )

Summary

Title: Next.js 14 Social Network App ( Instagram )

Price: $54.99

Average Rating: 5

Number of Lectures: 84

Number of Published Lectures: 84

Number of Curriculum Items: 84

Number of Published Curriculum Objects: 84

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Build user authentication using clerk user management library , this will include new user sign-up , email verification , sign-in , middlewares etc.

Users can update their profile info like name , bio , profile picture right after their sign-in. And users can also make their account as private if they want.

Users can find other users by searching their name and email id.

Users can send follow request to other users , if it is accepted then the followers and following count will be incremented.

If a user made his account as private , only his followers can see his profile , posts etc.

Users can upload post with multiple images , include captions and also tag their friends.

Likes , comments , save functionality for the posted uploaded.

Users can also reply to the existing comments for a post.

Users can archive their posts after uploading and they can see the archived posts in profile.

Users can view saved , uploaded posts in their profile and they can unsave and edit if required.

If a post is liked , commented , or any follow request is placed the end user will receive the notification.

Users can search posts using their captions and hashtags , and if they can view the individual posts based on the search results.

Entire application will be responsive , it can be viewed in desktops , i-pads and also mobile devices

For every section source code will be provided separately

Q/A Support

Who Should Attend

Students who want to explore latest features of nextjs

Students who want to build real time projects using cutting edge technologies like nextjs , antd , tailwind css , mongodb etc

Target Audiences

Students who want to explore latest features of nextjs

Students who want to build real time projects using cutting edge technologies like nextjs , antd , tailwind css , mongodb etc

Hello ,

Welcome to the course , Next.js 14 Social Media App ( Instagram ) 2024

In this course we are going to build a full-stack social network app which is almost similar to Instagram . We will be using latest version of Nextjs in-order to build this amazing app. So below will be the features and tech-stack of the project.

Tech Stack

Nextjs v14 for frontend and backend

MongoDB for database

Firebase for Storage

Zustand for state management

AntDesign for building UI components

Tailwindcss for Styling or customizing UI components

Clerk for authentication

Features

1. Build user authentication using clerk user management library , this will include new user sign-up , email verification , sign-in , middlewares etc.

2. Users can update their profile info like name , bio , profile picture right after their sign-in. And users can also make their account as private if they want.

3. Users can find other users by searching their name and email id.

4. Users can send follow request to other users , if it is accepted then the followers and following count will be incremented.

5. If a user made his account as private , only his followers can see his profile , posts etc.

6. Users can upload post with multiple images , include captions and also tag their friends.

7. Likes , comments , save functionality for the posted uploaded.

8. Users can also reply to the existing comments for a post.

9. Users can archive their posts after uploading and they can see the archived posts in profile.

10. Users can view saved , uploaded posts in their profile and they can unsave and edit if required.

11. If a post is liked , commented , or any follow request is placed the end user will receive the notification.

12. Users can search posts using their captions and hashtags , and if they can view the individual posts based on the search results.

13. Entire application will be responsive , it can be viewed in desktops , i-pads and also mobile devices

14. For every section source code will be provided separately

15. Q/A Support

Course Curriculum

Chapter 1: Introduction

Lecture 1: Create next app

Lecture 2: Why third-party UI library

Lecture 3: Ant design installation and demo

Lecture 4: Override ant design components – 1

Lecture 5: Override and design components – 2

Chapter 2: Authentication

Lecture 1: Why third-party library for authentication

Lecture 2: Setup clerk account and project

Lecture 3: Setup clerk in next.js app

Lecture 4: Custom sign-in and sign-up pages

Lecture 5: Sing-up , sign-in , sign-out processes

Lecture 6: Show current user details

Lecture 7: Style custom sign-in and sign-up pages – 1

Lecture 8: Style custom sign-in and sign-up pages – 2

Chapter 3: Database and storage connections

Lecture 1: Mongo DB Connection

Lecture 2: Firebase Connection

Chapter 4: Save users to mongo db

Lecture 1: Why should we save current user to mongodb

Lecture 2: User model

Lecture 3: Save user api

Chapter 5: Layout

Lecture 1: Layout skeleton design

Lecture 2: Sidebar – 1

Lecture 3: Sidebar – 2

Lecture 4: Making the layout conditional

Chapter 6: State Management Setup

Lecture 1: Install and setup zustand

Lecture 2: Store and read data with zustand

Lecture 3: Show loader

Chapter 7: User profile page

Lecture 1: Get user info

Lecture 2: Show user info

Lecture 3: Update user profile – 1

Lecture 4: Update user profile – 2

Lecture 5: Update user profile – 3

Lecture 6: Update user profile – 4

Chapter 8: Search users

Lecture 1: Search users – API

Lecture 2: Search users – UI

Chapter 9: Sending , receiving and accepting of follow requests – Backend

Lecture 1: Send follow request – API

Lecture 2: Accept follow request – API

Lecture 3: Reject follow request – API

Chapter 10: Sending , receiving and accepting of follow requests – UI

Lecture 1: Send follow request – UI

Lecture 2: Show pending follow requests – UI

Lecture 3: Accept follow requests – UI

Lecture 4: Reject follow requests

Lecture 5: Follow button conditions

Lecture 6: Cancel follow request

Lecture 7: Unfollow a user

Chapter 11: Show followers and following list

Lecture 1: Get followers and following of a user

Lecture 2: Show followers

Lecture 3: Show Following

Chapter 12: Upload post – Backend

Lecture 1: Post model

Lecture 2: Create post API

Chapter 13: Upload Post – UI

Lecture 1: New post ui – 1

Lecture 2: New post ui – 2

Lecture 3: Save post

Lecture 4: Tag other users in posts

Chapter 14: Show posts

Lecture 1: Get posts query

Lecture 2: Show posts

Lecture 3: Post component ui – 1

Lecture 4: Post component ui – 2

Chapter 15: Likes or dislike the post

Lecture 1: Like and dislike

Lecture 2: Like and dislike UI

Lecture 3: Post images – next and previous functionality

Chapter 16: Comments Backend

Lecture 1: Comments model

Lecture 2: Add comment , add reply api

Chapter 17: Comments UI

Lecture 1: Add comment

Lecture 2: Show comments – 1

Lecture 3: Show comments – 2

Lecture 4: Add reply

Lecture 5: Get replys

Lecture 6: Show replys – 1

Lecture 7: Show replys – 2

Chapter 18: User related posts

Lecture 1: Get user related posts

Lecture 2: Show user related posts – 1

Lecture 3: Show user related posts – 2

Lecture 4: Save and unsave post

Lecture 5: Archive and unarchive post

Lecture 6: Private account restriction for user related posts

Chapter 19: Notifications

Lecture 1: Notification model and apis

Lecture 2: Add notifications for post interactions

Lecture 3: Add notifications for follow requests

Lecture 4: Show notifications

Lecture 5: Clear notifications

Chapter 20: Search posts

Lecture 1: Search posts by hashtags

Instructors

K.Sathyaprakash Reddy
Full Stack Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 0 votes

5 stars: 4 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!