Build Nextjs Inventory Management Dashboard & Deploy on AWS | Postgres, Node, Tailwind, EC2, RDS, S3

Build and Deploy a Complete Full Stack Inventory Management Dashboard Application using Nextjs, Redux, Node, and AWS. This tutorial provides a step-by-step guide to building a full-stack inventory management dashboard using Next.js for the frontend, styled with Tailwind CSS and featuring Material UI Data Grid for complex data handling. State management is streamlined with Redux Toolkit, supplemented by Redux Toolkit Query for data fetching.

The backend is powered by Node.js, using Prisma as the ORM to facilitate database interactions. We delve deep into AWS, explaining basics for beginners, including setup, cost management, and networking fundamentals. Detailed walkthroughs are provided for deploying and integrating AWS services such as RDS for database management, EC2 for computing power, API Gateway for creating robust APIs, Amplify for frontend deployment, and S3 for storage solutions.

This comprehensive guide is designed for developers seeking to implement robust, scalable applications using AWS, offering clear insights into each service’s role and setup within the project.

Links Backend:

Node - https://nodejs.org/en

Vscode Studio - https://code.visualstudio.com/

Postgres download - https://www.postgresql.org/download/

PgAdmin download - https://www.pgadmin.org/download/

Prisma docs - https://www.prisma.io/docs/getting-started/quickstart

Prisma types - https://www.prisma.io/docs/orm/reference/prisma-schema-reference#model-fields

Postman download - https://www.postman.com/downloads/

Links AWS:

AWS - https://aws.amazon.com/

AWS cli - https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html

AWS billing - https://us-east-1.console.aws.amazon.com/costmanagement/home?region=us-east-2#

AWS free tier - https://aws.amazon.com/free/?all-free-tier

AWS ipv4 new charge - https://aws.amazon.com/blogs/aws/new-aws-public-ipv4-address-charge-public-ip-insights/

AWS ipv4 free tier - https://aws.amazon.com/about-aws/whats-new/2024/02/aws-free-tier-750-hours-free-public-ipv4-addresses/

Links Frontend:

Nextjs - https://nextjs.org/docs/getting-started/installation

Redux Toolkit w/ Nextjs - https://redux-toolkit.js.org/usage/nextjs

Redux Toolkit Query - https://redux-toolkit.js.org/rtk-query/overview

Nextjs and Context Providers - https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers

Tailwind - https://tailwindcss.com/docs/configuration

Recharts - https://recharts.org/en-US/api

MUI - https://mui.com/x/react-data-grid/

Code:

completed code - https://github.com/ed-roh/inventory-management/tree/master

image files (to download) - https://github.com/ed-roh/inventory-management/tree/master/server/assets

tailwind.config.ts (to copy) - https://github.com/ed-roh/inventory-management/blob/master/client/tailwind.config.ts

redux store file (to copy) - https://github.com/ed-roh/inventory-management/blob/master/client/src/app/redux.tsx

seed files (to copy) - https://github.com/ed-roh/inventory-management/blob/master/server/prisma/seed.ts

seed data files (to download) - https://github.com/ed-roh/inventory-management/tree/master/server/prisma/seedData

data model diagram - https://drawsql.app/teams/team-3023/diagrams/56-inventorymanagement

prisma schema file - https://github.com/ed-roh/inventory-management/blob/master/server/prisma/schema.prisma

aws commands - https://github.com/ed-roh/inventory-management/blob/master/server/aws-ec2-instructions.md

Chapters: