Build an ERP System with Next.js 16, Strapi 5 & ShadCN UI

Create a Strapi project by running the npx create-strapi-app command with latest, name it backend, skip strapi cloud, use sqlite, skip typescript, install dependencies, and initialize a git repository.

Run the strapi project locally from the backend folder with npm run develop, then open admin at localhost:1337 to use content manager, media library, and content type builder.

Create the first collection type category in Strapi, defining name and description, linking categories to products, and publishing entries via the content manager.

Create a product collection with fields name, price, stock, barcode, description, and a single image, then establish a many-to-many relationship with categories to organize products.

Create a reusable sale item component with a product relation, quantity, and decimal price, organized under a shared category, for use in the upcoming sales table.

Create a sales table by defining a sale collection with date, total, and customer name fields, and use a repeatable sale item component linked to products with quantity and price.

Learn to use Strapi endpoints by creating categories and products, authenticating with a JWT, and fetching data with a bearer token while populating images and categories.

Initialize a git repository for the backend project, connect it to GitHub, create a public inventory backend repository, and push all changes to the main branch.

Create a Next.js front-end project using npx create next app, choosing Tailwind, app router, and Turbo Pack, while opting out of TypeScript, ESLint, and the src directory.

Launch a Next.js 15 frontend, run npm run dev to view the app on port 3000, and integrate chassis and UI components to copy the dashboard and fetch chat data.

Install dependencies and add components to set up a Next.js 15 admin dashboard, then apply a green tailwind v4 theme and restart the project to apply changes.

Learn to integrate Tailwind v4 and Shadcn with Next.js 15 by adding a theme provider, building a dark/light toggle, and fixing hydration and cursor issues with html tag tweaks.

Initialize a new git repository from scratch, add all files, commit changes, create a main branch, and push the frontend project to a public GitHub remote.

Update the ERP app sidebar by changing the app name and logo, selecting icons, renaming items (dashboard, category, products, sales, reports, settings), and wiring Next.js links to the correct routes.

Create a dashboard layout in Next.js so the right-side content updates with categories while the main dashboard stays persistent, using layout.js and data.json to render via children.

Commit and push the updates to the GitHub repository, staging all changes and finishing the sidebar and dashboard UI.

Learn to implement authentication for an ERP system by building register and login pages with next-auth, filtering to email/password login, and wiring credentials to the dashboard.

Implement next auth in a Next.js 15 project using a credentials provider with Strapi. Create an API route and wrap the layout with a session provider for login.

implements a next auth login with email and password, manages input and loading, uses toasts for feedback, redirects to the dashboard on success, and protects the dashboard via session validation.

Display the logged in user's first name and last name in the app sidebar and nav by including them in JWT and session callbacks.

Build a full height hero section for the landing page with a gradient background, prominent title, a quote, and two buttons linking to login and register pages.

Duplicate the login page to build a register page interface, add first name and last name fields, rename handlers, log the form data, and redirect to the login page.

Create a global api error handler to centralize messages across try-catch blocks. Implement handleApiError to return Strapi errors, Axios network errors, or a default something went wrong message.

Create a global axios instance with request interceptors that attach the JWT from next auth for API calls. Centralize error handling with toasts using the env base URL.

Learn to build a categories page with a data table and charts, featuring pagination, page limits, name or description filters, then implement create, edit, and delete operations for categories.

Develop a categories data table by integrating a data table component, configuring columns and data, and rendering a styled card with header, actions, and content to enable crud features.

Fetch category data from a Strapi 5 backend in a Next.js 15 app, configure authenticated access, and render id, name, and description in a data table with edit and delete actions.

Explain how strapi pagination works by sending requests to the categories endpoint, reading the data and meta objects, and adjusting page and page size to reveal total records and page counts.

Learn advanced table pagination for the ERP UI by managing page and page size, fetching paginated data, and using first, previous, next, and last controls.

Build a reusable column filter component with a popover input and apply/clear actions to enable per-column filtering for name and description in the Next.js 15 app backed by Strapi.

