Focus Garden

Inspiration

In an era of constant digital notifications and fragmented attention spans, we wanted to build something that turns the "pain" of discipline into a visual delight. Inspired by nature and the concept of "Zen" productivity, Focus Garden was born from the idea that our time is like a seed: if we nurture it with undivided attention, it grows into something beautiful. If we neglect it, the potential withers away.

What it does

Focus Garden is a gamified productivity mobile app where users grow a virtual botanical collection through deep work sessions.

Dynamic Growth: Watch your plant evolve across 5 stages (Seed → Sprout → Bud → Bloom → Mature) in real-time. Rarity & Variants: With 5 plant types and 8 color variants (like the ultra-rare Crystal or time-sensitive Twilight), there are 40 unique species to collect. Pet Companion: A friendly bee orbits your plant during focus sessions, keeping you company. Progressive Rewards: Gain XP, level up, and build a permanent garden that reflects your total focus time. Failure Mechanics: Leaving the app during a session causes the plant to wither, encouraging true commitment to the task.

How we built it

The app is built using a modern mobile stack centered on performance and developer experience:

Expo 54 & React Native: For a robust cross-platform foundation. Zustand: Used for state management with persist middleware to ensure your garden and level progress survive app restarts. NativeWind (Tailwind CSS): For a clean, "Zen" design system using custom tokens for harmonious colors. React Native Reanimated: Powering the high-performance growth animations and the pet's orbital mechanics. SVG Architecture: Plants are rendered as modular SVG components, allowing for dynamic tinting and stage transitions. We also integrated LaTeX support for leveling logic, where the XP needed for level $L$ follows a linear progression: $$ XP_{required} = L \times 100 $$ And the XP gain rate is calculated as: $$ XP_{gain} = \text{duration}_{\text{minutes}} \times \text{multiplier} $$

Challenges we ran into

One of the biggest hurdles was managing the background timer state. Mobile OS background restrictions make it difficult to keep a timer "alive" when the app is minimized. we solved this by implementing a timestamp-based synchronization logic that calculates elapsed time upon foregrounding, ensuring the growth remains accurate.

Another challenge was SVG dynamic styling. Creating 40 variants across 5 plant types required a modular property-injection system in our SVG components to handle color palettes and growth stages without code duplication.

Accomplishments that we're proud of

Visual Fluidity: Achieving 60 FPS animations for the plant growth and the companion pet using Reanimated. Architecture: Building a feature-based structure that is clean, scalable, and easy to maintain. The "Feel": Integrating subtle haptic feedback (via expo-haptics) that makes every interaction—from picking a time to completing a session—feel premium and tactile.

What we learned

This project was a deep dive into the Expo Router ecosystem and the transition to a bottom-tab navigation structure. We learned the importance of Atomic State Design—keeping global state minimal while delegating complex derived logic to hooks like useTimerLogic and useGardenStats . It also reinforced the value of accessibility, as we ensured all interactive elements meet the $44 \times 44$ pt touch target standards.

What's next for Focus Garden

Cloud Sync: Allow users to keep their garden across multiple devices. Social Focused: "Community Pots" where a group of friends must all stay focused together to grow a giant world-tree. Deep Analytics: Detailed charts and heatmaps to visualize focus patterns over months and years. Wider Ecosystem: More pets, interactive garden decorations, and specialized plant varieties for seasonal events.

Built With

• expo-router
• expo.io
• haptics
• lucide-icons
• react-native
• react-native-reanimated
• react-native-svg
• tailwind-css-(nativewind)
• typescript
• zustand