UncompliGrow

UpRoot is a gamified self-growth tracker that visualizes your habits, goals, and wellness as a dynamic, growing tree — helping you stay balanced, motivated, and thriving every day.

Comment

Inspiration

Balance is everything. When something becomes too heavy on one side, it topples — this truth applies to life just as it does to trees. A tree with too many branches and leaves, but no strong trunk or deep roots, cannot support its own weight. It's bound to collapse. Likewise, a tree with an abundance of roots but no growth above the ground withers away, its full potential unseen.

UpRoot is built on this metaphor. We are the tree. If we take on too many goals and tasks without solid discipline and mental well-being, burnout is inevitable. Conversely, if we invest deeply in wellness and inner growth, but don’t apply it toward any visible accomplishments, we fail to bloom in the eyes of the world.

What it does

UncompliGrow turns your personal growth into a living tree — a visual, interactive reflection of your habits, goals, and mental wellness.

  • Roots represent belief, rest, and recovery
  • The trunk symbolizes discipline — the consistency of daily habits
  • Branches are your goals
  • Leaves are the tasks you complete

Each element of the tree is connected, helping you see not just what you're accomplishing, but how balanced your growth really is. The metaphor encourages self-awareness:

Are you growing outward without building a foundation?
Are you rooted but hiding from the world?

UncompliGrow helps you answer those questions and take action.

How the tree grows:

  • Leaves appear when you complete tasks tied to a goal
  • Branches grow as you create new goals or subgoals
  • Roots expand when you complete foundational wellness challenges
  • The trunk thickens as you complete daily habits

You can add or remove habits, goals, subgoals, tasks, and challenges — giving you full control over how your tree (and you) grow.

How we built it

Technology Stack

  • Frontend Framework: React (with TypeScript)
  • Build Tool: Vite
  • Styling: Tailwind CSS
  • Component Library: Shadcn UI
  • State Management: React Query
  • Routing: React Router
  • Icons: Lucide React

Architecture

Frontend Structure

The app uses a component-based architecture:

Pages
  • Index.tsx: Main dashboard with the growth tree
  • Habits.tsx: Habit management page
  • Goals.tsx: Goal tracking and management
  • Challenges.tsx: Daily challenges and roots
Components
  • Tree.tsx: Core visualization of user’s growth
  • HabitItem.tsx: Represents individual habits
  • GoalItem.tsx: Handles goal and task management
  • ChallengeItem.tsx: Tracks and displays challenge progress
Utilities
  • api.ts
  • Custom hooks for:
    • Toast notifications
    • API interactions

Challenges we ran into

Coming into Bitcamp 2025, I had very little experience with frontend development. Most of my background was in backend and logic-heavy systems, so diving into React, Tailwind CSS, and component-based design was a steep learning curve.

I had to quickly learn how to manage state with React Query, structure pages with React Router, and build responsive, modular interfaces using Tailwind — all within a high-pressure environment.

Accomplishments that we're proud of

  • Built a fully functional and interactive growth-tracking tree in just 36 hours
  • Learned and implemented a modern frontend stack (React, TypeScript, Tailwind CSS) with no prior experience
  • Created a visually tree structure that grows based on user input. (Trust me! This was really an accomplishment...)

What we learned

  • Gained hands-on experience with React and TypeScript, including managing state and routing
  • Learned how to style components using Tailwind CSS
  • Understood the importance of component reusability and clean architecture in frontend development

What's next for UncompliGrow

  • User Authentication: Enable users to securely log in and save their growth data
  • Backend Integration: Replace the mock API with a real database and backend service
  • Personalized Challenges: Generate daily challenges based on past activity and habits
  • More Tree Variations: Let users customize their growth tree based on their goals or themes (like positioning branches, color, etc.)

Built With

Share this project:

Updates