Flows category icon
App Builder
Beginner

Settings/Billing Page

Build a real settings area: profile edits that persist, password change, plan display, and danger zone.

6 steps19 verify checks45-75 minutesWorks with: emergent · chatgpt · claude · cursor
Start Guided Walkthrough

The Route

0/6 verified

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack
PROJECT CONTEXT:
I am adding an account settings page where users manage profile, password, plan, and account deletion.

GOAL:
Implement a settings page whose every control actually persists: profile, password, preferences, plan, and delete account.

REQUIREMENTS:
- Profile section (name, email) with validated persistent edits
- Password change requiring the current password
- Preferences (e.g. notifications toggle) that persist
- Plan/billing section showing the current plan
- Danger zone: delete account with confirmation

CONSTRAINTS:
- Every toggle and save must persist - no decorative controls
- Password change must verify the current password
- Account deletion must actually remove access

DEFINITION OF DONE:
- Profile edits survive refresh and re-login
- Password change works and old password stops working
- Preference toggles persist
- Delete account logs out and blocks re-login

COMMON FAILURES TO AVOID:
- Save buttons that show a toast but write nothing
- Password change that does not verify the current password
- Toggles resetting on reload
- Delete account that only redirects home

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More App Builder flows that share ground with this one.

Flows category icon
App Builder

Pricing Page Builder

Design and build a pricing page that converts: plan structure, value anchoring, FAQs, and a working upgrade path.

01Design the plan structure
02Write the plan copy
03Build the page

+2 more steps to Done

Best foryour first pass at this - no prior setup assumed

5 steps45-75 minutesBeginner
Flows category icon
App Builder

User Onboarding Flow

Build a multi-step onboarding that captures real user data, persists progress, and lands users in a personalized app.

01Define onboarding steps and data
02Build the wizard shell
03Persist answers per step

+3 more steps to Done

Best foryour first pass at this - no prior setup assumed

6 steps45-75 minutesBeginner
Flows category icon
App Builder
Generated

Add Real-Time Presence Indicators to a Chat App with WebSockets

A step-by-step flow for implementing real-time online, offline, and typing presence in a chat app using WebSockets, including backend presence tracking, frontend updates, reconnect handling, and verification.

01Inspect the existing chat architecture and choose presence data flow
02Define the presence event contract and server-side state model
03Implement authenticated WebSocket connection handling on the server

+7 more steps to Done

Best forbuilders who have shipped a basic app before

10 steps60-120 minutesIntermediate

Made with Emergent