pure-app
I already have an existing app version built with HTML, CSS, and JavaScript, but you cannot access those files here. So use this description as the source of truth and build a cleaner, more stable, more maintainable version of the same app. Build a premium mobile-first web app called: LifeFlow – Tasks, Habits & Money Manager This is an all-in-one life management app for students and young builders. It should feel like a polished premium product, not a basic CRUD app. Important: - Do NOT make a generic dashboard app - Do NOT oversimplify - Do NOT remove feature depth - Keep it mobile-first - Keep it premium - Use HTML, CSS, and vanilla JavaScript style logic if possible - Prioritize stability, clean structure, and maintainability ================================================== APP STRUCTURE ================================================== Bottom navigation screens: 1. Home 2. Planner 3. Habits 4. Money 5. Notes ================================================== HOME SCREEN ================================================== Include: - time-based greeting - current date - hero stats - quick add buttons - motivational quote - preview of today’s tasks - habits today - money today - debts overview - recent notes - goals preview - mood preview - focus timer card ================================================== PLANNER SCREEN ================================================== Task management system with: - add task - edit task - delete task - mark complete - filters: today, tomorrow, week, all - search - sort by time, priority, category - task cards with: - title - description - date - start/end time - priority - category ================================================== HABITS SCREEN ================================================== Habit tracker with: - add/edit/delete habit - daily tracking - streaks - date-based status - sections: - in progress - missed - skipped - completed - challenges: - 21 days - 30 days - 66 days - custom - analytics tab - weekly chart - monthly heatmap - habit performance view ================================================== MONEY SCREEN ================================================== This screen has 3 inner tabs: 1. Expenses 2. Shared 3. Debts ------------------------------------------ EXPENSES TAB ------------------------------------------ - add income/expense - edit/delete entry - monthly budget - net balance - income - expenses - savings rate - top category - weekly spend - pending dues - no-spend streak - selected range summary - smart insight - date filters: - all - today - 7 days - month - custom/more - expense categories including custom category support ------------------------------------------ SHARED TAB ------------------------------------------ Mini Splitwise-style feature: - add/edit/delete shared expense - manage members - manage shared categories/sections - fields: - amount - date - category - paid by - description - note - split among - equal split by default - expandable expense cards - per-expense split details - who pays whom logic - category filters - time filters - compact clean UI - avoid crowded layout ------------------------------------------ DEBTS TAB ------------------------------------------ - add/edit/delete debt - debt types: - you gave - you owe - status: - pending - paid - totals: - to receive - you owe ================================================== NOTES SCREEN ================================================== Notes system must be strong and polished: - add/edit/delete note - pin note - search notes - note detail view - two types: 1. text note 2. todo note - pinned notes section - note categories - smooth notes UX - notes should feel enhanced and premium ================================================== OTHER FEATURES ================================================== - mood logging with emoji and journal - goals system with progress - focus timer with presets and custom minutes - user profile panel with avatar/name/bio/stats - dark/light theme - local-first persistence ================================================== IMPORTANT FIX GOALS ================================================== Build this app in a cleaner and more stable way than a typical quick prototype. Focus on: - correct HTML structure - stable tab switching - stable bottom navigation - stable modals - no duplicate IDs - no broken wrappers - no fragile DOM logic - safe rendering - maintainable code structure - reliable local persistence - smooth mobile layout If rings/charts/canvas elements are used, only keep them if stable. Do not let decorative features break the app. ================================================== UI DIRECTION ================================================== - premium, cinematic, modern UI - glassmorphism - gradients - rounded cards - soft shadows - mobile app feel - clean spacing - elegant typography - strong hierarchy - polished empty states ================================================== OUTPUT ================================================== Provide: 1. short audit summary 2. implementation plan 3. full app code 4. changelog 5. test checklist Final goal: Create a premium, stable, production-style version of this app concept called: LifeFlow – Tasks, Habits & Money Manager
Comments (0)
Sign in to leave a comment
Project Tasks21
Implement Theme & Base Structure
As a developer, I want to implement the global color theme and structural layout across all existing scaffold pages so that the app visually matches the LifeFlow design system. This includes applying the color palette (#1F1F33 background, #292946 surface, #F5F5F5 text, #FF7A59 accent, #B3B3D1 muted), glassmorphism effects, gradient styles, rounded cards, and soft shadows. Also remove any scaffold pages not required by the SRD. This task must be completed before any page-specific implementation begins.
Implement Planner Backend API
As a user, I want to use the backend API for the Planner so that I can create, read, update, and delete tasks with fields like title, description, date, start/end time, priority, and category. Expose REST endpoints using FastAPI with MySQL/MariaDB persistence via Alembic migrations.
Implement Habits Backend API
As a user, I want to use the backend API for Habits so that I can create, read, update, and delete habits, log daily completions, track streaks, manage challenge enrollments, and fetch analytics data (weekly charts, monthly heatmaps). Expose REST endpoints using FastAPI.
Implement Money Backend API
As a user, I want to use the backend API for Money management so that I can create, read, update, and delete income and expense entries, manage shared expenses with member splits, and manage debts (you gave / you owe). Expose REST endpoints for all three tabs using FastAPI.
Implement Notes Backend API
As a user, I want to use the backend API for Notes so that I can create, read, update, delete, pin, and categorize text notes and todo notes, and search notes. Expose REST endpoints using FastAPI.
Implement Mood, Goals & Focus API
As a user, I want to use the backend API for mood logging, goal tracking, and focus timer so that I can persist mood entries with emoji and journal text, track goals with progress indicators, and store focus session data. Expose REST endpoints using FastAPI.
Implement Profile Backend API
As a user, I want to use the backend API for the Profile so that I can update my avatar, name, bio, and retrieve profile stats. Expose REST endpoints using FastAPI.
Build Home Dashboard Page
As a user, I want to use the Home dashboard page so that I can see a time-based greeting, current date, hero stats, quick add buttons, motivational quote, and previews of today's tasks, habits, money, debts, recent notes, goals, mood, and focus timer. Implement based on the existing Home (v3) JSX design. Includes subtle animations for hero stats and focus timer glowing ring, and swipeable section transitions. References the dynamic living dashboard concept from the SRD.
Build Planner Page
As a user, I want to use the Planner page so that I can add, edit, delete, and mark tasks complete, filter by today/tomorrow/week/all, search and sort by time/priority/category, and view task cards with title, description, date, start/end time, priority, and category. Implement based on the existing Planner (v1) JSX design.
Build Habits Tracking Page
As a user, I want to use the Habits page so that I can add, edit, delete, and track habits daily, view streaks and date-based status, organize habits into sections (in progress, missed, skipped, completed), participate in habit challenges (21/30/66 days or custom), and access analytics with weekly charts, monthly heatmaps, and habit performance views. Implement based on the existing Habits (v1) JSX design.
Build Money Manager Page
As a user, I want to use the Money page so that I can manage income/expenses (add, edit, delete), view monthly budget, net balance, savings rate, top category, weekly spend, no-spend streak, filter by date ranges, manage shared expenses with member splits, and track debts (you gave / you owe) with pending and paid statuses. Implement based on the existing Money (v1) JSX design covering Expenses, Shared, and Debts tabs.
Build Notes Page
As a user, I want to use the Notes page so that I can add, edit, delete, and pin notes, search notes, view note details, organize notes into categories, and create two types of notes: text notes and todo notes. Implement based on the existing Notes (v1) JSX design.
Build Profile Page
As a user, I want to use the Profile page so that I can view and update my avatar, name, bio, and stats, toggle between dark and light themes, and access a user profile panel. Implement based on the existing Profile (v1) JSX design.
Implement AI Assistant Integration
As a user, I want to use the AI assistant feature (dashboard/ai-assistant page) so that I can interact with an intelligent assistant powered by GPT and Claude via LiteLLM routing and Langchain for context-aware responses including academic, coding, and productivity queries.
Add Bottom Navigation Component
As a user, I want a persistent bottom navigation bar so that I can seamlessly switch between Home, Planner, Habits, Money, Notes, and Profile screens with smooth transitions, consistent with the mobile-first design principles outlined in the SRD.
Integrate Planner Frontend with API
As a user, I want the Planner page to connect to the backend API so that tasks are persisted, filtered, and sorted via live data. Wire up add/edit/delete task actions, filter controls, and sort functionality to the Planner REST endpoints.
Integrate Habits Frontend with API
As a user, I want the Habits page to connect to the backend API so that habit tracking, streaks, challenge progress, and analytics are persisted and displayed with live data.
Integrate Money Frontend with API
As a user, I want the Money page to connect to the backend API so that all expense, shared expense, and debt data is persisted and live balances, summaries, and filters reflect real data.
Integrate Notes Frontend with API
As a user, I want the Notes page to connect to the backend API so that notes are persisted, searchable, and organized by category with live data.
Integrate Profile Frontend with API
As a user, I want the Profile page to connect to the backend API so that my avatar, name, bio, and stats are persisted and reflected live. Also wire up dark/light theme toggle preference persistence.
Integrate Home Dashboard with APIs
As a user, I want the Home dashboard page to connect to all backend APIs so that the hero stats, task previews, habit streaks, money summary, debt info, recent notes, goals, mood, and focus timer reflect real persisted data from the respective modules.
Good Afternoon, Alex
Saturday
July 11th, 2026
Small daily improvements over time lead to stunning results. Focus on progress, not perfection.
Robin Sharma
Today's Tasks
2 remainingReview study notes for exam
Submit budget spreadsheet
Evening workout session
Recent Notes
Startup Pitch Outline
Key points for the investor meeting: market size, revenue model, competitive advantage, and team background.
Weekly Grocery List
Milk, eggs, bread, spinach, chicken breast, brown rice, olive oil, bananas, almonds, yogurt.
CS301 Lecture Notes
Data structures review: binary trees, hash tables, graph traversal algorithms. Focus on Big-O analysis for midterm.
Active Goals
Manage Goals →Save $2,000 Emergency Fund
Read 12 Books This Year
Complete Web Dev Course
No comments yet. Be the first!