zee-solution/docs/screen.md

GUIDE

This document details the User Interface (UI) design specifications primarily focuses on the visual and interactive elements, referencing the core design principles, linking to design files (e.g., Figma), outlining design system usage, and providing a screen-by-screen breakdown of UI components, their properties, and behaviors.

FORMAT

Title: [Application/Website Name]

app_ver: [app_ver] doc_ver: [doc_ver]

CORE PRINCIPLES

[Design Principles] Design: [Link Figma/Design File]

Design System

[Category (Color, Typography, Space, Icon)] : [Rules]

Screen

[Numerical order].[Screen Name]

Purpose

[Description about screen]

Component

Component

Content	Element	Logic	Main Event	Animation
[Content Desciption]	[UI Element]	[Business Logic]	[Event]	[Animation]
...	...	...	...	...

Flow

• In: [from Screens]
• Out: [to Screen]

Connect

[API endpoint]

---

CONTENT

Title: ZEE Quiz Application

app_ver: 1.0.0 doc_ver: A1

Design System

Color

• Primary: #4F46E5 (Indigo-600)
• Secondary: #10B981 (Emerald-500)
• Error: #EF4444 (Red-500)
• Background: #FFFFFF
• Text: #111827 (Gray-900)

Typography

• Family: 'Inter', system-ui
• Scale:
  • H1: 3rem/48px
  • H2: 2.25rem/36px
  • Body: 1rem/16px
  • Small: 0.875rem/14px

Space

• Base: 4px
• Scale: 4, 8, 16, 24, 32, 48

Icon

• Source: Heroicons
• Size: 20x20px

Screen

1. Authentication

Purpose

Handle user login and registration

Component

Content	Element	Logic	Main Event	Animation
Login Form	Form	Validate credentials	onSubmit	Fade in
Email	Input	Required, email format	onChange	None
Password	Input	Required, min 8 chars	onChange	None
Submit	Button	Enable if form valid	onClick	Scale

Flow

• In: Landing, Register
• Out: Dashboard

Connect

/api/auth/login

2. Dashboard

Purpose

Main user interface showing quizzes and stats

Component

Content	Element	Logic	Main Event	Animation
Quiz List	Grid	Fetch active quizzes	onLoad	Fade in
Stats	Cards	Calculate user stats	onLoad	Slide up
Quick Actions	Buttons	Role-based access	onClick	Scale

Flow

• In: Auth, Quiz Complete
• Out: Quiz, Profile

Connect

/api/dashboard

3. Quiz Taking

Purpose

Interface for attempting quizzes

Component

Content	Element	Logic	Main Event	Animation
Question	Card	Load question data	onNext	Slide
Timer	Display	Countdown timer	onTick	Pulse
Options	Radio Group	Single selection	onChange	Scale
Navigation	Buttons	Question flow	onClick	Slide

Flow

• In: Dashboard, Quiz List
• Out: Results

Connect

/api/quiz/{id}

4. Results

Purpose

Show quiz completion results

Component

Content	Element	Logic	Main Event	Animation
Score	Display	Calculate final score	onLoad	Count up
Review	List	Show correct answers	onClick	Fade in
Share	Button	Generate share link	onClick	Scale

Flow

• In: Quiz Taking
• Out: Dashboard

Connect

/api/quiz/{id}/results

---

Last Updated: 2025-06-06 Next Review: 2025-07-01