Gautham Krishna

Amra

Couple finance and relationship goals app

Visit siteSource

Amra

Relationship-first finance for couples: shared expenses, daily goal check-ins, and a reward loop in one lightweight PWA.

Role: Product Design + FrontendStack: Next.js, Firebase, FirestorePlatform: Mobile-first PWA

Showcase layout

1) Setup flow

Amra sign-in screen with illustration and Google sign-in button

Sign in
Simple entry point to reduce onboarding friction.

Alternate sign-in exploration from Figma export

Sign-in variant
Visual exploration for the entry screen.

Connect screen showing personal code and partner code input

Partner connect
Code-based pairing keeps setup quick and clear.

Set goals screen with three goal inputs in dark themed card layout

Set goals
Defines measurable daily actions.

Set rewards screen with point tiers and three reward inputs

Set rewards
Creates motivation with fixed point tiers.

2) Core product screens

Home dashboard showing points, monthly spend, and quick navigation

Home dashboard
Points, monthly spend, and direct links to the key actions.

Expenses screen with monthly spend card, settlement info, and expense list

Expenses list
Tracks transactions and who owes whom.

Add expense form with category picker, title, amount, and paid-by selector

Add expense
Fast category-based logging from mobile.

Rewards screen listing redeemable rewards with point costs and redeem actions

Rewards
Redeem incentives based on earned points.

Goal check screen to mark partner goal completion and award points

Goal check
Daily accountability loop between partners.

Settings screen with options to update goals, rewards, and nickname

Settings
Quick edits to goals, rewards, and profile details.

Reward redemption confirmation modal in Amra

Confirmation state
Safe redemption flow with explicit confirmation.

Architecture and data flow

Amra is structured around route groups and focused Firestore service modules:

  • app/(setupflow) handles sign-in, partner connection, and initial goals/rewards setup
  • app/(main) handles home, expenses, rewards, goal check, and settings
  • app/_lib/firestore centralizes read/write logic for users, couples, expenses, and goals/rewards
  • app/_lib/auth wraps Firebase auth client/server flows

Firebase model

  • Auth: Google sign-in identifies each user
  • Users: nickname and connection code state
  • Couples: partner linking and shared context
  • Expenses: transaction items with category, amount, payer, timestamp
  • Goals/Rewards: partner-configured goals and fixed point-tier rewards

Request path examples

  • Add expense: UI form -> addExpense() -> Firestore write -> recomputed monthly totals in getCoupleDetails()
  • Goal check submit: checkbox selections -> addPointsToPartner() -> partner points update -> rewards eligibility changes
  • Redeem reward: UI confirmation -> redeemReward() -> points deduction + success feedback
Amra data flow architectureAmra architectureNext.js routes(setupflow + main)Firestore service layerusers, couple, expense, goalsFirebase Authidentity + sessionCloud Firestore collectionsusers, couples, expenses, goalsAndRewardsread/write for spend totals, points, and redemptions

Design notes

  • Warm, playful UI language makes finance conversations less stressful
  • Card-based hierarchy keeps core numbers visible without dense dashboards
  • Setup flow front-loads relationship context (partner, goals, rewards)
  • Habit and money loops stay connected through points and redemptions

Links

Live demo

Project repository

Back to top | Other Projects →