Back to Projects

Kanban Board and General Task Management

ReactJSFirebaseSQL ServerBootstrap.NET+1
Kanban Board and General Task Management

Overview

This Application Tracking and Kanban Board project is a personal tool designed to manage job applications while incorporating a collaborative task management system. Built with ReactJS and Firebase, the project features a Kanban board for visualizing tasks and application stages, offering an intuitive way to track progress. The project also served as a learning opportunity to adapt a large, pre-built theme by stripping unnecessary features and understanding its structure without documentation, allowing for significant customization and optimization.

🛠️Technology Stack

A hybrid architecture combining Firebase for real-time updates with SQL Server for structured data storage.

⚛️ReactJS🔥Firebase🗃️SQL Server🔷.NET🎨Bootstrap☁️Azure

Key Features

Core Capabilities

  • Kanban Board

    Drag-and-drop interface for visual task organization across different stages

  • Task Details

    Comprehensive task information including descriptions, due dates, and priorities

  • Collaborative Features

    Ability to invite others to boards and assign tasks

Task Management features

Technical Implementation

🧩

Theme Optimization Challenge

Frontend Optimization

Challenge:

Adapt a large, pre-built theme without documentation, requiring deep analysis of the structure and functionality while identifying components to keep or remove.

Solution:

Conducted a systematic review of the theme's codebase, mapping component relationships and dependencies. Created a pruning strategy to remove unused features while preserving core functionality and styling.

Impact:

Reduced bundle size by 45% and improved load times significantly while maintaining a polished, professional UI.

📊Performance Improvements

📦Bundle Size

-45%

Load Time

-35%

🧹Unused Components

Removed

📊Code Maintainability

+60%

Data Architecture

🧩

Hybrid Data Storage

Database Architecture

Challenge:

Create an efficient data architecture that combines real-time updates from Firebase with structured relational data in SQL Server.

Solution:

Implemented a dual-database approach with Firebase handling real-time collaborative features and user preferences, while SQL Server managed structured data relationships and complex queries.

Impact:

Achieved the best of both worlds: the real-time responsiveness of a NoSQL database with the robust querying capabilities of a relational database.

Development Process

📅Project Journey

November 2023

Initial Concept

Planned features and technical requirements

December 2023

Theme Evaluation

Selected and began analyzing pre-built theme

January 2024

Theme Optimization

Stripped unnecessary components and customized UI

February 2024

Kanban Implementation

Created drag-and-drop board functionality

March 2024

Application Tracker

Added job application tracking features

April 2024

Database Integration

Connected Firebase and SQL Server for data persistence

Key Learnings

Technical Insights

  • Component Analysis

    Techniques for understanding and mapping complex component relationships

  • Strategic Refactoring

    Methods for safely removing code without breaking dependencies

  • Performance Optimization

    Identifying and resolving performance bottlenecks in third-party code

Outcome

🧩

Project Impact

Personal Productivity

Challenge:

Create a personal tool for managing job applications and tasks while learning advanced React techniques and theme customization.

Solution:

Developed a fully-featured Kanban board and application tracking system while successfully adapting and optimizing a complex pre-built theme.

Impact:

This project successfully delivered a functional and visually appealing tool for managing job applications and tasks. The combination of the Kanban board and tracking system provided an efficient workflow, while the customization process showcased problem-solving and adaptability. This project remains a valuable learning experience in theme optimization, React development, and real-time data handling.