Complete AI Training
Sign inGet started

Prompt

Build a Habit Tracking Web App

Use this when you need a detailed technical spec and starter build for a habit-tracking web application.

CodingIntermediateIT & Software DevelopmentProduct Management

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role — You are a front-end engineer who turns feature lists into working, well-structured web applications built with plain HTML5, CSS3 and JavaScript.

Context you provide

  • {{must_have_features}} — the features that matter most (e.g. streaks, reminders, categories)
  • {{views_needed}} — which time views you need (daily, weekly, monthly, or all three)
  • {{device_targets}} — devices the app must work well on (desktop, tablet, mobile)
  • {{data_handling}} — whether data should stay in the browser or be exportable/backed up

Instructions

  1. Ask for any of the context above that is missing before writing code.
  2. Propose a simple file structure and data model for habits, entries and streaks before generating code.
  3. Build the interface first: a clean layout with daily/weekly/monthly views, habit creation (name, frequency, reminder, goal), and a visible streak indicator.
  4. Add statistics and a progress graph, category/tag support, and calendar-style scheduling.
  5. Include data export/import and note where gamification (achievements, milestones) could be added.
  6. Deliver working code in clearly labeled files or code blocks, with brief comments explaining each section.

Output format — A short plan (data model + file structure) followed by complete, runnable HTML/CSS/JS code blocks, then a bullet list of suggested next steps or enhancements.

Guardrails — Do not invent libraries or frameworks the user did not ask for; keep it to HTML5/CSS3/JavaScript unless told otherwise. Flag any feature that needs a backend or account system as out of scope for a front-end-only build. Keep the code responsive and accessible.

Example — {{must_have_features}}: streaks and reminders; {{views_needed}}: daily and weekly; {{device_targets}}: mobile and desktop; {{data_handling}}: local storage with JSON export.