This is a submission for Weekend Challenge: Passion Edition
This weekend's challenge was to build something inspired by passion. Instead of creating another habit tracker, I wanted to build a dashboard that helps people measure the time they invest in the things they genuinely love
What I Built
Title: 🚀 PassionSpace
PassionSpace is an offline-first, highly polished, and motivating personal tracking dashboard designed to help people organize, track, and measure their personal hobbies, side projects, sports, skills, and creative interests.
💡 What It Does
- Passion & Skill Portfolio: Allows users to define custom "passions" with custom emojis, category groupings, and weekly hour targets.
- Consistency Tracking: Built-in visual metrics including a GitHub-style 90-Day Consistency Heatmap, streak tracking, and active focus projections.
- Interactive Sessions & Goals: Users log active focus sessions with quality-ratings and reflective notes, aligning them directly with incremental milestones and target objectives.
- Reflection Journals: A clean space to write learning summaries, blockages, and milestones.
Gamified Badge Shelf: An interactive shelf displaying achievements (e.g., Polymath, Deep Work Specialist, Streak Master) alongside locked milestones to encourage persistent logging.
Stats Sharing: A dynamic profile sharing card that renders a clean copyable performance report to share with community groups.
🎯 The Intended Goal
The goal of PassionSpace was to transition self-improvement and hobby tracking away from dry, clinical spreadsheets into a visually inspiring, central workspace.
By pairing deliberate typography, smooth transition animations, and a cohesive, modern dark-and-light-mode aesthetic, the application lowers the friction of self-reflection. It provides individuals with immediate, beautiful feedback about where they spend their life hours—celebrating consistent micro-habits rather than just final outcomes
Demo
https://passionspace-1060401326994.europe-west2.run.app
Code
https://github.com/sammy-nug/PassionSpace.git
How I Built It
🛠️ Technical Approach & Walkthrough
For PassionSpace, I wanted to build a modern, responsive application that feels fast, reliable, and enjoyable to use. Here's a look at the architecture, technical decisions, and development workflow behind the project.
🏗️ Core Architecture
Frontend
The frontend is built with React, TypeScript, and Vite, providing a fast development experience and excellent runtime performance.
Styling
The UI is designed entirely with Tailwind CSS, focusing on a clean, distraction-free experience featuring:
- Modern card layouts
- Rounded container panels
- Intentional negative space
- Responsive design
- Soft light and dark themes
The goal was to make the interface feel calm and inviting rather than overwhelming.
Micro-Animations
To improve the overall user experience, the application uses Motion for:
- Smooth page transitions
- Hover interactions
- Animated tab switching
- Lightweight feedback during user interactions
These subtle animations make tracking progress feel rewarding instead of tedious.
State Management & Synchronization
Global application state is managed through a dedicated React Context Provider.
This architecture allows the application to:
- Update the UI instantly
- Maintain in-memory state efficiently
- Queue synchronization tasks to Firebase Firestore in the background
The result is an interface that remains responsive while data persistence happens seamlessly.
💾 Persistence Layer
Cloud Persistence
User data is stored in Firebase Firestore, while Firebase Authentication manages user identity.
Custom Firestore security rules ensure that each user can only read and write documents associated with their authenticated account.
Local-First Experience
To reduce perceived latency, the application implements optimistic UI updates.
Whenever users create or modify content, the interface updates immediately while synchronization occurs in the background. This keeps interactions feeling fast even on slower connections.
💡 Interesting Technical Decisions
Visual Intensity Markers Instead of Heavy Chart Libraries
Rather than relying on large visualization libraries like D3 or canvas-based charting for simple progress tracking, PassionSpace uses custom-built heatmaps and progress gauges.
This approach provides several benefits:
- Smaller JavaScript bundle
- Faster loading times
- Cleaner interface
- Highly readable visual effort indicators
The result is an intuitive overview of consistency and focus without unnecessary complexity.
Standardized Data Schema
The application's core entities are linked hierarchically:
- Passions
- Sessions
- Goals
- Journal Entries
When a user logs a focus session, the application automatically:
- Identifies the associated passion
- Updates related goals
- Calculates accumulated hours
- Refreshes weekly progress
- Updates overall streak statistics
All of these operations occur within a single, consistent update pipeline.
Dynamic Share Cards
Instead of generating a simple share link, PassionSpace creates a pre-formatted progress card containing live user statistics.
Each card includes information such as:
- Current streak
- Total focus hours
- Completed goals
- Active passions
The output is formatted using a clean monospace layout, making it easy to paste directly into developer communities, chat applications, or social platforms.
🤖 Google AI Studio & AI Agent Integration
One of the most interesting parts of this project was using Google AI Studio I used Google AI Studio as a development assistant for refactoring, code navigation, and iterative improvements. The architecture, implementation decisions, and feature design remained my responsibility..
System Metadata & Permissions Management
Application configuration is managed through metadata.json, where the workspace defines capabilities and permissions.
Using the AI Studio agent workspace, permissions were configured dynamically, including declaring:
MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API
This enables secure backend operations while maintaining appropriate permission boundaries.
Environment Security
Sensitive configuration values are managed using environment variables.
Database credentials and API keys are mapped through .env.example and secure runtime configuration, ensuring that:
- No secrets are exposed to the client
- Firestore operations remain authenticated
- Server-side functionality stays protected
This keeps the application secure while maintaining a smooth development workflow.
🚀 Final Thoughts
Building PassionSpace wasn't just about implementing features—it was about creating an experience that feels fast, polished, and motivating.
From optimistic UI updates and lightweight visualizations to AI-assisted development workflows and secure cloud persistence, every technical decision was made with one goal in mind:
Make progress tracking feel effortless, responsive, and enjoyable.
Prize Categories
Best Use of Google AI.
Top comments (0)