Case Study Overview

Built to communicate the challenge, the approach, and the outcome with clarity.

Peakiq 2FA is a mobile-first authenticator app built for users who take their security seriously. It stores and generates time-based one-time passwords (TOTP) for all your online accounts — from Google and GitHub to AWS and Stripe — inside an encrypted local vault. Everything is processed on-device, meaning your codes never leave your phone unless you choose to sync them. With a clean dark-and-green visual language, biometric authentication, cloud sync, and QR-based onboarding, Peakiq 2FA combines enterprise-grade security with a consumer-friendly experience.

What Is Peakiq 2FA?

With a clean dark-and-green visual language, biometric authentication, cloud sync, and QR-based onboarding, Peakiq 2FA combines enterprise-grade security with a consumer-friendly experience.

Screens Overview

1. Splash / Brand Screen

The entry point of the app. Displays the Peakiq shield logo, the app name, and the tagline "Vigilant Security" on a clean white background. Sets the tone: trustworthy, minimal, purposeful.

2. Login Screen

**Route:** `/login`
**Purpose:** Authenticate the user before granting vault access.

Users can sign in using:

Continue with Google — OAuth-based sign-in via Google account
Continue with Apple — Native Apple ID sign-in

Includes links to Create an account for new users, and consent copy confirming age and agreement to Privacy Policy & Terms of Use.

3. Scan QR Code Screen

**Route:** `/scan`
**Purpose:** Add a new 2FA account by scanning a QR code.

Features:

Live camera viewfinder with animated corner brackets for alignment guidance
Enter Code Manually — fallback for services that don't show QR codes
Import Image — scan a QR code from your photo library
Flashlight — toggle torch for low-light environments
Privacy note: "Scanning happens locally on your device"

Bottom navigation: Vault · Secure · Settings

4. Home — Vault Screen

**Route:** `/vault`
**Purpose:** Central hub displaying all active 2FA accounts and their live TOTP codes.

Each account card shows:

Service icon + name (e.g. Google, GitHub, AWS Console, Stripe, Office 365)
Associated account identifier (email or username)
6-digit TOTP code, refreshed every 30 seconds
Copy icon to copy the code to clipboard
Circular progress indicator showing time remaining before code rotation

A prominent + FAB (Floating Action Button) in the bottom-right lets users add new accounts instantly.

Accounts shown in the mockup:

Service	Account	Code
Google	[email protected]	482 910
GitHub	dev_main_sentinel	901 224
AWS Console	admin-root-01	045 772
(Unnamed)	v_sentinel_08	663 119
Stripe	[email protected]	320 005
Office 365	[email protected]	554 921

5. Settings Screen

**Route:** `/settings`
**Purpose:** Manage vault preferences, sync, protection, and account data.

Sections:

Account & Data

Cloud Sync — Sync the encrypted vault across devices (toggle)
Export Backup Codes — Generate physical recovery keys

Vault Protection

PIN Protection — Require a 6-digit PIN on launch (toggle)
Biometric Auth — Use Face ID or Fingerprint (toggle, enabled by default)

About

Destructive Actions

Delete Vault (red button) — Permanently deletes the account and wipes all encrypted vault data

6. Enter PIN Screen

**Route:** `/pin`
**Purpose:** Verify the user's identity via a 6-digit security PIN before granting vault access.

Features:

6-dot progress indicator showing how many digits have been entered
Full numeric keypad (0–9)
Backspace control
Confirm (green checkmark) button
Use Biometrics — Switch to Face ID / Fingerprint authentication
Forgot PIN? — Recovery link

Design System

Color Palette

Token	Value	Usage
`--color-primary`	`#1B4D3E` (Dark Forest Green)	Brand color, CTAs, active states
`--color-accent`	`#2E7D5B` (Emerald)	Toggles, highlights
`--color-surface`	`#FFFFFF`	Card backgrounds
`--color-background`	`#F5F5F5`	App background
`--color-text-primary`	`#1A1A1A`	Body text
`--color-text-secondary`	`#6B6B6B`	Metadata, subtitles
`--color-danger`	`#C0392B`	Destructive actions
`--color-code`	`#1A1A1A`	TOTP digits

Typography

Display / Brand: Rounded sans-serif (bold weight) for logo and headings
Body: Clean, high-legibility sans-serif for labels and metadata
TOTP Code: Monospaced, large (32–36px), letter-spaced for readability

Component Patterns

Account Card — White card with rounded corners, subtle shadow, service icon, account label, monospaced code, copy button
Toggle — iOS-style switch; green when active
FAB — Green circle with + icon, bottom-right anchored
Bottom Nav — Icon + label tabs: Vault, Secure, Settings
PIN Dots — 6 filled/unfilled circular indicators

Security Architecture

All vault data is encrypted locally on the device
TOTP generation follows RFC 6238 (Time-based One-Time Password)
Biometric authentication via Face ID / Touch ID (platform native)
Cloud Sync transmits only encrypted blobs — Peakiq never sees plaintext codes
PIN Protection adds an additional layer before vault access
No ads. No tracking. No third-party data sharing.

Navigation Structure

App
├── Splash
├── Login
│   └── Create Account
├── PIN Entry  ← (if PIN Protection enabled)
├── Vault (Home)
│   ├── Account Card (per service)
│   └── Add Account → Scan QR / Enter Manually / Import Image
├── Secure
└── Settings
    ├── Cloud Sync
    ├── Export Backup Codes
    ├── PIN Protection
    ├── Biometric Auth
    ├── Privacy Policy
    └── Delete Vault

Tagline Options

"Your codes. Your vault. Your rules."
"Vigilant Security — protecting every login."
"Two-factor authentication, beautifully secured."
"Lock what matters. Trust what's yours."

Peakiq 2FA — Vigilant Security