Initially, the application faced performance issues when handling over 10,000 tasks. To address this, I implemented table virtualization using React Virtuoso. This approach allows tasks to render dynamically based on the visible window, which improves performance. While the virtualization improved usage performance, the initial loading time remained lengthy. To tackle this, I integrated TanStack Query to load additional rows as users scroll to the end of the table. This setup fetches 50 new rows at a time and continues as needed. Integrating this with filters, sorting, and search functionality was challenging, but leveraging PostgreSQL’s database functions helped streamline the process.

The application includes role-based access control. Some users have read-only access, while others can edit, and a select group has access to a dashboard with visualized data. This dashboard includes KPIs for comparing company performance with previous months, which, though initially non-essential, has become a valuable addition.

The entire development process took about four months, during which I extensively tested and learned. I had to start over twice before completing the project. Despite these setbacks, the application has been in use by the company for over six months. Throughout the project, I balanced development with my full-time studies, which added to the complexity of the process.

12,000+ new tasks added by users. 12 team members use the tool daily. 3 offices optimized with the new system The application continues to be optimized and updated. I used Webpack Bundle Analyzer to enhance performance and made various cosmetic adjustments.