Bloom

Inspiration

Traditional productivity apps often make people feel overwhelmed with endless to-do lists, rigid schedules, and pressure to maintain streaks. I wanted to create a more human approach to productivity—one that respects changing energy levels, celebrates small achievements, and makes planning feel peaceful rather than stressful. This idea inspired Bloom, a personal planner built around the belief that meaningful progress happens one small step at a time.

What it does

Bloom helps users organize their days around priorities, available time, and self-reported energy levels. Its key features include: Energy-aware planning: Get suggestions that better match your current energy level. Daily task management: Create, edit, prioritize, complete, and reschedule tasks. Flexible scheduling: Organize tasks in a calendar-style agenda and receive gentle feedback about time conflicts. Focus mode: Use a customizable timer to work on individual tasks and record completed focus sessions. Digital growth garden: Watch a botanical garden grow as you complete tasks, celebrating progress without punitive streaks. Personalized experience: Customize daily capacity, focus duration, goals, and accessibility preferences. Ritual builder: Create simple routines and add their steps directly to your daily plan. Interactive product experience: Explore animated showcases, guided product previews, and a responsive interface designed for desktop and mobile. Bloom stores personal data locally in the browser, so the core application works without an account, external API keys, or a backend service.

How we built it

Bloom was built using Next.js, React, TypeScript, Tailwind CSS, Lucide React, and GSAP. Next.js App Router organizes the application into dedicated experiences for onboarding, daily planning, scheduling, focus sessions, the progress garden, and settings.

The UI follows a botanical visual identity with warm ivory backgrounds, muted greens, soft pastel accents, expressive typography, generous whitespace, and custom illustrations. GSAP powers carefully choreographed transitions, scroll-driven storytelling, animated reveals, interactive elements, and botanical growth effects.

Local storage preserves tasks, preferences, reflections, and progress between visits. Particular attention was given to responsive layouts, keyboard accessibility, reduced-motion preferences, and keeping interactions functional rather than merely decorative

Challenges we ran into

One major challenge was balancing sophisticated animations with usability and performance. Scroll-based scenes, page transitions, and interactive effects needed proper cleanup to avoid conflicting animations or lingering event listeners.

Another challenge was maintaining reliable application state across task completion, editing, scheduling, and replanning. The focus timer also needed to handle pausing, resuming, and navigation correctly. We addressed these through centralized data handling, scoped GSAP animations, defensive local-storage parsing, and automated browser and domain tests.

Making the experience work across mobile and desktop while respecting reduced-motion preferences was equally important.

Accomplishments that we're proud of

We are proud of turning a simple productivity concept into a cohesive, interactive product with its own visual identity and meaningful functionality. Bloom combines a working task planner, customizable focus timer, flexible scheduling, and a progress-based digital garden within one application.

We are especially proud of the original botanical illustrations, layered scroll-driven storytelling, animated page transitions, interactive product tour, and starter ritual builder. The project also passed its documented production build, lint, type-checking, and automated application tests.

Most importantly, the experience communicates a clear philosophy: productivity should support people, not make them feel guilty.

What we learned

This project taught us that good UI/UX design goes beyond attractive visuals. Visual hierarchy, interaction feedback, accessibility, responsive behavior, and predictable application state are all essential to a usable product.

We also learned how to structure complex GSAP animations inside a React application, manage animation lifecycles, design around reduced-motion preferences, and use automated tests to validate real user journeys. We gained a deeper appreciation for designing interactions that feel rewarding without becoming distracting.

What's next for Bloom

The next steps include optional cross-device synchronization, calendar integration, reminders, and more personalized planning suggestions. We would also like to expand progress insights while keeping them meaningful and free from unnecessary productivity pressure.

Our long-term vision is to make Bloom a personal planning companion that helps people build sustainable habits, adapt to changing circumstances, and recognize the value of small, consistent steps.

Built With

• css3
• gsap
• html5
• next
• react
• sqlite
• typescript