Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/carlosp1806/project-manager-app

Project manager application that allows teams to keep track of their programming projects via task cards.
https://github.com/carlosp1806/project-manager-app

express javascript mern-stack mongodb nodejs project-management

Last synced: 19 days ago
JSON representation

Project manager application that allows teams to keep track of their programming projects via task cards.

Awesome Lists containing this project

README

        

# Project Manager Application

## 📃 Project Description
This application allows registered users to easily manage their programming projects. In a dashboard, it displays cards that represent the tasks to be done. Furthermore, it encourages teamwork by allowing the project owner to invite new members to collaborate in the team, either by adding new tasks or commenting existing ones.

I was motivated to build this learning project to further expand my knowledge of the MERN stack. Moreover, I wanted to understand how to structure large-scale React projects. I also explored important React aspects, such as managing state with the context API and separating into reusable components.

Visit the deployed app at:

https://project-manager-314.herokuapp.com/

## 🤖 Technologies Used
- ReactJs
- JavaScript
- CSS
- Mongodb (Mongoose)
- ExpressJS
- NodeJs
- MERN Stack

## 🎯 Learning Objectives

I was motivated to build this project in order to acquire or strenghten the following developer skills:

- Learn to organize files in large-scale React projects
- Understand how the Context API handles state accross components
- Show proficiency in building an authenticacion API using MongoDb
- Strengthen my understanding of the technologies in the MERN Stack

## ⚙️ Functionality

First, the user must create an account. Then a dashboard will show the user's current active projects, as well as the invitations to collaborate on a team. Create a new project by clicking in the corresponding button in the dashboard and provide basic details to begin.

The project view has two parts: overview and tasks. The overview section shows the project information and the members of the team. It also shows the project settings only to the owner, which provide basic update and delete operations.

In the project tasks section, all the pending work will be shown, grouped in different categories based on completion status. The color code indicates the type of task to be done, such as bugs or features. Click on each task to display a modal showing more information and comments. Below there are some screenshots showing how the project looks like:

![Captura de pantalla de 2022-05-01 19-12-09](https://user-images.githubusercontent.com/75866274/166170621-40959f6d-8388-41e2-9351-a350462ea357.png)

![Captura de pantalla de 2022-05-01 19-13-54](https://user-images.githubusercontent.com/75866274/166170627-c946851a-42e9-40a7-abea-2a5fd6dd23c5.png)

![Captura de pantalla de 2022-05-01 19-14-44](https://user-images.githubusercontent.com/75866274/166170630-48a527ee-9375-4ef2-a19d-c24e85014a81.png)

![Captura de pantalla de 2022-05-01 19-14-54](https://user-images.githubusercontent.com/75866274/166170633-2a0e4437-eb5c-4b74-852d-54943ec88525.png)