The first 500 people to use my link will get a 1 month free trial of Skillshare: https://skl.sh/edroh09241 Build a Complete Project Management Dashboard using Next.js, Node.js, and AWS Services This tutorial guides you through building a Project Management Dashboard application using a combination of popular technologies and services. We start by setting up the frontend with Next.js, integrating Tailwind CSS for styling and Material UI Data Grid to handle complex data presentations. We'll use Redux Toolkit for state management and Redux Toolkit Query for effective data fetching. The backend architecture is built on Node.js, utilizing Express for server-side logic. We'll manage our database with PostgreSQL, interfaced through Prisma, and monitored using PgAdmin. We explore AWS services extensively, detailing the setup and integration of AWS Lambda for serverless computing and AWS Cognito for user authentication and management. The tutorial is designed for developers looking to deploy scalable web applications, with comprehensive instructions on configuring and deploying each part of the stack to create a robust Project Management Dashboard. Links Backend: Node - https://nodejs.org/en Vscode Studio - https://code.visualstudio.com/ Express - https://expressjs.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 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 cognito - https://aws.amazon.com/cognito/ AWS cognito related links - https://ui.docs.amplify.aws/react/connected-components/authenticator https://docs.amplify.aws/javascript/tools/libraries/configure-categories/ 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 React DnD - https://react-dnd.github.io/react-dnd/docs/overview Nextjs Providers - https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers Tailwind - https://tailwindcss.com/docs/configuration Tailwind Linting - https://tailwindcss.com/blog/automatic-class-sorting-with-prettier Tailwind Prettier - https://github.com/tailwindlabs/prettier-plugin-tailwindcss Recharts - https://recharts.org/en-US/api MUI - https://mui.com/x/react-data-grid/ Gantt Charts - https://github.com/MaTeMaTuK/gantt-task-react Code: completed code - https://github.com/ed-roh/project-management tailwind config file - https://github.com/ed-roh/project-management/blob/master/client/tailwind.config.ts seed data files - https://github.com/ed-roh/project-management/tree/master/server/prisma/seedData image files - https://github.com/ed-roh/project-management/tree/master/client/public aws ec2 instruction files - https://github.com/ed-roh/project-management/blob/master/server/aws-ec2-instructions.md data model diagram - https://lucid.app/lucidchart/877dec2c-db89-4f7b-9ce0-80ce88b6ee37/edit?viewport_loc=-1011%2C-1748%2C3449%2C1640%2C0_0&invitationId=inv_541da4a8-8372-4969-864c-3fd30a6588f3 aws architecture diagram - https://lucid.app/lucidchart/62c20695-d936-4ee7-9a53-ceef7aef8127/edit?viewport_loc=-294%2C-351%2C3785%2C1800%2C0_0&invitationId=inv_2aef42c6-227c-47ed-8d8f-610ff6cbc996 aws cognito diagram - https://lucid.app/lucidchart/9e17e28e-6fe5-41df-b04b-b378fa21eb8f/edit?viewport_loc=-360%2C932%2C3589%2C1707%2C0_0&invitationId=inv_16791189-2b92-4bd5-8c6b-3ba4196412fb globals.css file (to copy for gantt): https://github.com/ed-roh/project-management/blob/master/client/src/app/globals.css redux toolkit store with redux persist (to copy) - https://github.com/ed-roh/project-management/blob/master/client/src/app/redux.tsx command for resetting id in database: `SELECT setval(pg_get_serial_sequence('"[DATA_MODEL_NAME_HERE]"', 'id'), coalesce(max(id)+1, 1), false) FROM "[DATA_MODEL_NAME_HERE]";` Chapters: 0:00 Intro 5:15 Basic Installations 7:40 Frontend Install 12:04 Tailwind Install 18:17 Dashboard Wrapper 24:58 Navbar 36:30 Sidebar 48:15 Redux Toolkit 1:08:46 Redux Toolkit Integrations 1:19:57 Sidebar Responsive 1:33:33 Data Model 1:37:18 Local Postgres Install 1:41:27 Backend Typescript Install 1:44:12 Prisma Install 2:04:53 Backend Install 2:14:16 Projects Backend 2:46:32 Projects Frontend 4:55:10 Projects Frontend Modal 5:36:02 Timeline 5:43:28 Search 6:01:49 Settings 6:05:53 Users 6:17:16 Teams 6:27:56 Home 6:48:30 Priority 7:15:25 Github Repo 7:21:21 Intro 7:22:58 Budget 7:28:30 Deleting 7:30:21 AWS Overview 7:31:40 AWS Networking 7:46:15 EC2 8:02:00 RDS 8:15:59 Amplify 8:20:45 Api Gateway 8:25:43 S3 8:35:19 Cognito 9:45:00 Outro