All work
Next projectPC Workshop
[17] FRONTEND · 2024
Recursive Partitioner
Recursive Partitioner is an interactive single-page application that allows users to recursively split the screen into resizable and removable partitions.
- React.js
- TypeScript
- Tailwind CSS
- MobX
- Vercel

01 — OVERVIEW
Recursive Partitioner is an interactive single-page application that allows users to recursively split the screen into resizable and removable partitions. The application supports vertical and horizontal splits, where each partition retains its random background color while new partitions are assigned fresh colors. With drag-and-drop resizing, snapping points, and partition removal, the platform ensures a highly intuitive and engaging experience. Built with React, Tailwind CSS, and MobX for state management, it demonstrates efficient UI dynamics and responsiveness.
02 — KEY FEATURES
- 01Random background color assigned on initial load and new partitions
- 02Two buttons (V and H) to split partitions vertically or horizontally
- 03Partitions retain their old color and assign a new random color to new splits
- 04Recursive splitting of partitions, with each new partition splittable
- 05Partitions can be resized by dragging, with snapping points at 1/4th, 1/2th, and 3/4th
- 06Ability to remove any partition using a '-' button
- 07Fully responsive design with Tailwind CSS for all screen sizes
- 08Smooth and intuitive state management with MobX