Octafield SA-Hockey
A wearable health monitoring platform for SA-Hockey, delivering real-time insights into player activity, recovery, and sleep metrics to optimize team performance and wellness.
System Architecture
Built with a modern architecture leveraging Firebase services for real-time capabilities and seamless scalability.
flowchart TD
subgraph Frontend
A[React Dashboard] --> B[D3.js Visualizations]
A --> C[Material UI]
end
subgraph Firebase
D[Firebase Auth] --> E[Firebase Firestore]
F[Firebase Storage] --> E
G[Firebase FCM] --> H[Real-time Notifications]
end
subgraph Backend
I[Terra API] --> J[Health Data Processing]
end
A <-->|API Calls| I
A <-->|Auth| D
A <-->|Data| E
A <-->|Storage| F
A <-->|Messaging| G
E <-->|Sync| I
Platform Features
Comprehensive health monitoring and team management capabilities.
Designed a user-friendly web dashboard for coaches and players, featuring key metrics like health percentage, energy intake, and weekly performance summaries for instant fitness tracking.
graph LR
A[Health Percentage] --> F[Dashboard]
B[Energy Intake] --> F
C[Weekly Performance] --> F
D[Activity Metrics] --> F
E[Recovery Data] --> F
F --> G{User Roles}
G --> H[Player View]
G --> I[Coach View]
User Journey
End-to-end experience for players and coaches using the platform.
journey
title Octafield SA-Hockey User Journey
section Dashboard
View Health Metrics: 5: Player, Coach
Check Performance Summary: 5: Player, Coach
section Visualizations
Analyze Activity Data: 4: Player, Coach
Review Recovery Rates: 4: Player, Coach
section Management
Access Player Profiles: 4: Coach
Send Messages: 3: Coach, Player
section Scheduling
View Calendar: 4: Player, Coach
Check Analytics: 4: Coach
section Notifications
Receive Alerts: 5: Player, Coach
Take Actions: 4: Player, Coach
Technical Stack
Powered by modern technologies for a scalable, secure platform.
pie title Tech Stack
"Frontend" : 40
"Firebase Services" : 35
"Backend API" : 15
"Visualizations" : 10
- Firebase Auth & Firestore
- Firebase Storage & FCM
- React.js & Material UI
- D3.js Visualizations
- Terra API Integration