+
-
-
+
+
YOUR FITNESS JOURNEY, REIMAGINED
-
+
Level Up
Your Fitness
-
Your Fitness
- Gamify your workouts, earn XP, complete daily quests, and unlock epic achievements. Your fitness journey is now an RPG. +
+ Gamify your workouts. Earn XP. Complete daily quests.
+
Your fitness journey is now an RPG.
+
-
-
-
-
-
+
+
-
+
- Build Streaks
-Stay consistent and watch your streak multiplier grow effortlessly.
+Build Streaks
+Stay consistent and watch your streak multiplier grow effortlessly.
-
-
{children}
diff --git a/src/components/profile/AchievementGrid.tsx b/src/components/profile/AchievementGrid.tsx
index 6947bf3..11f7eb4 100644
--- a/src/components/profile/AchievementGrid.tsx
+++ b/src/components/profile/AchievementGrid.tsx
@@ -18,26 +18,34 @@ export function AchievementGrid({ achievements, className = "" }: AchievementGri
const totalCount = achievements.length;
return (
-
-
+
-
+
- Unlock Badges
-Earn rare achievements for pushing your limits and reaching milestones.
+Unlock Badges
+Earn rare achievements for pushing your limits and reaching milestones.
-
diff --git a/src/app/api/health/route.ts b/src/app/api/health/route.ts
new file mode 100644
index 0000000..69f4f02
--- /dev/null
+++ b/src/app/api/health/route.ts
@@ -0,0 +1 @@
+// implement api calls for health checks
diff --git a/src/app/api/runs/route.ts b/src/app/api/runs/route.ts
index 7b28a74..3c45c37 100644
--- a/src/app/api/runs/route.ts
+++ b/src/app/api/runs/route.ts
@@ -8,43 +8,52 @@ import { RateLimit } from "@/lib/auth/rate-limit";
import { handleApiError } from "@/lib/api/handle-api-error";
export async function GET(request: Request) {
- try {
- const userId = await getAuthUserId();
- const { searchParams } = new URL(request.url);
- let limit = searchParams.has("limit") ? parseInt(searchParams.get("limit")!) : 5;
- if (isNaN(limit) || limit < 1) limit = 5;
- if (limit > 50) limit = 50;
- const page = searchParams.has("page") ? parseInt(searchParams.get("page")!) : 1;
- const skip = (page - 1) * limit;
+ try {
+ const userId = await getAuthUserId();
+ const { searchParams } = new URL(request.url);
+ let limit = searchParams.has("limit")
+ ? parseInt(searchParams.get("limit")!)
+ : 5;
+ if (isNaN(limit) || limit < 1) limit = 5;
+ //TODO: turn into constant . avoid magic numbers
+ if (limit > 50) limit = 50;
+ const page = searchParams.has("page")
+ ? parseInt(searchParams.get("page")!)
+ : 1;
+ const skip = (page - 1) * limit;
- const { data, totalCount } = await getPaginatedRunsFromDb(userId, limit, skip);
- const totalPages = Math.ceil(totalCount / limit);
-
- return NextResponse.json({
- data,
- totalCount,
- totalPages,
- currentPage: page
- });
- } catch (err) {
- return handleApiError(err);
- }
+ const { data, totalCount } = await getPaginatedRunsFromDb(
+ userId,
+ limit,
+ skip,
+ );
+ const totalPages = Math.ceil(totalCount / limit);
+
+ return NextResponse.json({
+ data,
+ totalCount,
+ totalPages,
+ currentPage: page,
+ });
+ } catch (err) {
+ return handleApiError(err);
+ }
}
export async function POST(request: Request) {
- try {
- const userId = await getAuthUserId();
+ try {
+ const userId = await getAuthUserId();
- const { success } = await RateLimit.limit(userId);
- if (!success) {
- return NextResponse.json({ error: "Too many requests" }, { status: 429 });
- }
-
- const body = await request.json();
- const parsed = CreateRunSchema.parse(body);
- const run = await logRun(parsed, userId);
- return NextResponse.json(run, { status: 201 });
- } catch (err) {
- return handleApiError(err);
+ const { success } = await RateLimit.limit(userId);
+ if (!success) {
+ return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
+
+ const body = await request.json();
+ const parsed = CreateRunSchema.parse(body);
+ const run = await logRun(parsed, userId);
+ return NextResponse.json(run, { status: 201 });
+ } catch (err) {
+ return handleApiError(err);
+ }
}
diff --git a/src/app/globals.css b/src/app/globals.css
index 97838f7..53c22ca 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,25 +1,20 @@
@import "tailwindcss";
-/* These CSS variables define our entire color system.
- Updated to OLED-friendly Apple-vibe. */
:root {
--background: #000000;
--foreground: #fcfcfc;
- /* Slightly lighter, elevated slate/zinc for cards to contrast against black */
- --card: #18181b;
- --card-hover: #27272a;
- --border: #3f3f46;
+ --card: #111111;
+ --card-hover: #18181b;
+ --border: #27272a;
--muted: #a1a1aa;
- /* Retaining app accent colors but tweaking to Apple-like vibrance */
- --accent-green: #d1ff1a; /* Bright Lime Green */
- --accent-orange: #ff9500; /* iOS Orange */
- --accent-purple: #af52de; /* iOS Purple */
- --accent-blue: #007aff; /* iOS Blue */
- --accent-red: #ff3b30; /* iOS Red */
+ --accent-green: #d1ff1a;
+ --accent-orange: #ff9500;
+ --accent-purple: #af52de;
+ --accent-blue: #007aff;
+ --accent-red: #ff3b30;
}
-/* @theme inline tells Tailwind to generate utility classes */
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
@@ -32,9 +27,10 @@
--color-accent-purple: var(--accent-purple);
--color-accent-blue: var(--accent-blue);
--color-accent-red: var(--accent-red);
- --font-sans: var(--font-inter);
- /* Systematically scale up typography for better readability globally */
+ --font-sans: var(--font-barlow), system-ui, sans-serif;
+ --font-display: var(--font-barlow-condensed), system-ui, sans-serif;
+
--text-xs: 0.875rem;
--text-xs--line-height: 1.25rem;
--text-sm: 1rem;
@@ -50,46 +46,37 @@
body {
background: var(--background);
color: var(--foreground);
- font-family: var(--font-sans), system-ui, sans-serif;
+ font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@utility glass-panel {
- background: linear-gradient(145deg, rgba(39, 39, 42, 0.7), rgba(24, 24, 27, 0.8));
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
- border: 1px solid rgba(255, 255, 255, 0.08);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+ background: var(--card);
+ border: 1px solid rgba(255, 255, 255, 0.05);
}
-@utility hover-lift {
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- &:hover {
- transform: translateY(-4px) scale(1.02);
- box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
+@utility active-press {
+ transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease-out;
+ &:active {
+ transform: scale(0.96);
}
}
-/* Smooth transitions for interactive elements */
.transition-default {
transition: all 0.2s ease-in-out;
}
-/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
width: 6px;
}
-
::-webkit-scrollbar-track {
background: var(--background);
}
-
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
-
::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c9f9844..a24ec2d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,11 +1,18 @@
import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Barlow, Barlow_Condensed } from "next/font/google";
import "./globals.css";
import { QueryProvider } from "@/components/providers/QueryProvider";
-const inter = Inter({
- variable: "--font-inter",
+const barlow = Barlow({
+ weight: ["300", "400", "500", "600", "700"],
subsets: ["latin"],
+ variable: "--font-barlow",
+});
+
+const barlowCondensed = Barlow_Condensed({
+ weight: ["400", "500", "600", "700"],
+ subsets: ["latin"],
+ variable: "--font-barlow-condensed",
});
export const metadata: Metadata = {
@@ -20,8 +27,8 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
+
+
-
+
+
- Track Progress
-Watch your stats improve over time with highly detailed analytics.
+Track Progress
+Watch your stats improve over time with highly detailed analytics.
-
Achievements
-
- {unlockedCount} / {totalCount} Unlocked
+
+
+
+
+
{achievements.length > 0 ? (
-
+
+
+
+ {unlockedCount} / {totalCount}
+
+ Unlocked
+
-
{achievements.map((achievement) => (
) : (
-
+
)}
);
diff --git a/src/components/profile/PersonalRecords.tsx b/src/components/profile/PersonalRecords.tsx
index 34a33c3..755a1dc 100644
--- a/src/components/profile/PersonalRecords.tsx
+++ b/src/components/profile/PersonalRecords.tsx
@@ -19,30 +19,32 @@ export function PersonalRecords({ className = "" }: PersonalRecordsProps) {
});
return (
-
-
+
Personal Records
+
+
+
- {isLoading &&
+
Loading records...
} - {isError &&Could not load records.
} + {isLoading &&Loading records...
} + {isError &&Could not load records.
} {!isLoading && !isError && records.length === 0 && ( -Log your first workout or run to set your records!
+Log your first workout or run to set your records!
)} {!isLoading && !isError && records.length > 0 && ( -
+
{records.map((record, idx) => (
-
-
+
{record.label}
-
+
{record.value}
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index b52ac7b..5cac13c 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -3,7 +3,7 @@ import { Card } from "@/components/ui/Card";
import { ProgressBar } from "@/components/ui/ProgressBar";
import { calcXPPercent, formatDate } from "@/lib/utils";
import type { User, DashboardStats } from "@/lib/types";
-import { Dumbbell, MapPin, Zap, Flame } from "lucide-react";
+import { Dumbbell, MapPin, Zap, Flame, Trophy } from "lucide-react";
import { UserAvatar } from "@/components/ui/UserAvatar";
export interface ProfileHeaderProps {
@@ -19,62 +19,66 @@ export function ProfileHeader({ user, stats, className = "" }: ProfileHeaderProp
const xpPercent = calcXPPercent(user.xp, user.xpToNextLevel);
return (
-
- {/* Avatar */}
-
-
-
+ {/* Top section: Centered stack to fit perfectly in 1/3 col layouts */}
+
-
- - {user.name} -
-- Member since {formatDate(user.joinDate)} -
-
- 👑
- Level {user.level}
-
+
+ {/* Avatar with athletic styling */}
+
+
+
+
+ {/* Identity & Level */}
+
+
+ + {user.name} +
+ +
+
+
+ + Member since {formatDate(user.joinDate)} +
- {/* XP Bar */} -
-
- {/* Lifetime Stats Grid */}
-
- XP Progress
-
- {user.xp.toLocaleString()} / {user.xpToNextLevel.toLocaleString()} XP
-
-
-
+
+ XP Progress
+
+ {user.xp.toLocaleString()} / {user.xpToNextLevel.toLocaleString()}
+
+
-
-
+
+
-
-
+
-
- (null);
- const isCompleted = quest.completed;
+ const [isClaiming, setIsClaiming] = useState(false);
+ const [error, setError] = useState(null);
+ const isCompleted = quest.completed;
+ const isClaimed = quest.claimed;
- return (
-
-
+
-
-
diff --git a/src/components/quests/QuestCard.tsx b/src/components/quests/QuestCard.tsx
index dc4a045..5fcf8dc 100644
--- a/src/components/quests/QuestCard.tsx
+++ b/src/components/quests/QuestCard.tsx
@@ -1,98 +1,138 @@
import { Card } from "@/components/ui/Card";
import { ProgressBar } from "@/components/ui/ProgressBar";
import type { Quest } from "@/lib/types";
-import { CheckCircle, Target } from "lucide-react";
+import { CheckCircle, Target, Zap } from "lucide-react";
import { QuestIconMap } from "@/lib/constants/quest-icons";
-import { useState, } from "react";
+import { useState } from "react";
export interface QuestCardProps {
- quest: Quest;
- className?: string;
- onClaim?: (id: string) => void;
+ quest: Quest;
+ className?: string;
+ onClaim?: (id: string) => void;
}
/**
* Displays a single quest with progress/completion state.
+ * Styled with Modern Athletic HUD aesthetic.
*/
export function QuestCard({ quest, className = "", onClaim }: QuestCardProps) {
- const Icon = QuestIconMap[quest.icon] || Target;
+ const Icon = QuestIconMap[quest.icon] || Target;
- const [isClaiming, setIsClaiming] = useState(false);
- const [error, setError] = useState
+
-
+ {/* Status bar at top */}
+
-
-
+ return (
+
-
-
-
- - {quest.title} -
-- {quest.description} -
-
- +{quest.xpReward} XP
-
+
+ {/* Header row: icon + title + XP badge */}
+
-
- );
+export function QuestSection({
+ title,
+ quests,
+ icon,
+ className = "",
+ onClaim,
+}: QuestSectionProps) {
+ return (
+
+
+ );
}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 6804a9e..aeedf60 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -6,11 +6,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes = {
- primary: "bg-accent-green text-background hover:opacity-90",
- secondary: "bg-card-hover text-foreground hover:bg-border",
- outline: "border border-border text-foreground hover:bg-card-hover",
+ primary: "bg-accent-green text-black hover:bg-accent-green/90",
+ secondary: "bg-card text-foreground border border-white/5 hover:border-white/20",
+ outline: "border border-border text-foreground hover:bg-card hover:border-accent-green/50",
};
export function Button({
@@ -19,8 +18,7 @@ export function Button({
className = "",
...props
}: ButtonProps) {
- // Base styles all buttons share, plus focus/disabled states
- const baseStyles = "px-6 py-3 font-medium rounded-xl transition-default text-base inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-accent-green/50 disabled:opacity-50 disabled:cursor-not-allowed hover-lift";
+ const baseStyles = "px-6 py-3 font-bold rounded-xl transition-default text-base inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-accent-green/50 disabled:opacity-50 disabled:cursor-not-allowed active-press uppercase tracking-wide";
return (
+
+
+ );
}
diff --git a/src/components/quests/QuestSection.tsx b/src/components/quests/QuestSection.tsx
index ae4d204..a7869f3 100644
--- a/src/components/quests/QuestSection.tsx
+++ b/src/components/quests/QuestSection.tsx
@@ -1,41 +1,55 @@
import React from "react";
+import { Card } from "@/components/ui/Card";
import { QuestCard } from "./QuestCard";
import { EmptyState } from "@/components/ui/EmptyState";
import type { Quest } from "@/lib/types";
import { Target } from "lucide-react";
export interface QuestSectionProps {
- title: string;
- quests: readonly Quest[];
- icon?: React.ReactNode;
- className?: string;
- onClaim?: (id: string) => void;
+ title: string;
+ quests: readonly Quest[];
+ icon?: React.ReactNode;
+ className?: string;
+ onClaim?: (id: string) => void;
}
/**
* Groups quests by category and renders a grid of QuestCards.
*/
-export function QuestSection({ title, quests, icon, className = "", onClaim }: QuestSectionProps) {
- return (
-
+
-
+
+
+
+ + {quest.title} +
++ {quest.description} +
+
- {isCompleted ? (
- quest.claimed ? (
-
+ {/* Footer: progress or claim CTA */}
+
-
- ) : (
-
-
- {error && {error}}
-
- )
- ) : (
-
-
-
- Progress
- {quest.progress} / {quest.target}
-
+
+
+
+ {isCompleted ? (
+ isClaimed ? (
+
+
+
+ ) : (
+
+
+ {error && (
+
+ {error}
+
)}
+
+ )
+ ) : (
+
+
-
- );
+ )}
+
+
+ Progress
+
+
+ {quest.progress}{" "}
+ / {quest.target}
+
+
+
- {icon && {icon}}
-
-
- {quests.length > 0 ? (
- {title}
-
- {quests.map((quest) => (
-
- ) : (
-
+
+
+ {quests.length > 0 ? (
+ + {icon && {icon}} + {title} +
+ + {quests.length} {quests.length === 1 ? "Quest" : "Quests"} + +
+ {quests.map((quest) => (
+
+ ) : (
+
+
+ )}
+