Pebble Task

Pebble Task is a draggable, resizable task manager that keeps you organized without cluttering your workspace.

Comment

Inspiration

  • We wanted to create a simplistic but optimised task manager for light usage with smooth user interaction and experience. And of course themes for more customizability.

What it does

  • Draggable & Resizable – Uses react-rnd to allow free movement and resizing of the widget.
  • Task Management – Create, edit, delete, and reorder tasks effortlessly.
  • Auto-Save Progress – Your tasks persist across sessions, so nothing gets lost.
  • Theme Switching – Choose between Light, Dark, Coffee, Matcha and Ocean themes in the settings menu.
  • Task Prioritization – Highlight important tasks for better organization.
  • Completion Effects – Enjoy a confetti celebration when all tasks are completed!

How we built it

  • Framework: React 18
  • Build Tool: Vite
  • UI Library: Chakra UI
  • State Management: Zustand
  • Interactions:
    • react-rnd (Dragging & Resizing)
    • framer-motion (Animations)
  • Styling: Emotion (via Chakra UI)
  • Icons: Chakra UI Icons, React Icons

Challenges we ran into

  • Expandability was hard, as we needed to scale all the components inside the wideget as well
  • Creating the minimised task bar was hard too, especially with the highlighted task display
  • Clicking and Dragging elements that have both properties clashed a lot, that was hard to fix
  • Figuring out localStorage so that everything saves on refesh
  • Creating all the themes

Accomplishments that we're proud of

  • Completing most of our feature ideas in the widget
  • LocalStorage implementation
  • Collapsable mode implementation
  • Highlight/prioritise task implementation
  • Our themes
  • Our animations
  • The overall user experience we created

What we learned

  • Learned React, mainly with useState and useEffect
  • Using localStorage to maintain all states when reloading the page
  • New css attributes
  • How to implement new features
  • User interaction and experience

What's next for Pebble Task

  • A feature to add priority levels before adding a task
  • A feature to add due date or time remaining to a task
  • Dropdowns to task to add more information
  • A sorting search system to locate your tasks

Built by

Built With

Share this project:

Updates