Build an Instagram Clone with NestJS & Next.js

Create and style signup and login pages with Next.js app router, using a file-based route structure and Tailwind, and link the pages to switch between sign up and sign in.

Learn to build reusable signup and login forms using ShadeCN’s card component, customize with the cn function and class overrides, and organize UI into an auth folder for Next.js app.

Explore form state management with react hook form and zod in ShadeCN to create accessible, validated client-side forms, and build reusable form components with radix ui and class variance authority.

Define a Zod-based signup schema (name, email, password, confirm password) with validation, integrate with React Hook Form via Zod resolver, and render a Next.js client form.

Create and validate a login form by building a login schema with email and password validation, wired to react-hook-form with zod, and mirror the signup flow.

Set up JWT authentication in a NestJS backend with BetterAuth, and connect to a local Postgres database using Drizzle ORM, creating a photosnap database and enabling PGAdmin4.

Initialize the NestJS back end inside the turbo repo using the NestJS CLI to create the project. Run through npm installs and adjust scripts to align with turbo tasks.

Install Drizzle ORM and Postgres, set up NestJS config to read environment variables, create a database module, and provide a Drizzle ORM connection via a pool for injection.

Implement end-to-end authentication with BetterAuth for NestJS and Next.js, persisting users with drizzle ORM and issuing JWT cookies. Enable global guards and public routes for secure, protected endpoints.

Implement database migrations to generate a drizzle ORM schema for BetterAuth, using a separate auth folder and the BetterAuth CLI to produce and apply migrations.

Build a Next.js UI with a BetterAuth auth client to enable email and password signup and login, proxied to the NestJS backend, and manage sessions via the secure betterAuth.sessionToken cookie.

Implement Next.js middleware to enforce authentication via the better off session cookie, redirect unauthenticated users to the login page, and expose public routes like /login and /signup.

Enhance user experience by auto logging in after signup and redirecting to the homepage with Next.js router. Add a global form error using React Hook Form to show authentication issues.

Set up the app shell with a responsive three-column layout using Tailwind CSS grid, featuring a posts feed, stories top bar, and a sticky sidebar for suggestions and settings.

Build a stories component for the Instagram clone, using mock data and interfaces to render user avatars and story thumbnails, with plans to connect via TRPC to the backend.

Build a photo feed with mock posts, user avatars, images, captions, likes, and a comments indicator using a feed component and card layout, ready for backend integration.

Build a sticky sidebar with a user profile card, settings panel, dark mode toggle, and logout, displaying the current user's email and name via the session hook.

Implement dark mode in a Next.js app using NextThemes, wrap the app with a theme provider, and add a theme switcher with a dropdown for light, dark, and system themes.

Finish the sidebar by rendering suggested users with mock data: avatars, usernames, a followed-by field, and a follow button, preview backend integration with Postgres, Drizzle ORM, TRPC, NestJS, and Next.js.

Implement a posts backend with drizzle ORM for Postgres, defining posts schema (id, image, caption, likes, created_at, user_id) and migrations, then build a posts service to persist and read posts.

Set up a tRPC server to provide an end-to-end type-safe API, sharing a single schema between back end and Next.js UI in a turbo repo, using NestJS TRPC and Zod.

Create and validate a post schema with Zod, expose a NestJS TRPC post router via HTTP, and implement create post mutation and find all query with typed input and output.

Finish backend posts with drizzle ORM and NestJS, exposing create and find all via TRPC, inject database providers, and format post responses by including user data and post metadata.

Create a reusable photo upload dialog wired to a NestJS backend. Build with shadecn dialog, drag-and-drop upload, image preview, caption input, and TRPC mutation to create a post.

Implement generic image uploads in a NestJS backend with multer, using disk storage and uuid-based filenames in an uploads directory for posts, avatars, and stories.

Apply a NestJS file interceptor to handle image uploads via a post route, extract the file, and pass it to the upload service for disk storage and future cloud storage.

Update the Next.js UI to upload images using form data, appending the image under the image key and posting to the Moulter endpoint to save the file, with API prefix.

Integrate a tRPC client into the Next.js UI to enable end-to-end type safety via the shared app router, and configure react query with an HTTP batch link to /api/trpc.

Add an image field to the create post mutation, save the image file name, and fetch posts with TRPC to update the feed with uploaded images served by NestJS.

Serve uploaded images as static assets from a nestjs backend, wire a next.js UI to access them via configured URLs, and refresh the feed cache after posting new content.

Implement a reusable avatar upload flow that updates the profile picture, displays the current avatar, and uses a shared avatar URL utility to fetch images from the server.

Upload a profile picture via form data to the api upload image endpoint, update the user with the image using better auth, and refresh posts and stories to reflect it.

Implement authentication for a tRPC server by adding a NestJS tRPC middleware that validates the better auth session cookie, populates the context with the user, and protects all procedures.