Front-End Components
Overview
This document catalogs the visual elements and UI components needed for LBH Educate.
Screen-Level Components
Authentication Screen
Sign-In View
- App logo/branding
- Welcome message
- Three OAuth provider buttons (Google, Apple, Microsoft)
- Each button displays provider logo and "Sign in with [Provider]" text
Component States:
- Default state (ready for selection)
- Loading state (during OAuth flow)
- Error state (if authentication fails)
Home/Dashboard Screen
Components:
- Navigation bar/tabs (Journal, Ideas, Progress)
- Child selector (if user manages multiple children)
- "New Entry" button (prominent, always accessible)
- Quick stats summary (recent entries, skills tracked)
- Timeline preview (recent journal entries)
States:
- Empty state (no children/entries yet - onboarding prompts)
- Populated state (shows entries and progress)
- Multiple children view (carousel or grid of child profiles)
Child Profile Management Screen
Create/Edit Child Profile View:
- Profile photo upload/selector
- Name input field
- Date of birth picker
- Interests tags input (can add multiple)
- Curriculum approach selector (dropdown or radio buttons)
- Save/Cancel buttons
Child Profile Card (Summary View):
- Child photo
- Child name and age
- Quick progress indicators
- Tap to view full profile/timeline
Journal Entry Creation Screen
Photo Capture View:
- Camera viewfinder (or photo library picker)
- Capture button
- Switch camera button (front/back)
- Flash control
- Gallery thumbnail (to select existing photo)
Entry Details View:
- Selected photo preview (large, editable)
- Date/time picker (defaults to now, can be adjusted for past events)
- Freeform notes text area (multiline, expandable)
- "Analyze Photo" button or automatic AI processing indicator
AI Template Suggestion View:
- Suggested template card with icon
- Template name and description
- Pre-selected skills/behaviors (displayed as tags/chips)
- "Use Template" and "Skip" buttons
- Option to view other template suggestions
Skill & Behaviour Tagging View:
- Skills Section:
- Selected skills displayed as tags/chips (from template or custom)
- Quick-add skill selector (searchable dropdown or categorized by: Literacy, Communication, Numeracy, Motor, Analytical, Cognitive)
- Each skill tag shows:
- Skill name
- Remove button (X)
- Optional confidence/strength indicator
- "Add custom skill" option
- Behaviours Section:
- Selected character traits displayed as tags/chips (from template or custom)
- Quick-add behaviour selector (searchable dropdown from 22 core behaviours)
- Each behaviour tag shows:
- Behaviour name
- Remove button (X)
- Optional confidence/strength indicator
- "Add custom behaviour" option
- Save entry button
States:
- Photo selection state
- AI processing state (loading/analyzing)
- Template selection state
- Final review state before save
- Success confirmation state
Timeline/Journal View Screen
Components:
- Chronological list of journal entries
- Each entry card shows:
- Entry photo (thumbnail or full-width)
- Date/timestamp
- Skills demonstrated (tag display with category color coding)
- Behaviours demonstrated (tag display with distinct styling from skills)
- Excerpt of notes (expandable)
- Tap to view full entry
- Infinite scroll or pagination
- Filter/search bar
- Sort options (newest first, oldest first, by skill, by behaviour)
Empty State:
- Illustration or icon
- "No entries yet" message
- "Create your first entry" call-to-action button
Filter Panel:
- Date range picker
- Skill selector (multi-select, categorized by: Literacy, Communication, Numeracy, Motor, Analytical, Cognitive)
- Behaviour selector (multi-select from 22 character traits)
- Search text input
Entry Detail View
Components:
- Full-size photo display (pinch to zoom)
- Entry date/time
- Creator info (which parent/user logged it)
- Full freeform notes text
- All associated skills (tags with category color coding, tappable to filter by that skill)
- All associated behaviours (tags with distinct styling, tappable to filter by that behaviour)
- Edit button (if user has permissions)
- Delete button (with confirmation)
- Share button (export this specific entry)
Ideas Mode Screen
Gap Visualization View:
- "Skills to Develop" section showing identified gaps
- Visual indicators (progress bars, circular charts)
- Each gap shows:
- Skill name
- Context (e.g., "Not demonstrated in last 30 days")
- "Find Activities" button
Activity Suggestions List:
- Activity cards showing:
- Activity name and icon
- Knowledge area context (e.g., "Household: Cooking")
- Progression level indicator (1-3 scale with visual indicator)
- Brief description
- Target skills (tags with category colors)
- Target behaviours (tags if applicable)
- Time investment indicator
- Location indicator (indoor/outdoor)
- Materials needed preview
- Age suitability
- Bookmark button
- "Learn More" to expand details
- Filter controls:
- Knowledge area category (Household, Society, Well-being, etc.)
- Progression level (1-3)
- Time investment
- Location
- Materials available
- Target skills
- Sort options (recommended, progression level, newest, easiest)
Activity Detail View:
- Activity name and large icon/image
- Knowledge area badge (e.g., "Household: Cooking")
- Progression level indicator (1-3 with description)
- Full description
- Target skills (detailed, with category labels and explanations)
- Target behaviours (if applicable, with explanations)
- Age range suitability
- Estimated time investment
- Location requirements
- Materials needed (full list)
- Step-by-step guidance (optional)
- "Bookmark" button
- "Mark as Completed" button (creates journal entry)
- Related activities suggestions (same knowledge area or similar skills, different progression levels)
Bookmarked Activities View:
- List of saved activity suggestions
- Quick access to try activities later
- Remove bookmark option
- Mark as completed option
Progress Dashboard Screen
Components:
- Child selector (if multiple children)
- Overall progress summary (visual chart or infographic)
- Skills breakdown:
- Categorized skill progress by 6 core categories (Literacy, Communication, Numeracy, Motor skills, Analytical, Cognitive)
- Visual progress indicators per skill
- Trend arrows (improving/stable/declining)
- Tap skill to see related journal entries
- Character Development (Behaviours) section:
- Visual representation of demonstrated character traits
- Frequency indicators for each behaviour
- Most frequently demonstrated behaviours highlighted
- Tap behaviour to see related journal entries
- Timeline chart showing entry frequency over time
- Recent achievements/milestones highlighted
- "Generate Live CV" button
Skill Detail View:
- Skill name and category
- Progress chart over time
- All journal entries demonstrating this skill (linked list)
- First demonstrated date
- Latest demonstration date
- Frequency indicators
- Related skills suggestions
Live CV Export Screen
Components:
- Date range selector (for report period)
- Export format options (PDF, JSON, etc.)
- Preview of report contents
- Customization options:
- Include/exclude specific sections
- Branding/header customization
- Target audience selector (parent use, government reporting, educational institution)
- "Generate Report" button
- Share/download options after generation
Generated Report Preview:
- Scrollable report preview
- Download button
- Share button (email, cloud storage)
- Print option
- Regenerate with different settings
Search & Filter Components
Global Search Bar:
- Text input with search icon
- Autocomplete suggestions (skills, dates, keywords from notes)
- Recent searches dropdown
Filter Panel (Reusable):
- Date range picker
- Skill multi-select (categorized)
- Child selector (if multiple)
- Template type filter
- Clear all filters button
- Apply filters button
Component Variants
Button Variants
- Primary action (e.g., "Save Entry") - prominent, filled
- Secondary action (e.g., "Cancel") - outline or text
- Destructive action (e.g., "Delete") - red/warning color
- Icon-only buttons (navigation, quick actions)
Tag/Chip Variants
- Skill tag (color coded by category: Literacy, Communication, Numeracy, Motor, Analytical, Cognitive)
- Behaviour tag (distinct styling from skills, e.g., different shape or pattern)
- Knowledge area tag (for activity context)
- Interest tag
- Template tag
- Progression level badge (visual indicator for Level 1-3)
- Removable tags (with X button)
- Non-interactive tags (display only)
Card Variants
- Journal entry card (compact and expanded)
- Child profile card
- Activity suggestion card
- Template suggestion card
- Progress summary card
Navigation Patterns
- Bottom tab navigation (Journal, Ideas, Progress)
- Top navigation bar with back button
- Hamburger menu (if additional settings/options needed)
- Floating action button for "New Entry" (always accessible)
Layout Patterns
Mobile-First Design
- Single column layouts for primary content
- Full-width photo displays
- Bottom sheet modals for pickers and filters
- Pull-to-refresh on scrollable lists
- Swipe gestures for navigation (where appropriate)
Tablet/Responsive Layouts
- Two-column layouts where appropriate (e.g., timeline + detail view)
- Sidebar navigation instead of bottom tabs
- Larger photo galleries with grid view options
- Picture-in-picture for AI processing while user continues editing
Interaction Patterns
Photo-First Emphasis
- Camera accessible within one tap from any screen
- Large photo displays throughout app
- Photo as visual anchor for all entries
Speed Optimizations
- Auto-save drafts
- Minimal required fields
- Smart defaults (current date/time, current child)
- One-tap template acceptance
- Swipe actions for common tasks (delete, bookmark, edit)
AI Feedback
- Real-time processing indicators
- Confidence levels for suggestions
- Ability to accept/reject AI suggestions quickly
- Learn from user corrections over time (noted, not detailed in UI)
Notes
- This is a living document that will be updated after each brainstorming prompt
- Focus on visual elements and their purpose, not implementation code
- Consider responsive behavior and different states (loading, error, empty, etc.)
- Prioritize speed and ease of use - must be faster than traditional journaling apps