Vibe Coding: Build Full-Stack Inventory App with Claude Code

Install nodejs from the official site to run and manage dependencies, then set up visual studio code with essential extensions like auto close tag and es link for efficient coding.

React is a javascript library for building user interfaces with client-side rendering. Next.js is a framework on top of React that adds server-side rendering, static site generation, and built-in routing.

Explore the Next.js file structure, including the next folder, public assets, src/app layout.js, node_modules, and package.json dependencies, plus production builds with npm run build and deployment.

Create the primary page concept by building a root layout with a default page.js and functional components to render home, about, and profile routes.

Load and display assets in a Next.js project by placing images in the public/images folder and referencing them with an image tag, including optional alt, width, and height.

Explore client-side rendering with a live api demo using useEffect and useState to fetch and display product data (title, category, price), and contrast with server-side rendering.

Explore server side rendering by fetching data with an async get data function and returning json for fully rendered HTML and compare it to client side rendering.

Learn when to use server components versus client components in Next.js by following a flowchart that highlights data fetching, security, large dependencies, and interactive hooks.

Balance server-side rendering and client-side rendering by using use client, mix both in one component, and implement onclick listeners with alerts and API data.

Discover how next.js routing works with the app folder and page.js, using folder names to create routes like home, about, and contact.

Create a reusable menu with the next link component to navigate between home, about, admin, and contact pages, load it on every page to enable nested routing.

Pass and retrieve link queries in a web app by building an object with path name and query, then access the values on the target page using search param.

The lecture demonstrates using useSearchParams with link components to pass and retrieve query data, such as name and price, declare params, and read them on navigation with client-side usage.

Master programmatic routing with use router, implementing push, replace, refresh, back, forward, and prefetch, and pass parameters between home and about pages using query and search params.

Explore when to use server components versus client components in a full-stack project, highlighting secure server-side data fetching, database operations, and reduced client bundle size for better performance.

Learn how to configure a base path and environment variables in Next.js using next.config.mjs and .env files. Understand the client versus server component access to environment variables and security implications.

Configure the next config with an async headers function to pass key-value headers to routes like home and about, then verify by refreshing to see the response headers.

Master header security by configuring x content type options to control file downloads, hiding the x powered by header, and customizing page extensions and build output for Next.js apps.

Explore configuring Next.js connection keep-alive, HTTP agent options, timeouts, and content compression to optimize backend requests.

Explains how to optimize fonts in a next.js app by loading google fonts, configuring roboto with latin subset and multiple weights, and applying it globally via a css variable.

Learn to load a google font and integrate a local sunshine tropical font into your next year's project by creating a fonts folder and applying it with font classes.

Learn to load a CDN link in the main layout by inserting a script element with the CDN src, for libraries like bootstrap or exeus, and verify it loads (200).

Learn how to set up middleware in a Next.js project to handle request routing, authorization, and server-side redirects, including creating a middleware.js, using next response, and protecting admin routes.

Explore building a middleware that intercepts requests, uses next and redirect, logs the request url, and conditionally redirects routes like about to home.

Learn how to customize a Nexus 404 not found page by creating not-found.js, choosing server or client components, and fetching data with use param and use path.

Learn the instructor's six-step AI coding workflow: plan, constrain, generate, review, test, and commit to build a robust full-stack inventory app with reliable rules and safeguards.

Download and extract the starter repo to access all project resources, images, prompts, and notes. Access the course exercise file and the lecture-by-lecture git repository to follow along.

Design a full inventory management system by translating screenshots into a structured design brief, building each page from scratch in the cloud, ensuring a box-free, functional, segment-by-segment workflow.

Learn to build a full-stack inventory app with cloud code, guided by a capable ai assistant that enables real-time collaboration and keeps your learning momentum.

Design a scalable inventory management Claude Design ui using cloud design, building a reusable design system with tokens, components, and hi-fi prototypes across the dashboard, purchases, and sales return pages.

Create the product category and brand pages, load the model, and build inventory pages such as adjustment, purchase, and purchase return, using cloud design and VS Code.

Design and implement purchase management flows by creating view and create purchase pages, enabling modal edits, and building a purchase return workflow with attachments.

Design and implement transfer and expenses pages for a warehouse inventory app, including transfer details, transfer list, create transfer, expenses list, create expense, and expense category, using Claude design prompts.

Design six pages for suppliers, customers, and users, each with list and create views, using the same prompt to build a cohesive full-stack inventory design.

Design and implement a four-page report system for the full-stack inventory app, including sales, sales return, stock, and purchase reports.

Think about the design code demonstrates how to reuse a complete total page design with a consistent sidebar, header, and footer while updating the ggcontent area for each page.

Install and verify nodejs, xampp (apache and mysql), phpmyadmin, and VS Code with extensions such as auto close tag, eslint, material icon theme, postman, and cloud code by anthropic.

Create a new inventory project with create-next-app and Next.js 16, install dependencies via npm, and run npm run dev to launch the local server.

Install and configure essential packages for the inventory app, including pisma client, mysql2, next-auth beta, adapters, zod, uuid, formidable, pdf parts, and react hot toast.

Create a .env in the project root and paste database url, next auth secret, and local host settings for inventory app. Keep it out of git to protect sensitive data.

Set up the dashboard route and shared layout for a full-stack inventory app by loading dashboard.html with the sidebar, top bar, and footer as components, enabling dynamic charts.

Set up next.js 16 authentication with next-auth beta, using a credential provider and pisma to connect to mysql, seed an admin user, and protect routes with middleware.

Implement next.js auth with route protection using a proxy middleware, provide a sign-in form, and seed an admin user to secure the dashboard.

Build and refine a Next.js authentication flow by adding a profile, change password, and logout dropdown to the admin header, displaying real user data and redirecting after sign-out.

Implement and validate the login flow by showing validation errors for invalid email or password, ensure successful login without page refresh, and protect dashboard access after logout.

Access lecture code by lecture code, download specific source code from github, and review changes and cloud-backed updates for each lecture.