App Summary – Momentum Dashboard

Filename Anatomy

thekkathvalappilshajeebruba · 179360 · 15200416 · momentum_dashboard.html

Student: Thekkath Valappil Shajeeb Ruba (ID: 179360, submission: 15200416). This is a Cornell INFO 1260 / Producing Technology dream-app project. Notably, the page <title> is simply "Goals" rather than "Momentum" — suggesting the title tag was never updated from a default or template.

What the App Is

Momentum is a concept habit-tracking and personal goal dashboard — a student-built web prototype inspired by apps like Habitica, Streaks, and the real-world Momentum Dashboard Chrome extension. The tagline implied by the layout is daily progress through streak-based motivation.

Unlike most other apps in this batch which are pure JSON viewers, Momentum appears to have more hands-on interactive UI — with dedicated tabs for active goals, completed items, streaks, and a journal section.

Confirmed UI Structure

Header / Hero Styled wordmark: Mo·men·tum (with typographic emphasis on the middle syllable). Displays a live day streak counter (shown as — until data loads, formatted as "X day streak").

Nav Tabs Three primary tab buttons: Goals · Done · Streak — indicating the app has at least three distinct views.

Goals Panel A section header labeled "Goals" — the active default view. Presumably renders a list of in-progress habit or goal items from JSON data.

Journal Panel A section labeled "Journal" — a reflective writing or note area, likely a free-text log associated with the day's progress.

Done Tab Inferred Likely a completed/archived view of checked-off goals, separated from the active list.

Streak Tab Inferred Likely visualizes the historical streak data — possibly a heatmap calendar or streak flame counter similar to Duolingo/GitHub contributions.

Observed App Behavior

UI The app renders visible static structure — headers, tab labels, and section names are present in the HTML alongside the JavaScript.

Branding The typographic treatment of Mo·men·tum shows intentional design attention — the middle syllable is highlighted to convey building energy.

UX The streak counter renders as — in the pre-loaded state (no data yet), followed by the text "day streak" — so the UI degrades gracefully to a placeholder rather than showing nothing.

Data Goals and Journal content are populated from a student JSON file — containing sample habits, a goal description, and possibly journal entry text.

Navigation The three-tab navigation (Goals / Done / Streak) uses JavaScript to handle tab switching, showing/hiding panels via CSS display toggling or a small vanilla JS router.

Things That Didn't Work as Expected

Issue Wrong <title> tag: The browser tab reads "Goals" instead of "Momentum". This looks like a copy-paste oversight — the title was set to the name of the first panel rather than the app itself. Any bookmark, link preview, or browser history entry will show "Goals," not "Momentum."

Issue Streak counter shows — on load: A bare em-dash with no context ("— day streak") is slightly confusing before data loads. A default value of 0 or a "Start your streak today!" prompt would be more engaging and informative.

Likely Issue Journal section may be static / non-interactive: It's unclear whether the Journal is editable (a <textarea>) or read-only display of JSON sample text. If it's read-only, it misses the core value proposition of a journaling feature — users should be able to write in it.

Likely Issue No data persistence: As a single HTML file with no backend, any goals checked off or journal entries written would be lost on page refresh. The app has no localStorage integration or state management evident from the shell, meaning streak data resets every session.

Likely Issue Streak visualization likely absent: The "Streak" tab promises a view of historical consistency, but without persistent data storage there is no history to visualize. The tab may be largely empty or show only the JSON sample data.

UX No onboarding or empty state: A first-time user who lands on the page with no goals loaded would see empty panels with no guidance on what to do — no "Add your first goal!" prompt or sample content explanation.

What This App Does Well

Strength Solid static HTML structure — meaningful content is visible and accessible even before JavaScript runs, which aids accessibility and indexability.

Strength Thoughtful branding: the Mo·men·tum wordmark shows design intent beyond just rendering JSON data.

Strength Three-tab architecture (Goals / Done / Streak) is a clear, logical information hierarchy appropriate for a habit tracker.

Strength Including a Journal section elevates this beyond a simple checklist — a real differentiator for the concept app.

Suggested Prompt to Improve the App

Improve this single-file HTML Momentum habit-tracking dashboard (Cornell INFO 1260 project) in the following ways:

Fix the page title: Change <title>Goals</title> to <title>Momentum — Daily Habit Tracker</title> so bookmarks, tab labels, and link previews show the correct app name.
Better streak empty state: Replace the bare "— day streak" placeholder with a motivational call-to-action: "Day 0 — Complete a goal today to start your streak! 🔥" Once at least one goal is completed, show the streak count with a flame emoji that grows in size with longer streaks (CSS scaling based on streak length).
localStorage persistence: Save the goals list, completion status, streak count, and journal entries to localStorage so data survives page refreshes. On load, read from storage first before falling back to the JSON file. Add a small "Reset to sample data" button in the footer for the demo context.
Editable Journal: Make the Journal panel a fully interactive <textarea> with auto-save to localStorage (debounced 500ms). Show a subtle "Saved ✓" indicator when the entry is written. Add a date stamp per entry so users can see their log history.
Streak heatmap: On the Streak tab, render a GitHub-style contribution heatmap using a grid of small colored squares representing the last 30 days. Days with completed goals are filled with a warm color; empty days are grey. This makes progress visceral and motivating.
Add/complete goals interactively: Add an inline input field at the top of the Goals panel to add new goals. Each goal card should have a checkbox — checking it moves the item to the Done tab with a satisfying CSS animation (strike-through + slide-out), and increments the streak counter if the current day hasn't been counted yet.

App Summary: Momentum — Habit & Goal Tracker Dashboard