Next.js 14 Social Network App ( Instagram )

Use a third-party authentication library to speed secure login, registration, and private routes in a Next.js social app. Compare standard versus library approaches with Clerk, Firebase, and NextAuth for setup.

Set up a clerk account and create a new application, enable email authentication, customize the sign-in text, and scaffold the clerk project in the dashboard for a Next.js app.

Learn to integrate Clerk authentication in a Next.js 14 app by installing the Clerk library, configuring environment keys, wrapping the app with ClerkProvider, and updating middleware for secure sign-in flows.

Access current user details in a Next.js 14 app by calling the clerk current user function with await, and render user id, name, and email from the email addresses array.

Learn to style sign-in and sign-up pages with a two-column desktop grid, a centered form on a primary background, remove shadows and watermarks, and apply Montserrat.

Refine sign-in typography, raise font weight, and center the project title and caption. Replicate sign-up styling and implement responsive lg grid behavior with Tailwind.

Set up the MongoDB connection for a Next.js 14 social network app by installing mongoose, configuring a .env database URL, and implementing a connect function in config.

Set up a Firebase storage connection in a Next.js app by creating a Firebase project, extracting web config, and wiring next public env vars.

Store current user details in the MongoDB users collection to preserve accounts when changing authentication providers from Clerk, ensuring no data is lost during migration.

Define a MongoDB user model with Mongoose for a Next.js social network, including clerk user id, name, email, profile pic, bio, followers, following, follow requests, and privacy settings.

Create server actions to save the current user to MongoDB using clerk data and to get current user, with robust payload handling and error responses.

Design a persistent layout skeleton for a Next.js app with a left sidebar and a dynamic right content area, wrapped by a layout provider and a simple tailwind setup.

Create a sidebar in a Next.js 14 social network app, with a menu items module, project title, and logged-in user, enabling active navigation to home, search, profile, and notifications.

Learn how to make the sidebar responsive by hiding it on mobile and opening a left drawer with a hamburger icon, controlled by a mobile state.

Implement logout with Clerk's useAuth signOut, render the layout conditionally to hide the sidebar on sign in or sign up routes, and navigate to the sign-in page after logout.

Learn to fetch current user data via a server action and store it in zustand for access across the application, with a MongoDB connection and user interface updates.

Build a dynamic user profile page in a Next.js 14 social app by fetching user info with an id-based route, displaying posts, followers, and edit profile for the current user.

Show the profile header with the profile picture, name, edit profile, post/followers/following counts, and bio using a two-part responsive flex layout, with edit shown only for the logged-in user.

Create and manage multiple user accounts with temporary emails and OTP verification, log in, and edit profiles, while implementing server components and suspense loading in Next.js 14.

Learn to upload images to firebase storage in a Next.js app by creating a storage bucket, a helper to upload bytes and fetch download URL, and an update profile flow.

Implement an update user profile server action in Next.js 14, process a flexible payload, update by user id, revalidate the profile path, and manage UI feedback.

Builds the search users UI for the Next.js 14 Instagram app, wiring a button-driven input to a server action to fetch user results and navigate to profiles.

Create a send follow request server action that updates both sender and receiver user documents in MongoDB by pushing IDs into follow request arrays and returns a success message.

Implement the accept follow request server action by updating the receiver's followers with the sender and the sender's following, while removing the received and sent follow requests.

explain the reject follow request server action, removing the sender from the receiver's received request and the receiver from the sender's sent request, using try-catch and returning success or error.

Design and implement the send follow request user interface in a two-account setup, toggling between edit profile and follow button while calling a server action and managing loading states.

Learn to implement the accept follow request UI in Next.js 14, integrating the server action, handling loading states, parameter passing, and conditional rendering for no pending requests.

Integrate reject follow request server action into the follow request UI, manage loading states with distinct actions, and ensure smooth navigation to sender profiles in a Next.js 14 Instagram app.

Configure conditional rendering for the follow button in a Next.js 14 social app, showing follow only when the target user isn’t the viewer and no request is pending.

Implement cancel follow request by writing a server action that removes sender and receiver IDs from follow request arrays and updates documents, showing loading and success messages.

Implement unfollow by showing an already following state and a functional unfollow button with loading feedback. Update backend and frontend logic using sender and receiver IDs.