Habit Streak Garden Project Report
1. The Concept
Habit Streak Garden is a mobile-first habit tracking web app that turns daily habits into a cozy virtual garden. Each habit is represented by a plant, and completing the habit helps the plant grow. I chose this idea because it combines productivity, habit tracking, emotional design, and visual feedback in one small web app.
The main goal was to make a habit tracker that feels encouraging instead of stressful. Many habit apps punish users for missing a day by breaking a streak completely. Habit Streak Garden uses a softer approach: missed days only make plants wilt slightly, and the user can recover by continuing again.
2. The Stack
The Stack: HTML5, Vanilla CSS, Vanilla JavaScript, localStorage, Web App Manifest, and Service Worker.
The AI Assist: ChatGPT helped shape the original app idea, target users, feature direction, and UI/UX planning. OpenAI Codex was then used for the coding phase, turning the product direction into a working mobile-first web application. Codex handled the app structure, habit logic, plant visuals, statistics, localStorage, PWA support, and README documentation.
3. The 1 Day Sprint
Morning (Hours 1-3): We started by reading the project direction and defining the core experience: a cute, cozy, minimal habit tracker for students and busy workers. The early focus was on the Today screen, Garden screen, habit cards, bottom navigation, and localStorage-based habit data. The first prototype used simple HTML, CSS, and JavaScript with no frameworks.
Afternoon (Hours 4-6): The coding phase became more complex. We added real habit functionality: add, edit, complete, delete/archive, streak calculations, daily completion protection, plant growth stages, calendar history, statistics, import/export, and data validation. We also compared the app against the visual mockup and improved layout, spacing, typography, cards, buttons, plant artwork, and mobile responsiveness.
The Finish Line (Hour 7-8): The final stretch focused on polish and product quality. We added archived habit restore, SVG plant artwork, SVG statistics charts, onboarding, accessibility improvements, storage migration, PWA install/offline support, notification reminders, unlockable themes/backgrounds/decorations, monthly reports, a data management screen, and basic tests. The README was updated to match the current project.
4. The Roadblocks
Roadblocks: The biggest roadblock was balancing visual polish with real functionality. The reference mockup had charming illustrated plants and a very polished mobile-app feeling, but building that quality with only HTML, CSS, and vanilla JavaScript took several passes. The first plant icons looked too much like plain emoji, so they had to be replaced with custom SVG-style artwork.
Another roadblock was scope growth. The app started as a simple habit tracker, but it expanded into a richer prototype with PWA support, notifications, archive restore, data migration, monthly reports, rewards, and tests. Each new feature affected the data model, UI, and README, so we had to keep updating the structure carefully.
The hardest technical area was localStorage and state management. Habits needed to support active and archived states, daily completion protection, undo completion, streaks, growth, import/export, migration from older storage versions, and safe reset behavior. Small mistakes in state logic could make stats wrong or hide habits unexpectedly.
5. Key Takeaways
What worked best? The product direction and iterative improvement process. Starting with a clear target user and mood made the design decisions easier. The app stayed focused on a gentle habit-building experience instead of becoming a generic productivity dashboard.
What worked worst? Visual assets and feature scope. The app improved a lot, but the plant artwork still cannot fully match a professionally illustrated mockup. Also, adding many features in one sprint created a lot of moving parts: PWA, notifications, rewards, reports, data management, and tests all needed careful coordination.
My final thought: If I had one more day, I would focus on visual quality and real user testing. I would create a full custom plant asset set, improve the garden scene, add smoother reward animations, and test the app with a few students or busy workers. If I could redo this project, I would define a stricter MVP first, then add PWA, rewards, and reports only after the core habit loop felt perfect.