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:
0:00 intro
3:37 basic installations
3:52 nextjs and packages installations
19:53 navbar and sidebar
50:24 redux installations
1:29:18 data modeling
1:36:18 local database installations
1:58:16 backend and packages installations
2:07:50 dashboard page
3:57:23 products page
4:05:44 inventory page
4:53:55 users page
5:00:36 settings page
5:12:42 expenses page
5:43:29 aws intro
5:48:00 aws billing
5:53:57 aws networking
6:09:54 aws ec2
6:29:34 aws rds
6:44:44 aws amplify
6:52:46 aws s3
7:03:54 outro