Project Management Web App

Custom Project Management Web App

This is a custom-built project management web application designed to streamline the process of managing tasks and projects within an organization. Built with React, Next.js, Tailwind CSS, and integrated with a variety of AWS services such as EC2, Cognito, RDS, S3, API Gateway, Lambda, and Amplify, this app provides a seamless and efficient way for teams to track and move projects across various stages, from “To Do” to “Work In Progress,” “Under Review,” and finally to “Completed.”

Features

Project Management Board

The main feature of the app is the Kanban Board, which allows users to move tasks between various stages of project management. The stages are:

1. To Do
2. Work In Progress
3. Under Review
4. Completed

This drag-and-drop interface provides an intuitive experience, helping users visualize and manage their tasks efficiently. The board is updated in real-time, ensuring a seamless workflow without the need for page refreshes.

User Authentication

Using AWS Cognito, the app ensures secure user authentication and management. Users can sign up, sign in, and manage their profiles easily, with support for different user roles (admin, manager, member). Authentication is tightly integrated with the app’s API, ensuring secure access to all features.

File Uploads with Amazon S3

To enhance project management, users can upload and store files related to tasks and projects directly within the app. These files, such as documents, images, or videos, are stored in Amazon S3 (Simple Storage Service), which is integrated with the backend via AWS SDK.

With S3, users can upload, download, and manage project files efficiently, while enjoying high durability and low-latency access to their data. Each file uploaded is securely stored, and URLs to access them are provided to users for easy reference.

Database Management with PostgreSQL

The backend of the app is powered by PostgreSQL, a powerful relational database. Using Prisma, an ORM (Object-Relational Mapping) tool, the app easily interacts with the database, allowing users to add, update, and delete tasks, projects, and users. Prisma’s easy-to-use query system ensures that the application works seamlessly with the database.

Cloud Infrastructure and Backend Services

All the backend logic and services are deployed on AWS to ensure scalability, security, and performance.

• EC2 (Elastic Compute Cloud): The web app is hosted on an EC2 instance, which provides scalable and reliable computing power to handle user requests and run the application.

• RDS (Relational Database Service): The PostgreSQL database is hosted on AWS RDS, ensuring high availability, backups, and managed scaling for database operations.

• VPC (Virtual Private Cloud): The app’s infrastructure is securely housed within an AWS VPC, ensuring that the backend services and databases are isolated from the public internet, protecting them from unauthorized access.

• S3 (Simple Storage Service): Files related to tasks and projects are stored in AWS S3. This provides a secure, scalable, and cost-efficient solution for managing documents and other media assets within the app.

• API Gateway & Lambda: The backend APIs are built using AWS API Gateway and Lambda. API Gateway handles incoming requests, routing them to appropriate Lambda functions that execute business logic (e.g., task management, user management). Lambda functions are serverless, meaning they scale automatically to handle traffic without the need for infrastructure management.

• Amplify: AWS Amplify is used for easy deployment and management of the frontend React app. Amplify integrates with the backend services and provides a seamless CI/CD pipeline to deploy the latest changes quickly.

Technology Stack

• Frontend:

  • React.js: A powerful library for building user interfaces, used to build the app’s dynamic and interactive UI.
  • Next.js: A React framework that enables server-side rendering and static site generation for fast, SEO-friendly web pages.
  • Tailwind CSS: A utility-first CSS framework that makes it easy to style the app’s UI with responsive, modern, and maintainable designs.

• Backend:

  • Prisma: An ORM that simplifies database interaction with PostgreSQL, ensuring efficient and easy querying.
  • Node.js (via Lambda): The serverless backend that processes requests using AWS Lambda functions.
  • AWS API Gateway: Manages RESTful API requests, routing them to backend Lambda functions for business logic execution.
  • PostgreSQL on AWS RDS: Relational database used to store and manage data such as user details, tasks, projects, and progress.
  • Amazon S3: Provides scalable storage for user-uploaded files, documents, and media associated with tasks and projects.

• AWS Services:

  • AWS Cognito: Provides user authentication and authorization, supporting secure sign-in and access management.
  • AWS EC2: Hosts the application, providing scalable compute resources for the web server.
  • AWS RDS: Hosts the PostgreSQL database, ensuring scalability, backup, and high availability.
  • AWS VPC: A virtual network that isolates and secures the application’s backend infrastructure.
  • AWS API Gateway: Routes HTTP requests to backend Lambda functions for task and project management.
  • AWS Lambda: Executes serverless functions that handle requests and interact with the database.
  • AWS Amplify: Simplifies the deployment process and connects the frontend with the backend services.
  • AWS S3: Manages file storage, allowing users to upload, store, and download documents and media associated with tasks and projects.

Integration Flow

The integration of these technologies ensures that the application functions efficiently and securely. Here’s an overview of how everything is connected:

1. Frontend (React + Next.js): The user interacts with the frontend, where the Kanban board is rendered and updated. Each time the user moves a task between stages, the app makes a request to the backend to update the task’s status.
2. API Gateway + Lambda: The frontend communicates with the backend via API Gateway, which routes the requests to the appropriate Lambda functions. These functions handle the logic for creating, updating, and deleting tasks and projects.
3. Prisma + PostgreSQL: The Lambda functions interact with the PostgreSQL database using Prisma to store and retrieve task data. The database stores tasks with their respective statuses, ensuring that the Kanban board is always in sync.
4. Amazon S3: When users upload files (documents, images, etc.) related to tasks, the files are stored in S3. The app retrieves file URLs from S3 to display them to users when necessary.
5. Authentication: When the user signs in, Cognito manages the authentication process, ensuring that only authorized users can access and manipulate the data.

Conclusion

This custom-built project management web app leverages the power of modern technologies, including React, Next.js, Tailwind CSS, and AWS services like EC2, RDS, API Gateway, Lambda, Cognito, and S3, to create a powerful and scalable solution for managing tasks and projects. With the Kanban board as its core feature, users can effortlessly move tasks through various stages and track progress in real time. The app is designed to be highly scalable, secure, and efficient, providing a seamless user experience for teams working on complex projects. By integrating modern backend services like Prisma and AWS, the app ensures fast data retrieval, secure user authentication, and smooth performance, while S3 provides a secure and scalable way to manage user-uploaded files. This app is a great tool for any team looking to stay organized and productive while maintaining a seamless and user-friendly experience.