Inspiration

We wanted a simple yet powerful way to stay on top of our busy schedules. Most to-do list apps are either too complex, require sign-ups, or store data online. Our goal was to design something lightweight, private, and modern that could run entirely in the browser while still giving users advanced features to manage tasks effectively. That vision became ProTask.

What it does

ProTask is a feature-rich daily planner that allows you to:

  • Create, edit, complete, and delete tasks
  • Assign due dates with overdue tasks highlighted
  • Set priorities (High, Medium, Low) with clear visual indicators
  • Search tasks instantly with live filtering
  • Sort tasks by creation date, due date, or priority
  • Switch between Dark Mode and Light Mode
  • Enjoy a responsive experience on both desktop and mobile

Live Demo | GitHub Repository


How we built it

  • HTML5 → Core structure and layout
  • CSS3 → Styling, animations, and responsive design
  • JavaScript (ES6) → Logic, interactivity, and localStorage integration

Challenges we ran into

  • Balancing simplicity with advanced features in a short hackathon timeline
  • Ensuring the app remained responsive across different devices
  • Managing state (pending, completed, priorities, due dates) without external libraries

Accomplishments that we're proud of

  • Built a fully offline, browser-based productivity app in record time
  • Designed a clean UI with dark/light theming
  • Implemented advanced sorting, filtering, and search for real-time task management
  • Delivered a smooth, modern user experience

What we learned

  • The power of vanilla JavaScript for building real-world apps
  • How to design for both simplicity and functionality
  • Best practices for responsive UI design
  • Debugging under tight hackathon constraints

What's next for ProTask – Advanced To-Do List

  • Export and import tasks (JSON/CSV support)
  • Add recurring tasks and reminders
  • Turn ProTask into a Progressive Web App (PWA) for installation on devices
  • Optional collaboration features with cloud sync
  • More customization (themes, layouts, accessibility features)

Built With

Share this project:

Updates