top of page

Full-Stack Project Management Web App

A project management app that allows users to create, edit, and delete projects. Integrated functionality with PostgreSQL database to save and load data.

Type

Project Management

Stack

Java JavaScript JSX HTML CSS React Rest API JPA Spring boot Postgres SQL

Repository

Project Purpose and Goal

The purpose of this project was to create a project management app that could save and load from a database with additional features similar to those found on other project management software like Jira and Trello.   

Stack & Explanation

For the frontend, React was used for it's component based architecture and virtual DOM which allowed for the creation easily reusable code and efficient rendering of UI elements. HTML and CSS were used for the versatility they offer when structuring and styling web pages. Additionally, JavaScript was utilized in the form of JSX, HTML-like syntax within JavaScript, for its performance and safety as it ensures that no code can be injected into the application.

​

The Backend was coded in Java for its support of multiple libraries and scalability when it came to expanding the project's functionality. A Rest API was also used for its scalability, allowing for the separation of the client and server to support increased workloads, and for its customization when it came to security configurations.

​

A PostgreSQL database was used because of its support encryption and other security protocols that preserve the integrity of database transactions.

Problems and Thought Process

While working on the frontend, I came across an issue with React's useState hook and a delay that can happen with setting state variables. In my forms, the delay would cause state variables that were just set to not update immediately and would cause incorrect or outdated values to be saved into the database. This happened because useState is asynchronous, which means that the state variables I set would only update with new values once React renders it. I eventually found that using the spread operator (...) allowed me to modify the values rather than directly setting them which would require a re-render and the delay.

​

My goal when developing this project was to create Project management system that supported CRUD functionality and had the scalability to grow with a large amount of users and projects.

bottom of page