537 lines
16 KiB
Markdown
537 lines
16 KiB
Markdown
# Hydro Flux Dashboard - Complete Replication Guide
|
|
|
|
## Overview
|
|
A mobile-first health tracking dashboard called "Hydro Flux" that tracks water intake, steps, sleep, Strava integration, goals, and notes. Built with React, TypeScript, Tailwind CSS, and Motion (Framer Motion).
|
|
|
|
## Design Specifications
|
|
|
|
### Color Palette
|
|
- Primary Blue: #60A5FA (blue-400)
|
|
- Secondary Blue: #3B82F6 (blue-500)
|
|
- Light Blue: #DBEAFE (blue-50)
|
|
- Orange (Strava): #EA580C (orange-600)
|
|
- Gray Background: Linear gradient from gray-100 to gray-200
|
|
- White: #FFFFFF
|
|
- Text Primary: #1F2937 (gray-800)
|
|
- Text Secondary: #6B7280 (gray-500)
|
|
|
|
### Layout
|
|
- Mobile-first design (max-width: 28rem / 448px)
|
|
- Rounded container with 3rem border radius
|
|
- White background with shadow-2xl
|
|
- Padding: 1.5rem (6 units)
|
|
- Component spacing: 1rem gap (4 units)
|
|
|
|
### Typography
|
|
- Headers: font-bold
|
|
- Body: font-medium
|
|
- Small text: text-sm, text-xs
|
|
|
|
## Dependencies Required
|
|
|
|
```json
|
|
{
|
|
"recharts": "2.15.2",
|
|
"motion": "12.23.24",
|
|
"lucide-react": "0.487.0"
|
|
}
|
|
```
|
|
|
|
Import Motion using: `import { motion } from 'motion/react'`
|
|
|
|
## File Structure
|
|
|
|
```
|
|
/src/app/
|
|
├── App.tsx
|
|
└── components/
|
|
├── Header.tsx
|
|
├── WaterTracker.tsx
|
|
├── StepsTracker.tsx
|
|
├── StravaIntegration.tsx
|
|
├── SleepTracker.tsx
|
|
├── Goals.tsx
|
|
└── Notes.tsx
|
|
```
|
|
|
|
## Complete Component Code
|
|
|
|
### 1. /src/app/App.tsx
|
|
|
|
```tsx
|
|
import { useState, useEffect } from 'react';
|
|
import { Header } from './components/Header';
|
|
import { WaterTracker } from './components/WaterTracker';
|
|
import { StepsTracker } from './components/StepsTracker';
|
|
import { StravaIntegration } from './components/StravaIntegration';
|
|
import { SleepTracker } from './components/SleepTracker';
|
|
import { Goals } from './components/Goals';
|
|
import { Notes } from './components/Notes';
|
|
|
|
function App() {
|
|
const [waterAmount, setWaterAmount] = useState(1.2);
|
|
const [currentDate, setCurrentDate] = useState('');
|
|
const [currentTime, setCurrentTime] = useState('');
|
|
const [note, setNote] = useState('Feeling hydrated today. Remember to add those gym sessions!');
|
|
const [goals, setGoals] = useState([
|
|
{ id: '1', text: 'Drink 3L of water', completed: true },
|
|
{ id: '2', text: 'Walk 10K steps', completed: false },
|
|
{ id: '3', text: 'Sleep 8 hours', completed: false },
|
|
]);
|
|
|
|
// Sleep data for the chart
|
|
const sleepData = [
|
|
{ value: 30 }, { value: 35 }, { value: 25 }, { value: 40 },
|
|
{ value: 55 }, { value: 45 }, { value: 60 }, { value: 75 },
|
|
{ value: 70 }, { value: 80 }, { value: 65 }, { value: 55 },
|
|
{ value: 50 }, { value: 45 }, { value: 40 },
|
|
];
|
|
|
|
useEffect(() => {
|
|
const updateDateTime = () => {
|
|
const now = new Date();
|
|
const dateStr = now.toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
const timeStr = now.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true
|
|
}) + ' AEDT';
|
|
setCurrentDate(dateStr);
|
|
setCurrentTime(timeStr);
|
|
};
|
|
|
|
updateDateTime();
|
|
const interval = setInterval(updateDateTime, 1000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const handleAddWater = () => {
|
|
setWaterAmount((prev) => Math.min(prev + 0.25, 3.0));
|
|
};
|
|
|
|
const handleToggleGoal = (id: string) => {
|
|
setGoals((prev) =>
|
|
prev.map((goal) =>
|
|
goal.id === id ? { ...goal, completed: !goal.completed } : goal
|
|
)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center p-4">
|
|
<div className="w-full max-w-md bg-white rounded-[3rem] shadow-2xl p-6 relative overflow-hidden">
|
|
{/* Subtle background decoration */}
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-200/20 rounded-full blur-3xl -z-10" />
|
|
<div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-200/20 rounded-full blur-3xl -z-10" />
|
|
|
|
<Header
|
|
level={14}
|
|
streakDays={14}
|
|
currentDate={currentDate}
|
|
currentTime={currentTime}
|
|
/>
|
|
|
|
<WaterTracker
|
|
currentAmount={waterAmount}
|
|
targetAmount={3.0}
|
|
onAddWater={handleAddWater}
|
|
/>
|
|
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<StepsTracker steps={8432} goal={10000} />
|
|
<StravaIntegration distance={5.2} lastSync="2h ago" />
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<SleepTracker
|
|
hours={7}
|
|
minutes={20}
|
|
sleepType="Light Sleep"
|
|
data={sleepData}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Goals goals={goals} onToggleGoal={handleToggleGoal} />
|
|
<Notes note={note} onNoteChange={setNote} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
### 2. /src/app/components/Header.tsx
|
|
|
|
```tsx
|
|
import { Droplet } from 'lucide-react';
|
|
|
|
interface HeaderProps {
|
|
level: number;
|
|
streakDays: number;
|
|
currentDate: string;
|
|
currentTime: string;
|
|
}
|
|
|
|
export function Header({ level, streakDays, currentDate, currentTime }: HeaderProps) {
|
|
return (
|
|
<div className="flex flex-col items-center gap-2 mb-6">
|
|
<div className="flex items-center justify-between w-full px-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center mb-1 shadow-lg">
|
|
<div className="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center text-sm font-semibold text-gray-700">
|
|
JD
|
|
</div>
|
|
</div>
|
|
<span className="text-xs text-blue-600 font-medium">Level {level}</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center flex-1">
|
|
<h1 className="text-2xl font-bold text-gray-800 mb-1">Hydro Flux</h1>
|
|
<div className="text-sm text-gray-600">{currentDate}</div>
|
|
<div className="text-sm text-gray-500">{currentTime}</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Droplet className="w-5 h-5 fill-blue-500 text-blue-500" />
|
|
<Droplet className="w-5 h-5 fill-blue-400 text-blue-400" />
|
|
<span className="text-sm font-semibold text-gray-700 ml-1">{streakDays} Days</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 3. /src/app/components/WaterTracker.tsx
|
|
|
|
```tsx
|
|
import { Plus } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
|
|
interface WaterTrackerProps {
|
|
currentAmount: number;
|
|
targetAmount: number;
|
|
onAddWater: () => void;
|
|
}
|
|
|
|
export function WaterTracker({ currentAmount, targetAmount, onAddWater }: WaterTrackerProps) {
|
|
const percentage = (currentAmount / targetAmount) * 100;
|
|
|
|
return (
|
|
<div className="relative h-64 bg-gradient-to-b from-blue-50 to-blue-100 rounded-3xl overflow-hidden shadow-lg mb-6">
|
|
{/* Water wave */}
|
|
<motion.div
|
|
className="absolute bottom-0 left-0 right-0"
|
|
style={{
|
|
height: `${percentage}%`,
|
|
background: 'linear-gradient(180deg, rgba(96, 165, 250, 0.8) 0%, rgba(59, 130, 246, 0.9) 100%)',
|
|
}}
|
|
animate={{
|
|
y: [0, -10, 0],
|
|
}}
|
|
transition={{
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
>
|
|
{/* Wave effect */}
|
|
<svg
|
|
className="absolute top-0 left-0 w-full"
|
|
viewBox="0 0 1200 120"
|
|
preserveAspectRatio="none"
|
|
style={{ height: '60px', transform: 'translateY(-50%)' }}
|
|
>
|
|
<motion.path
|
|
d="M0,50 Q300,10 600,50 T1200,50 L1200,120 L0,120 Z"
|
|
fill="rgba(96, 165, 250, 0.5)"
|
|
animate={{
|
|
d: [
|
|
"M0,50 Q300,10 600,50 T1200,50 L1200,120 L0,120 Z",
|
|
"M0,50 Q300,90 600,50 T1200,50 L1200,120 L0,120 Z",
|
|
"M0,50 Q300,10 600,50 T1200,50 L1200,120 L0,120 Z",
|
|
],
|
|
}}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
</svg>
|
|
</motion.div>
|
|
|
|
{/* Add button */}
|
|
<button
|
|
onClick={onAddWater}
|
|
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-blue-400/50 hover:bg-blue-400/70 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl transition-all hover:scale-110 z-10"
|
|
>
|
|
<Plus className="w-8 h-8 text-white" />
|
|
</button>
|
|
|
|
{/* Amount display */}
|
|
<div className="absolute bottom-6 left-0 right-0 text-center z-10">
|
|
<span className="text-2xl font-bold text-gray-700">
|
|
{currentAmount.toFixed(1)}L / {targetAmount.toFixed(1)}L
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 4. /src/app/components/StepsTracker.tsx
|
|
|
|
```tsx
|
|
interface StepsTrackerProps {
|
|
steps: number;
|
|
goal: number;
|
|
}
|
|
|
|
export function StepsTracker({ steps, goal }: StepsTrackerProps) {
|
|
const percentage = Math.min((steps / goal) * 100, 100);
|
|
const circumference = 2 * Math.PI * 45;
|
|
const strokeDashoffset = circumference - (percentage / 100) * circumference;
|
|
|
|
return (
|
|
<div className="bg-gradient-to-br from-blue-50 to-white rounded-2xl p-6 shadow-md">
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-4">Steps Tracker</h3>
|
|
<div className="flex items-center justify-center">
|
|
<div className="relative w-32 h-32">
|
|
<svg className="transform -rotate-90 w-32 h-32">
|
|
<circle
|
|
cx="64"
|
|
cy="64"
|
|
r="45"
|
|
stroke="#E5E7EB"
|
|
strokeWidth="8"
|
|
fill="none"
|
|
/>
|
|
<circle
|
|
cx="64"
|
|
cy="64"
|
|
r="45"
|
|
stroke="#60A5FA"
|
|
strokeWidth="8"
|
|
fill="none"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={strokeDashoffset}
|
|
strokeLinecap="round"
|
|
className="transition-all duration-500"
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span className="text-2xl font-bold text-gray-800">{steps.toLocaleString()}</span>
|
|
<span className="text-xs text-gray-500">steps</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 5. /src/app/components/StravaIntegration.tsx
|
|
|
|
```tsx
|
|
interface StravaIntegrationProps {
|
|
distance: number;
|
|
lastSync: string;
|
|
}
|
|
|
|
export function StravaIntegration({ distance, lastSync }: StravaIntegrationProps) {
|
|
return (
|
|
<div className="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-6 shadow-md">
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-4">Strava Integration</h3>
|
|
<div className="flex flex-col items-center justify-center py-4">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mb-3 shadow-lg transform rotate-12">
|
|
<span className="text-3xl font-bold text-white transform -rotate-12">S</span>
|
|
</div>
|
|
<span className="text-lg font-bold text-gray-800">{distance}km Run</span>
|
|
<span className="text-xs text-gray-500 mt-1">Last Sync: {lastSync}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 6. /src/app/components/SleepTracker.tsx
|
|
|
|
```tsx
|
|
import { LineChart, Line, ResponsiveContainer, YAxis } from 'recharts';
|
|
|
|
interface SleepTrackerProps {
|
|
hours: number;
|
|
minutes: number;
|
|
sleepType: string;
|
|
data: { value: number }[];
|
|
}
|
|
|
|
export function SleepTracker({ hours, minutes, sleepType, data }: SleepTrackerProps) {
|
|
return (
|
|
<div className="bg-gradient-to-br from-blue-50 to-white rounded-2xl p-6 shadow-md">
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-4">Sleep Tracker</h3>
|
|
<div className="h-24 mb-3">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data}>
|
|
<YAxis hide domain={[0, 100]} />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke="#60A5FA"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xl font-bold text-gray-800">
|
|
{hours}h {minutes}m
|
|
</span>
|
|
<span className="text-sm text-blue-600 font-medium">{sleepType}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 7. /src/app/components/Goals.tsx
|
|
|
|
```tsx
|
|
import { Check } from 'lucide-react';
|
|
|
|
interface Goal {
|
|
id: string;
|
|
text: string;
|
|
completed: boolean;
|
|
}
|
|
|
|
interface GoalsProps {
|
|
goals: Goal[];
|
|
onToggleGoal: (id: string) => void;
|
|
}
|
|
|
|
export function Goals({ goals, onToggleGoal }: GoalsProps) {
|
|
return (
|
|
<div className="bg-gradient-to-br from-blue-50 to-white rounded-2xl p-6 shadow-md">
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-4">Goals</h3>
|
|
<div className="space-y-3">
|
|
{goals.map((goal) => (
|
|
<button
|
|
key={goal.id}
|
|
onClick={() => onToggleGoal(goal.id)}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all ${
|
|
goal.completed
|
|
? 'bg-blue-500 text-white shadow-lg'
|
|
: 'bg-blue-100 text-gray-700 hover:bg-blue-200'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`w-5 h-5 rounded-full flex items-center justify-center ${
|
|
goal.completed ? 'bg-white/30' : 'bg-white'
|
|
}`}
|
|
>
|
|
{goal.completed && <Check className="w-4 h-4 text-blue-500" />}
|
|
</div>
|
|
<span className="text-sm font-medium">{goal.text}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 8. /src/app/components/Notes.tsx
|
|
|
|
```tsx
|
|
interface NotesProps {
|
|
note: string;
|
|
onNoteChange: (note: string) => void;
|
|
}
|
|
|
|
export function Notes({ note, onNoteChange }: NotesProps) {
|
|
return (
|
|
<div className="bg-gradient-to-br from-blue-50 to-white rounded-2xl p-6 shadow-md">
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-4">Notes</h3>
|
|
<textarea
|
|
value={note}
|
|
onChange={(e) => onNoteChange(e.target.value)}
|
|
placeholder="Add your notes here..."
|
|
className="w-full h-24 bg-white/50 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-400 border-none outline-none resize-none"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Key Features & Interactions
|
|
|
|
1. **Water Tracker**
|
|
- Animated wave visualization using SVG and Motion
|
|
- Click + button to add 0.25L (max 3.0L)
|
|
- Displays current/target amount
|
|
|
|
2. **Steps Tracker**
|
|
- Circular progress indicator using SVG circles
|
|
- Shows 8,432 / 10,000 steps
|
|
- Animated stroke-dashoffset for progress
|
|
|
|
3. **Strava Integration**
|
|
- Orange gradient background
|
|
- Rotated "S" logo
|
|
- Displays distance and last sync time
|
|
|
|
4. **Sleep Tracker**
|
|
- Recharts line chart visualization
|
|
- Shows hours and minutes
|
|
- Sleep type label (Light Sleep)
|
|
|
|
5. **Goals**
|
|
- Three clickable goal items
|
|
- Toggle completed state
|
|
- Visual feedback with color change
|
|
|
|
6. **Notes**
|
|
- Textarea for user input
|
|
- Placeholder text
|
|
- Auto-updating state
|
|
|
|
7. **Header**
|
|
- User avatar with initials "JD"
|
|
- Level indicator
|
|
- Streak counter with droplet icons
|
|
- Live date/time that updates every second
|
|
|
|
## Important Implementation Notes
|
|
|
|
- Use Tailwind CSS v4 (no config file needed)
|
|
- Motion package is imported as `import { motion } from 'motion/react'`
|
|
- All components are TypeScript with proper interfaces
|
|
- State management uses React useState hooks
|
|
- DateTime updates every 1000ms using setInterval
|
|
- Responsive design with max-width container
|
|
- All interactive elements have hover states
|
|
- Glassmorphism effects using backdrop-blur and opacity
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Water tracker + button increases amount
|
|
- [ ] Water amount doesn't exceed 3.0L
|
|
- [ ] Goals toggle between completed/incomplete
|
|
- [ ] Notes textarea updates on input
|
|
- [ ] Date and time update in real-time
|
|
- [ ] All animations are smooth
|
|
- [ ] Mobile responsive (320px - 448px width)
|
|
- [ ] All icons from lucide-react render correctly
|
|
- [ ] Sleep chart displays properly with recharts
|