Case study
Pooductivity hackathon build
A playful task-planning prototype that combines scheduling, a Gantt view, and game-like rewards in a Next.js interface.
The brief
Pooductivity was built during the 2024 MAC Web Hackathon. The idea was to make task planning feel less clinical by wrapping a scheduler in a small game world.
The result is intentionally playful: a character, themes, inventory items, medals, and a task dashboard share the same product.
What is in the prototype
The codebase uses Next.js 14 with React and Tailwind. React Three Fiber and Three.js support the 3D parts of the interface, while React Google Charts renders the schedule as a Gantt chart.
The dashboard accepts a task name, date, and priority. The scheduling code sorts task data before converting it into the shape expected by the chart.
Other routes explore the reward loop through themes, an inventory, a shop, rankings, and medals.
The useful engineering problem
The interesting part was not the mascot. It was getting normal DOM interface work and a persistent 3D canvas to coexist without treating them as two separate sites.
The starter uses a shared canvas and tracked views, which allows 3D content to follow normal page layout and navigation. That let the team keep forms and charts in accessible HTML while reserving WebGL for the parts that benefited from it.
What the hackathon snapshot shows
The repository is not a production-ready product. Some starter metadata remains, several screens are unfinished, and the task form needs stronger validation and state management.
That is part of the case study. Under a short deadline, we proved the visual direction and the core scheduling flow first. A second pass would remove unused starter code, centralise task state, add persistence, and test the dashboard on slower devices where the 3D layer has a real performance cost.