MENU

Fun & Interesting

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

EdRoh 360,229 9 months ago
Video Not Working? Fix It Now

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

Comment