mirror of
https://github.com/DocNR/POWR.git
synced 2025-05-15 18:55:52 +00:00
148 lines
5.2 KiB
Markdown
148 lines
5.2 KiB
Markdown
# Profile Tab Enhancement Design Document
|
|
|
|
## Overview
|
|
|
|
This document outlines the design and implementation of the enhanced Profile tab for the POWR app. The enhancement includes a tabbed interface with separate screens for profile overview, activity feed, progress analytics, and settings.
|
|
|
|
## Motivation
|
|
|
|
The original Profile tab was limited to displaying basic user information. With the growing social and analytics features of the app, we need a more comprehensive profile experience that:
|
|
|
|
1. Showcases the user's identity and achievements
|
|
2. Displays workout activity in a social feed format
|
|
3. Provides analytics and progress tracking
|
|
4. Offers easy access to settings and preferences
|
|
|
|
By moving analytics and progress tracking to the Profile tab, we create a more cohesive user experience that focuses on personal growth and achievement.
|
|
|
|
## Design
|
|
|
|
### Tab Structure
|
|
|
|
The enhanced Profile tab is organized into four sub-tabs:
|
|
|
|
1. **Overview**: Displays user profile information, stats summary, and quick access to recent records and activity
|
|
2. **Activity**: Shows a chronological feed of the user's workout posts
|
|
3. **Progress**: Provides analytics and progress tracking with charts and personal records
|
|
4. **Settings**: Contains profile editing, privacy controls, and app preferences
|
|
|
|
### Navigation
|
|
|
|
The tabs are implemented using Expo Router's `Tabs` component, with appropriate icons for each tab:
|
|
|
|
- Overview: User icon
|
|
- Activity: Activity icon
|
|
- Progress: BarChart2 icon
|
|
- Settings: Settings icon
|
|
|
|
### Data Flow
|
|
|
|
The Profile tab components interact with several services:
|
|
|
|
1. **NDK Services**: For user profile data and authentication
|
|
2. **WorkoutService**: For accessing workout history
|
|
3. **AnalyticsService**: For calculating statistics and progress metrics
|
|
|
|
## Implementation Details
|
|
|
|
### New Components and Files
|
|
|
|
1. **Tab Layout**:
|
|
- `app/(tabs)/profile/_layout.tsx`: Defines the tab structure and navigation
|
|
|
|
2. **Tab Screens**:
|
|
- `app/(tabs)/profile/overview.tsx`: Profile information and summary
|
|
- `app/(tabs)/profile/activity.tsx`: Workout activity feed
|
|
- `app/(tabs)/profile/progress.tsx`: Analytics and progress tracking
|
|
- `app/(tabs)/profile/settings.tsx`: User settings and preferences
|
|
|
|
3. **Services**:
|
|
- `lib/services/AnalyticsService.ts`: Service for calculating workout statistics and progress data
|
|
- `lib/hooks/useAnalytics.ts`: React hook for accessing the analytics service
|
|
|
|
### Analytics Service
|
|
|
|
The AnalyticsService provides methods for:
|
|
|
|
1. **Workout Statistics**: Calculate aggregate statistics like total workouts, duration, volume, etc.
|
|
2. **Exercise Progress**: Track progress for specific exercises over time
|
|
3. **Personal Records**: Identify and track personal records for exercises
|
|
|
|
The service is designed to work with both local and Nostr-based workout data, providing a unified view of the user's progress.
|
|
|
|
### Authentication Integration
|
|
|
|
The Profile tab is integrated with the Nostr authentication system:
|
|
|
|
- Unauthenticated users see a login prompt in the Overview tab
|
|
- All tabs show appropriate UI for unauthenticated users
|
|
- The NostrLoginSheet is accessible from the Overview tab
|
|
|
|
## User Experience
|
|
|
|
### Overview Tab
|
|
|
|
The Overview tab provides a comprehensive view of the user's profile:
|
|
|
|
- Profile picture and banner image
|
|
- Display name and username
|
|
- About/bio text
|
|
- Summary statistics (workouts, templates, programs)
|
|
- Recent personal records
|
|
- Recent activity
|
|
- Quick actions for profile management
|
|
|
|
### Activity Tab
|
|
|
|
The Activity tab displays the user's workout posts in a chronological feed:
|
|
|
|
- Each post shows the workout details
|
|
- Posts are formatted similar to the social feed
|
|
- Empty state for users with no activity
|
|
|
|
### Progress Tab
|
|
|
|
The Progress tab visualizes the user's fitness journey:
|
|
|
|
- Period selector (week, month, year, all-time)
|
|
- Workout summary statistics
|
|
- Workout frequency chart
|
|
- Exercise distribution chart
|
|
- Personal records list
|
|
- Empty states for users with no data
|
|
|
|
### Settings Tab
|
|
|
|
The Settings tab provides access to user preferences:
|
|
|
|
- Profile information editing
|
|
- Privacy settings
|
|
- Notification preferences
|
|
- Account management
|
|
|
|
## Future Enhancements
|
|
|
|
1. **Workout Streaks**: Track and display workout consistency
|
|
2. **Goal Setting**: Allow users to set and track fitness goals
|
|
3. **Comparison Analytics**: Compare current performance with past periods
|
|
4. **Social Integration**: Show followers/following counts and management
|
|
5. **Achievement Badges**: Gamification elements for workout milestones
|
|
|
|
## Technical Considerations
|
|
|
|
### Performance
|
|
|
|
- The AnalyticsService uses caching to minimize recalculations
|
|
- Data is loaded asynchronously to keep the UI responsive
|
|
- Charts and visualizations use efficient rendering techniques
|
|
|
|
### Data Privacy
|
|
|
|
- Analytics are calculated locally on the device
|
|
- Sharing controls allow users to decide what data is public
|
|
- Personal records can be selectively shared
|
|
|
|
## Conclusion
|
|
|
|
The enhanced Profile tab transforms the user experience by providing a comprehensive view of the user's identity, activity, and progress. By centralizing these features in the Profile tab, we create a more intuitive and engaging experience that encourages users to track their fitness journey and celebrate their achievements.
|