AWS-Project-Management-Dashboard

Description

An enterprise-grade project management application that features robust data analytics and user management capabilities. The application is built with a Next.js frontend and a Node.js backend, with a PostgreSQL database. The application is deployed on AWS using EC2, RDS, and Cognito. The application is designed to be scalable and secure, with a focus on loose coupling and high availability.

⚙️ Technologies

Next.js | Material UI | PostgreSQL | Redux Toolkit | Prisma | Amazon Linux | AWS Amplify | AWS EC2 | AWS RDS | AWS Cognito | Tailwind CSS | AWS S3 | AWS Lambda Trigger | AWS API Gateway | PM2

Table of Contents

• Description
• Documentation
• Deployment
• Screenshot
• Acknowledgements
• License
• Contact

Documentation

Diagrams

AWS Architecture Diagram


Data Model Diagram


AWS Cognito Diagram

Getting Started

This is a Next.js project bootstrapped with create-next-app.
First, make sure these are installed:

• Git
• Node.js
• npm (Node Package Manager)
• PostgreSQL (download)
• PgAdmin (download)

Installation Steps

1. Clone the repository: git clone [git url] cd project-management

2. Install dependencies in both client and server: cd client npm i cd .. cd server npm i

3. Set up the database: npx prisma generate npx prisma migrate dev --name init npm run seed

4. Configure environment variables:

• .env for server settings (PORT, DATABASE_URL)
• .env.local for client settings (NEXT_PUBLIC_API_BASE_URL)

5. Run the project npm run dev run the development server (client & server):

npm run dev

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• the Next.js GitHub repository - find more examples and tutorials.
• Next.js deployment documentation - learn how to deploy your Next.js app.

Additional Resources

• React
  Documentation: https://react.dev/reference/react

• Material UI
  Installation: https://mui.com/material-ui/getting-started/installation/
  Icons: https://mui.com/material-ui/material-icons/

• Node
  Documentation: https://nodejs.org/docs/latest/api/

• Express
  Getting Started: https://expressjs.com/en/starter/installing.html

• Prisma
  Documentation: https://www.prisma.io/docs/

• PostgreSQL
  Documentation: https://www.postgresql.org/docs/

• PM2
  Documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/

• AWS Amplify
  User guide: https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html

• AWS Amplify Authenticator
  User guide: https://ui.docs.amplify.aws/react/connected-components/authenticator

• Amazon EC2
  User guide: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/concepts.html

• Amazon RDS Database
  User guide: https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/Welcome.html

• Amazon Cognito
  User guide: https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html

Authenticate existing React application users by using Amazon Cognito and AWS Amplify UI: https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html

• Tailwind CSS
  Documentation: https://tailwindcss.com/docs

• Prisma
  Documentation: https://www.prisma.io/docs/

• PostgreSQL
  Documentation: https://www.postgresql.org/docs/

• AWS Lambda
  Documentation: https://docs.aws.amazon.com/lambda/latest/dg/welcome.html

• Lambda Trigger
  Documentation: https://docs.aws.amazon.com/lambda/latest/dg/with-s3-example.html Deployed Lambda script:

import https from "node:https";

export const handler = async (event) => {
    const postData = JSON.stringify({
        username: event.request.userAttributes["preferred_username"] || event.userName,
        cognitoId: event.userName,
        profilePictureUrl: "i1.jpg",
        teamId: 1
       });
        
    const options = {
        hostname: "70nlkwfw7i.execute-api.us-east-2.amazonaws.com",
        port: 443,
        path: "/create-user",
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Content-length": Buffer.byteLength(postData)
        }
    };
    
     return new Promise((resolve, reject) => {
         const req = https.request(options, (res) => {
             res.setEncoding("utf8");
             let responseBody = "";
             res.on("data", (chunk) => responseBody += chunk)
             res.on("end", () => resolve(responseBody));
       });
     
       req.on("error", (error) => reject(error));
          req.write(postData);
          req.end();
     })
 };

    const responseBody = await new Promise((resolve, reject) => {
        const req = https.request(options, res => {
            res.setEncoding("utf8");
            let body = "";
            res.on("data", chunk => body += chunk);
            res.on("end", () => resolve(body));
        });
        
        req.on("error", reject);
        req.write(postData);
        req.end();
    });

    return event; 
}; 

Deployment

• This application is deployed using AWS Amplify https://main.d9jen3y4cqvrz.amplifyapp.com

Screenshot

PostgreSQL testing via pgAdmin


Testing via Postman


SideBar functionality


Easily Export data


Kanban Board


Light and Dark modes

Acknowledgements

• Build a Nextjs Project Management App & Deploy on AWS | Cognito, EC2, Node, RDS, Postgres, Tailwind https://www.youtube.com/watch?v=KAV8vo7hGAo&t=382s

Ed Roh
edroh.com

License

Permission to use this application is granted under the MIT license. https://opensource.org/licenses/MIT

Contact:

Holler at me! rob.atalla@robatalla816.com