Project Tracer

Individual Practice Project

Project Tracer

Individual Practice Project

This is a project management web application that I built to practice my skills. The application allows users to create, manage, and track projects with task functionality. Users can add new projects with titles, descriptions, and due dates, create tasks within projects, and organize their workflow through an intuitive sidebar interface. The application features a clean, modern UI with gradient borders and responsive design elements. Built using vanilla JavaScript, Bootstrap 5, and Sass for styling, this project demonstrates fundamental web development skills including DOM manipulation, event handling, local state management, and responsive design principles.

Key Learnings:

DOM Manipulation with Vanilla JavaScript
Event-Driven Programming
Sass/SCSS Preprocessing
Bootstrap 5 Framework
Responsive Web Design
Build Tools (Gulp)
Version Control with Git

Screenshots

Technologies Used:

HTML5CSS3JavaScript ES6+Bootstrap 5Sass/SCSSGulp

My Contribution

I developed the complete project management application from scratch. My main contributions include implementing the core functionality for project creation, editing, and deletion through dynamic form handling. I built the task management system that allows users to add and remove tasks within projects, with real-time DOM updates and event delegation. I designed and implemented the responsive sidebar navigation with alternating gradient borders for visual appeal. The styling system uses Sass variables and mixins for maintainable code, creating a cohesive design language throughout the application. I set up the build process using Gulp for Sass compilation, autoprefixing, and browser synchronization during development.