Learn to implement advanced filtering and pagination in a Next.js ERP app by building dynamic query parameters, integrating column filters with Strapi back-end, and updating UI state.

Create and edit a category in a sheet-based ERP UI, with a right-side trigger, header, and footer, plus name and description inputs and a save changes action.

Create and edit a category with a prop-driven form in a Next.js 15 and Strapi 5 ERP app, using react-hook-form, loading state, and post/put requests with data payloads and toasts.

Delete category functionality is implemented with a confirmation dialog, delete api call, error handling, toast, and data refetch, completing the category crud workflow.

Commit and push all changes to the GitHub repository, marking the categories section as complete, and review details with the git lens extension for pull and push requests.

Duplicate the categories folder to create a products page, fetch products data with category and image via populate, and update user interface texts and endpoints.

Build a products table by fetching full product data from Strapi, including category and image, and enable filters for name, barcode, category, price, and stock in Next.js 15.

Demonstrates product CRUD in a Next.js and Strapi setup, including form schema updates, required price and barcode, editing flows, image handling with defaults, category dropdowns, and delete operations.

Populate a categories dropdown in a product form by fetching categories from Strapi, handling loading states, and validating with z.string, then update and create products with the selected category.

Add image uploading to products by integrating a file input with Strapi media library and the API uploads endpoint. Preview images, track upload progress, and store image IDs.

Builds a sales page and table for invoices, adding fields like invoice number, customer name, email, phone, date, total, and notes, with filters and date formatting using date fns.

Implement date filtering in strapi using a date input and iso string payloads. Apply start-of-day and end-of-day boundaries to filter records by date accurately.

Builds the new invoice page UI for the sales section, featuring a multi-column form, product search with API filtering, dynamic product rows, and invoice totals with validation and navigation.

Implement debounced product search that sends a get request to the products API after 400 ms delay, filters by name, and displays results (name, price, stock) in 25-record scroll area.

Learn to add products to an invoice grid in a Next.js 15 ERP app, prevent duplicates, append to the products array with default quantity, and calculate amounts.

Submit invoice creates a sales entry with customer name, email, invoice number, phone, dates, subtotals and added products, while updating stock via backend transactions.

Implement a customized Strapi backend transaction that creates a sale and updates product stock atomically, using a dedicated controller and route, with rollback on failure and commit on success.

Test front-end transactions with product validation and required invoice fields, simulate successful and failed runs, and verify stock validation and rollback through the sale transactions endpoint.

Implement invoice viewing and printing by fetching a single invoice with populated products and images, creating a dynamic id route, and enabling print with a print-friendly layout.

Refactor the ERP dashboard by consolidating data table usage into a single reusable component and updating imports across categories, products, and sales pages, plus switch to router.back for navigation.

Create a today sales report by cloning the sales page, filtering to today’s date, and verifying a single today invoice appears.

Create a weekly sales report page that shows this week's data from Sunday to Saturday. Use start of week and end of week calculations with ISO strings to filter entries.

Create a standalone pause page outside the dashboard with a right cart sidebar, left main area for categories, items, and a search input, and implement next auth redirects for login.

Add static categories and 30 products, implement category filtering and search, and display responsive product cards with a cart, discount, and tax controls to showcase UI behavior.

Implement add to cart by destructuring product, updating the cart state with quantity logic, and enabling remove from cart, update quantity, and a cart ui with minus and plus controls.

Implement cart footer functionalities by calculating subtotal with reduce over item quantities and prices, applying discount, computing tax via tax rate, and producing total.

Fetch categories from the Strapi backend using an async fetchCategories function, wired to an authenticated useEffect, and render by id and name, replacing static data with live data.

Add a loading state for category data from the Strapi backend by toggling a loading categories flag, showing a loader component during fetch, and displaying the category list once loaded.

Fetch products from the strappy backend, implement a debounced search, and filter results by category while managing loading states and error handling.

Fetch and display product images from the backend with prices. Save selected products from the cart into the sales table and the sales invoice section.

Implement a pos invoice saving flow by renaming onsubmit to handleSave, validating the cart, recording customer name and date, applying discount and tax, and clearing the cart after save.