Build a Shopping App With Next.js + NestJS & Prisma

Initialize a NestJS backend with the CLI, create a new project, and run a local server on port 3001. Expose a root get endpoint via the controller and app service.

Generate a NestJS users module with its controller and service, and implement a post route to create users. Define a CreateUserRequest DTO for email and password with validation.

Enforce strict input validation with class validator and pipes, configure the NestJS app using a dot env config module, and implement structured logging with NestJS Pino for development and production.

Set up prisma in a nestjs project to generate typescript types from a schema.prisma, connect to postgresql, and run migrations, producing a type-safe user model and prisma client.

Set up a Prisma service in NestJS to create users with a type-safe Prisma client, hash passwords with bcrypt, handle unique email errors, and return only id and email.

Utilize Next.js server actions to call the create user API and persist new users to the database, while handling form submission with a server-side action and client form state.

Apply a server action to create users with a form data payload, using the no-files interceptor to parse multipart form data, handle errors, and persist the user in Nestjs.

Enable NestJS authentication with passport local strategy, verify email and password, issue a jwt, protect routes with a guard, and wire up an auth module and login route.

Implement NestJS JWT authentication by extracting the current user, signing a token with their id, and sending it as a httpOnly, secure cookie.

Learn to parse and use JWT cookies with a cookie parser and a NestJS passport JWT strategy, configure middleware, guards, and a me route to authenticate users.

Implement a global fetch wrapper in a Next.js app to send all post requests as JSON to a NestJS backend, converting form data to JSON and standardizing error handling.

Implement client-side login form with server action authentication, using use form state, error handling, and JWT cookie setting to complete user authentication in a Next.js app.

Set the authentication cookie on the Next.js server from the NestJS login response. Parse the JWT from the Set-Cookie header and store it as a secure, HttpOnly cookie.

Implement authentication checks on the Next.js UI using server-side middleware to protect routes, redirect unauthorized users to /login, and exclude static assets with a custom matcher.

Use the context API to create the auth context and provider in a Next.js app, use server actions to check cookies, and render header and routes based on auth.

Implement an end-to-end logout flow in a Next.js and NestJS app by clearing the authentication cookie on the server and redirecting to the login page, while enabling programmatic navigation.

Define a product model with id, name, description, price, and a one-to-many relation to users, then migrate the database to create a product table and enable CRUD via Prisma client.

Create a products module in NestJS and implement a controller, service, and Prisma integration; secure the create route with JWT auth guard, DTO validation, and current user context for persistence.

Learn to add a create product modal triggered by a floating action button, using client components, state management, and a Material UI modal to submit new products.

Create a product server action enables submitting a form from the create product modal, with client-side validation and server-side posting to save name, description, and price.

Fetch and render all products from a JWT-protected NestJS API, expose a get route, and display them in a responsive Next.js UI using server actions and a Material UI grid.

Learn how Next.js caches fetch results on the server, revalidates the products cache on demand or at intervals with tags and next/cache, and updates the user interface with latest product.

Implement product image uploads in the NestJS backend using Multer with disk storage to public/products, validate file type and size, and serve images as static content behind a JWT guard.

Build a product upload UI with a button and a hidden input to attach an image, display the file name, and upload via multipart form data to a NestJS server.

Expose product images publicly using NestJS serve static to expose the public folder, specifically public/products. Add image exists checks with fs promises, enabling the UI to fetch images when available.

Learn to fetch and display product images with the Next.js image component, configure allowed image domains, and style with Tailwind and Material UI to create a scrollable, image-rich product grid.

Learn to implement single product routing in Next.js using the app directory and a dynamic [productId] path, fetch the product from a NestJS Prisma backend.

Expose the get product API in Next.js, fetch a product by id on the server, and render a single product with image, description, and price using a material UI grid.

Implement Stripe checkout session creation in a NestJS backend, using Stripe SDK and env keys, to redirect users to Stripe's hosted checkout after selecting a product.

Initialize the stripe js client with a publishable key in a Next.js UI, then generate a checkout session via the NestJS backend and redirect to Stripe hosted checkout.

Learn to configure stripe webhooks for checkout events, use the Stripe CLI for local testing, and update a product's sold status via Prisma, guided by session metadata.

Filter available products by adding a status query parameter and sold is false in the Prisma find many query, then fetch only unsold items in the UI.

Set up a NestJS WebSocket gateway with socket.io to emit 'Product Updated' events. Notify Next.js UI on create and update to keep the product listing current.

Establish a client-side websocket connection using the socket.io client in the products grid. Listen for product updated events and trigger server-side revalidation of the products cache to reflect real-time updates.

Enforce JWT authentication on the NestJS socket gateway by verifying the token on handle connection and sending the JWT from the client via Socket.IO auth.