Skip to content

Bavya17/AETHER

BranchesTags

Repository files navigation

AETHER

AN EMPHATETIC AI PLATFORM DESIGNED FOR EVERYDAY USE

Project Overview

Referenced Files in This Document - [package.json](file://package.json) - [tailwind.config.ts](file://tailwind.config.ts) - [src/main.tsx](file://src/main.tsx) - [src/App.tsx](file://src/App.tsx) - [src/lib/store.tsx](file://src/lib/store.tsx) - [src/pages/OnboardingPage.tsx](file://src/pages/OnboardingPage.tsx) - [src/pages/DashboardPage.tsx](file://src/pages/DashboardPage.tsx) - [src/pages/TasksPage.tsx](file://src/pages/TasksPage.tsx) - [src/pages/AnalyticsPage.tsx](file://src/pages/AnalyticsPage.tsx) - [src/pages/SocialPage.tsx](file://src/pages/SocialPage.tsx) - [src/pages/AchievementsPage.tsx](file://src/pages/AchievementsPage.tsx) - [src/components/companion/AetherCompanion.tsx](file://src/components/companion/AetherCompanion.tsx) - [src/components/dashboard/FocusScoreRing.tsx](file://src/components/dashboard/FocusScoreRing.tsx) - [src/components/dashboard/WellnessBar.tsx](file://src/components/dashboard/WellnessBar.tsx) - [src/components/layout/BottomNav.tsx](file://src/components/layout/BottomNav.tsx) - [src/components/ui/button.tsx](file://src/components/ui/button.tsx) - [src/lib/utils.ts](file://src/lib/utils.ts)

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction

Samsung Aether Companion is a productivity and wellness platform designed to help users manage tasks intelligently while supporting holistic wellbeing. It blends AI-powered insights with a friendly, animated companion to guide users through daily routines, task scheduling, social connections, and personal growth. The application emphasizes sustainable productivity over burnout, offering real-time wellness monitoring, personalized AI companions, social features, and gamification elements such as XP, streaks, and badges.

Key value propositions:

  • Real-time wellness monitoring: Visual wellness scores, cognitive load tracking, and energy metrics inform daily decisions.
  • Personalized AI companions: An interactive, mood-responsive avatar provides encouragement, reminders, and actionable suggestions.
  • Social features: Friends’ circles, wellness challenges, and focus groups foster community and accountability.
  • Gamification: XP progression, level-ups, streaks, and badges reward consistency, balance, and rest.

Target audience:

  • Productivity-focused individuals who seek a balanced approach to managing work, health, and relationships without sacrificing mental wellbeing.

Role in the Samsung ecosystem:

  • As part of Samsung’s broader digital wellness vision, Aether Companion aligns with Samsung’s commitment to human-centered design and responsible technology. It complements Samsung’s wearable and mobile ecosystems by delivering insights and motivation grounded in real-time user data and behavioral patterns.

Positioning in the productivity app market:

  • Unlike traditional task managers, Aether Companion integrates emotional and physical wellness metrics, AI-driven suggestions, and social reinforcement to create a more human-centric productivity experience.

Project Structure

The application follows a feature-based structure with clear separation of concerns:

  • Pages: Onboarding, Dashboard, Tasks, Analytics, Social, Achievements
  • Components: Reusable UI elements and specialized widgets (e.g., FocusScoreRing, WellnessBar)
  • Layout: Bottom navigation and shared UI primitives
  • State: Centralized user state and actions via a React context provider
  • Styling: Tailwind CSS with custom theme tokens and animations
graph TB
subgraph "Entry Point"
MAIN["src/main.tsx"]
APP["src/App.tsx"]
end
subgraph "Pages"
ONBOARD["OnboardingPage.tsx"]
DASH["DashboardPage.tsx"]
TASKS["TasksPage.tsx"]
ANALYTICS["AnalyticsPage.tsx"]
SOCIAL["SocialPage.tsx"]
ACHIEV["AchievementsPage.tsx"]
end
subgraph "Components"
NAV["BottomNav.tsx"]
COMP["AetherCompanion.tsx"]
FOCUS["FocusScoreRing.tsx"]
WELLNESS["WellnessBar.tsx"]
BTN["button.tsx"]
end
subgraph "State & Utils"
STORE["lib/store.tsx"]
UTILS["lib/utils.ts"]
end
MAIN --> APP
APP --> NAV
APP --> ONBOARD
APP --> DASH
APP --> TASKS
APP --> ANALYTICS
APP --> SOCIAL
APP --> ACHIEV
DASH --> COMP
DASH --> FOCUS
DASH --> WELLNESS
TASKS --> COMP
ANALYTICS --> COMP
ACHIEV --> COMP
SOCIAL --> BTN
NAV --> DASH
NAV --> TASKS
NAV --> ANALYTICS
NAV --> SOCIAL
NAV --> ACHIEV
APP --> STORE
STORE --> TASKS
STORE --> DASH
STORE --> ANALYTICS
STORE --> SOCIAL
STORE --> ACHIEV
STORE --> ONBOARD
Loading

Diagram sources

  • src/main.tsx:1-11
  • src/App.tsx:1-57
  • src/lib/store.tsx:1-155
  • src/components/layout/BottomNav.tsx:1-57
  • src/components/companion/AetherCompanion.tsx:1-189
  • src/components/dashboard/FocusScoreRing.tsx:1-55
  • src/components/dashboard/WellnessBar.tsx:1-44
  • src/components/ui/button.tsx:1-53
  • src/pages/OnboardingPage.tsx:1-209
  • src/pages/DashboardPage.tsx:1-175
  • src/pages/TasksPage.tsx:1-219
  • src/pages/AnalyticsPage.tsx:1-233
  • src/pages/SocialPage.tsx:1-223
  • src/pages/AchievementsPage.tsx:1-213

Section sources

  • src/main.tsx:1-11
  • src/App.tsx:1-57
  • src/lib/store.tsx:1-155

Core Components

  • App shell and routing: Conditional rendering of onboarding versus main pages, with animated transitions and a bottom navigation bar.
  • State management: Centralized user state with actions to toggle tasks, update XP, and complete onboarding.
  • Companion avatar: Mood-aware, interactive SVG character with animations and message bubbles.
  • Dashboard widgets: Focus score ring, wellness bar, quick actions, timeline, XP progress, and wellness metrics.
  • Task management: Filterable lists, priority indicators, AI suggestions, and schedule insights.
  • Analytics: Weekly trends, distribution charts, and summary insights.
  • Social hub: Friends list, statuses, wellness challenges, and focus groups.
  • Achievements: Badges, streaks, XP, and reflection summaries.

Section sources

  • src/App.tsx:12-46
  • src/lib/store.tsx:115-155
  • src/components/companion/AetherCompanion.tsx:11-189
  • src/pages/DashboardPage.tsx:20-175
  • src/pages/TasksPage.tsx:30-219
  • src/pages/AnalyticsPage.tsx:111-233
  • src/pages/SocialPage.tsx:105-223
  • src/pages/AchievementsPage.tsx:27-213

Architecture Overview

The app uses a React 18.3.1 frontend with a centralized state provider and a feature-rich UI built with Tailwind CSS and Framer Motion. Pages are rendered conditionally after onboarding, and navigation is handled by a bottom tab bar with smooth transitions. The companion avatar is a reusable component integrated across pages to deliver contextual insights and encouragement.

graph TB
A["App.tsx<br/>Conditional rendering"] --> B["BottomNav.tsx<br/>Navigation"]
A --> C["OnboardingPage.tsx<br/>Welcome flow"]
A --> D["DashboardPage.tsx<br/>Overview + Companion"]
A --> E["TasksPage.tsx<br/>Task list + AI insights"]
A --> F["AnalyticsPage.tsx<br/>Insights + Charts"]
A --> G["SocialPage.tsx<br/>Friends + Challenges"]
A --> H["AchievementsPage.tsx<br/>XP + Badges"]
D --> I["AetherCompanion.tsx<br/>Mood + Animations"]
E --> I
F --> I
H --> I
D --> J["FocusScoreRing.tsx"]
D --> K["WellnessBar.tsx"]
L["store.tsx<br/>UserState + Actions"] --> D
L --> E
L --> F
L --> G
L --> H
L --> C
Loading

Diagram sources

  • src/App.tsx:12-46
  • src/components/layout/BottomNav.tsx:10-16
  • src/pages/OnboardingPage.tsx:57-209
  • src/pages/DashboardPage.tsx:20-175
  • src/pages/TasksPage.tsx:30-219
  • src/pages/AnalyticsPage.tsx:111-233
  • src/pages/SocialPage.tsx:105-223
  • src/pages/AchievementsPage.tsx:27-213
  • src/components/companion/AetherCompanion.tsx:11-189
  • src/components/dashboard/FocusScoreRing.tsx:7-55
  • src/components/dashboard/WellnessBar.tsx:8-44
  • src/lib/store.tsx:98-155

Detailed Component Analysis

State Management and Data Model

The centralized state encapsulates user profile, tasks, wellness metrics, social connections, badges, and weekly data. It exposes actions to toggle tasks (affecting XP) and to complete onboarding.

classDiagram
class UserState {
+string name
+number level
+number xp
+number xpToNext
+number streak
+number focusScore
+number wellnessScore
+number energyLevel
+number cognitiveLoad
+boolean completedOnboarding
+Task[] tasks
+Friend[] friends
+Badge[] badges
+WeeklyData[] weeklyData
}
class Task {
+string id
+string title
+string category
+string priority
+boolean completed
+string? time
+string? duration
+string? aiSuggestion
+string energyLevel
}
class Friend {
+string id
+string name
+string avatar
+number streak
+string status
+number consistency
}
class Badge {
+string id
+string name
+string icon
+string description
+boolean earned
+string category
}
class WeeklyData {
+string day
+number focus
+number wellness
+number rest
+number social
}
class AppProvider {
+state UserState
+setState(state)
+toggleTask(id)
+completeOnboarding(name)
}
AppProvider --> UserState : "provides"
UserState --> Task : "contains"
UserState --> Friend : "contains"
UserState --> Badge : "contains"
UserState --> WeeklyData : "contains"
Loading

Diagram sources

  • src/lib/store.tsx:3-113
  • src/lib/store.tsx:115-155

Section sources

  • src/lib/store.tsx:98-155

Companion Avatar Interaction Flow

The companion avatar responds to user context and interactions, displaying mood-appropriate animations and message bubbles.

sequenceDiagram
participant User as "User"
participant Page as "Dashboard/Tasks/Analytics"
participant Comp as "AetherCompanion"
participant Store as "store.tsx"
User->>Page : Open page
Page->>Store : Read state (scores, tasks)
Page->>Comp : Render(mood, message)
Comp->>Comp : Animate eyes/mouth
User->>Comp : Tap avatar
Comp->>Comp : Scale down + sparkles
Comp-->>Page : onClick callback (optional)
Loading

Diagram sources

  • src/pages/DashboardPage.tsx:26-36
  • src/pages/TasksPage.tsx:62-79
  • src/pages/AnalyticsPage.tsx:128-138
  • src/components/companion/AetherCompanion.tsx:26-30

Section sources

  • src/components/companion/AetherCompanion.tsx:11-189
  • src/pages/DashboardPage.tsx:26-36
  • src/pages/TasksPage.tsx:62-79
  • src/pages/AnalyticsPage.tsx:128-138

Onboarding Flow

The onboarding process collects user preferences to personalize the experience, culminating in completion that unlocks the main app.

flowchart TD
Start(["Open App"]) --> Welcome["Welcome step"]
Welcome --> Name["Enter name"]
Name --> Overwhelm["Select primary overwhelm"]
Overwhelm --> Productive["Select peak time"]
Productive --> Priorities["Select life focus"]
Priorities --> Complete["Complete onboarding"]
Complete --> Dashboard["Render Dashboard"]
Loading

Diagram sources

  • src/pages/OnboardingPage.tsx:57-209
  • src/App.tsx:16-18

Section sources

  • src/pages/OnboardingPage.tsx:8-55
  • src/App.tsx:16-18

Navigation and Page Transitions

The bottom navigation controls page switching with animated transitions powered by Framer Motion.

sequenceDiagram
participant User as "User"
participant Nav as "BottomNav"
participant App as "App.tsx"
participant Page as "Current Page"
User->>Nav : Tap tab
Nav->>App : onNavigate(activePage)
App->>App : Set activePage
App->>Page : Unmount with exit animation
App->>Page : Mount new page with enter animation
Loading

Diagram sources

  • src/components/layout/BottomNav.tsx:18-56
  • src/App.tsx:14-45

Section sources

  • src/components/layout/BottomNav.tsx:18-56
  • src/App.tsx:28-45

Dependency Analysis

Technology stack overview:

  • React 18.3.1: Core framework for building user interfaces.
  • TypeScript: Type safety across components, pages, and state.
  • Vite: Build tool and dev server for fast development and builds.
  • Framer Motion: Animation library for micro-interactions and page transitions.
  • Tailwind CSS: Utility-first styling with a custom theme and animation tokens.
  • Recharts: Charting library for analytics visualizations.
graph LR
React["React 18.3.1"] --> App["Application"]
TS["TypeScript"] --> App
Vite["Vite"] --> App
FM["Framer Motion"] --> UI["UI Interactions"]
Tailwind["Tailwind CSS"] --> UI
Recharts["Recharts"] --> Analytics["Analytics Charts"]
App --> Pages["Pages"]
App --> Components["Components"]
App --> State["State Provider"]
Loading

Diagram sources

  • package.json:11-32
  • tailwind.config.ts:1-165

Section sources

  • package.json:11-32
  • tailwind.config.ts:18-161

Performance Considerations

  • Prefer lightweight animations: Use Framer Motion sparingly and leverage hardware-accelerated properties (opacity, transform) for smoother performance.
  • Optimize chart rendering: Defer heavy chart updates until data is ready; consider virtualization for long lists.
  • Minimize re-renders: Keep state granular and avoid unnecessary context subscriptions.
  • Bundle size: Tree-shake unused icons and animations; keep component libraries scoped to usage.

Troubleshooting Guide

Common issues and resolutions:

  • Context not wrapped: Ensure the app is wrapped in the provider so hooks like useApp can access state.
    • Verify provider presence around the root app element.
  • Navigation not updating: Confirm active page state is managed and passed to the bottom navigation component.
  • Animations stuttering: Reduce the number of simultaneous animations; simplify complex SVG paths if needed.
  • Styling inconsistencies: Check Tailwind theme tokens and ensure custom shadows and gradients are defined.

Section sources

  • src/App.tsx:48-54
  • src/lib/store.tsx:150-154

Conclusion

Samsung Aether Companion redefines productivity by merging intelligent task management with holistic wellness. Its AI-powered companion, real-time metrics, social features, and gamified growth system position it uniquely in the market—focusing on sustainable habits, balance, and meaningful progress rather than just output. Built with modern web technologies and a thoughtful UI/UX, it offers a compelling model for digital wellness in the Samsung ecosystem and beyond.

About

AN EMPHATETIC AI PLATFORM DESIGNED FOR EVERYDAY USE

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages