Headquarters | Devpost

Inspiration

Currently, due to the COVID-19 Pandemic, many people are forced to work at home. In doing that, they end up working overtime or getting stressed too much due to management issues. Headquarters attempts to solve those problems by providing users with a fluid UI that is easy to use and mobile responsive. We intend to submit this app into the best web application category.

What it does

Headquarters allows users to create teams and add their colleagues to those teams. In a team, you can add projects and tasks to layout what you aim to accomplish with your colleagues. There is also a realtime chat feature inside teams to help you communicate with your teammates. Additionally, there is a feature to set work times for yourself, which will turn red if you are over time.

How I built it

We built it using React for the frontend, Spring-boot, Django, and Node.js for the backend. The React application also uses framer-motion for transitions/animations and react-query to fetch the data from the backend and cache it. When the front-end app makes a request to the server, the server uses the auth token provided in the request headers to obtain user-specific data from a MySQL database and return it to the user. We used the Spring-JPA library to connect the server to the database using a relational model. We also have a WebSocket written in node.js for the realtime chat feature.

Challenges I ran into

One major challenge was getting the DOM to rerender quickly. When React detects a change in data, it uses its virtual dom to create the data and then injects it into the real DOM. Due to heavy CPU usage, it wasn't rerendering fast enough, causing the chat feature to stop working.