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?page=0_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

YouTube

In this detailed guide, Ed Row demonstrates building and deploying a full-stack project management application using Nextjs, Node.js, and AWS. The application includes features like task drag-and-drop, multiple views (list, timeline, table), and user authentication via AWS Cognito. The front end utilizes Nextjs with Redux Toolkit for state management and Tailwind CSS for styling. The backend is handled by Node.js with Express and Prisma for database interactions. AWS services such as EC2, RDS, and Amplify are used for deployment, ensuring the application is scalable and enterprise-ready.

Build a Nextjs Project Management App & Deploy on AWS | Cognito, EC2, Node, RDS, Postgres, Tailwind

<p>That is amazing. I will code along really soon.</p>


<p>Can’t wait to check this out. I’ve seen a few of Ed Row’s dashboard videos and liked them</p>
