Frontend 0.1

2026-03-23 10:20:52 +02:00
parent 38eaa49986
commit e9090d7fc8
26 changed files with 5105 additions and 0 deletions
--- a/peakup-frontend/.gitignore
+++ b/peakup-frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/peakup-frontend/README.md
+++ b/peakup-frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/peakup-frontend/eslint.config.js
+++ b/peakup-frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/peakup-frontend/index.html
+++ b/peakup-frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PeakUp</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/peakup-frontend/package-lock.json
+++ b/peakup-frontend/package-lock.json
--- a/peakup-frontend/package.json
+++ b/peakup-frontend/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "peakup-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-query": "^5.94.5",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.8.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/recharts": "^1.8.29",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}
--- a/peakup-frontend/public/favicon.svg
+++ b/peakup-frontend/public/favicon.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#ff3b30"/>
+            <stop offset="100%" stop-color="#ff9500"/>
+        </linearGradient>
+    </defs>
+    <path
+            d="M 8 44 L 24 16 L 32 28 L 48 6"
+            stroke="url(#g)"
+            stroke-width="7"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            fill="none"
+    />
+</svg>
--- a/peakup-frontend/public/logo.png
+++ b/peakup-frontend/public/logo.png
--- a/peakup-frontend/src/App.css
+++ b/peakup-frontend/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
--- a/peakup-frontend/src/App.tsx
+++ b/peakup-frontend/src/App.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Sidebar } from '@/components/Sidebar'
+import { Dashboard } from '@/pages/Dashboard'
+import { Activities } from '@/pages/Activities'
+import { Placeholder } from '@/pages/Placeholder'
+
+const queryClient = new QueryClient()
+
+function AppContent() {
+  const [page, setPage] = useState('dashboard')
+
+  function renderPage() {
+    switch (page) {
+      case 'dashboard':
+        return <Dashboard />
+      case 'activities':
+        return <Activities />
+      case 'load':
+        return <Placeholder name="Training Load" />
+      case 'analytics':
+        return <Placeholder name="Analytics" />
+      case 'calendar':
+        return <Placeholder name="Calendar" />
+      case 'settings':
+        return <Placeholder name="Settings" />
+      default:
+        return <Dashboard />
+    }
+  }
+
+  return (
+    <div className="flex w-full min-h-screen">
+      <Sidebar currentPage={page} onNavigate={setPage} />
+      <main className="flex-1 flex overflow-hidden">{renderPage()}</main>
+    </div>
+  )
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppContent />
+    </QueryClientProvider>
+  )
+}
--- a/peakup-frontend/src/api/client.ts
+++ b/peakup-frontend/src/api/client.ts
@@ -0,0 +1,15 @@
+import type { Activity, Athlete } from '@/types/api'
+
+const BASE_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:8111'
+
+async function get<T>(path: string): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`)
+  if (!res.ok) throw new Error(`HTTP ${res.status}: ${path}`)
+  return res.json() as Promise<T>
+}
+
+export const api = {
+  activities: (): Promise<Activity[]> => get('/api/activities'),
+  activity: (id: number): Promise<Activity> => get(`/api/activities/${id}`),
+  athlete: (): Promise<Athlete> => get('/api/athlete'),
+}
--- a/peakup-frontend/src/assets/hero.png
+++ b/peakup-frontend/src/assets/hero.png
--- a/peakup-frontend/src/assets/react.svg
+++ b/peakup-frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/peakup-frontend/src/assets/vite.svg
+++ b/peakup-frontend/src/assets/vite.svg
--- a/peakup-frontend/src/components/PeakupLogo.tsx
+++ b/peakup-frontend/src/components/PeakupLogo.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+interface PeakupLogoProps {
+  className?: string
+  gradientStart?: string
+  gradientEnd?: string
+}
+
+const PeakupLogo: React.FC<PeakupLogoProps> = ({
+  className = 'h-16 w-auto',
+  gradientStart = '#ff3b30',
+  gradientEnd = '#ff9500',
+}) => {
+  const gradientId = 'peakupGradient'
+
+  return (
+    <svg
+      viewBox="0 0 400 250"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor={gradientStart} />
+          <stop offset="100%" stopColor={gradientEnd} />
+        </linearGradient>
+      </defs>
+
+      <path
+        d="M 50 150 L 150 50 L 200 100 L 300 10"
+        stroke={`url(#${gradientId})`}
+        strokeWidth="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+
+      <text
+        x="200"
+        y="210"
+        textAnchor="middle"
+        fontFamily="sans-serif"
+        fontWeight="bold"
+        fontSize="72"
+        fill={`url(#${gradientId})`}
+      >
+        PeakUp
+      </text>
+    </svg>
+  )
+}
+
+export default PeakupLogo
--- a/peakup-frontend/src/components/Sidebar.tsx
+++ b/peakup-frontend/src/components/Sidebar.tsx
@@ -0,0 +1,65 @@
+import { Activity, BarChart2, Calendar, Home, Settings, Zap } from 'lucide-react'
+import PeakupLogo from '@/components/PeakupLogo'
+
+interface NavItem {
+  icon: React.ReactNode
+  label: string
+  page: string
+}
+
+const navItems: NavItem[] = [
+  { icon: <Home size={16} />, label: 'DASHBOARD', page: 'dashboard' },
+  { icon: <Activity size={16} />, label: 'ACTIVITIES', page: 'activities' },
+  { icon: <Zap size={16} />, label: 'TRAINING LOAD', page: 'load' },
+  { icon: <BarChart2 size={16} />, label: 'ANALYTICS', page: 'analytics' },
+  { icon: <Calendar size={16} />, label: 'CALENDAR', page: 'calendar' },
+  { icon: <Settings size={16} />, label: 'SETTINGS', page: 'settings' },
+]
+
+interface SidebarProps {
+  currentPage: string
+  onNavigate: (page: string) => void
+}
+
+export function Sidebar({ currentPage, onNavigate }: SidebarProps) {
+  return (
+    <aside className="w-56 min-h-screen border-r border-zinc-200 bg-white flex flex-col shrink-0">
+      {/* Logo */}
+      <div className="px-6 py-6 border-b border-zinc-200 flex justify-center">
+        <PeakupLogo className="h-24 w-auto" />
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 py-6 px-3">
+        <ul className="space-y-0.5">
+          {navItems.map((item) => {
+            const active = currentPage === item.page
+            return (
+              <li key={item.page}>
+                <button
+                  onClick={() => onNavigate(item.page)}
+                  className={[
+                    'w-full flex items-center gap-3 px-3 py-2.5 text-left text-xs font-semibold tracking-widest transition-colors rounded-sm',
+                    active
+                      ? 'gradient-text'
+                      : 'text-zinc-400 hover:text-zinc-700',
+                  ].join(' ')}
+                >
+                  <span className={active ? 'text-red-500' : 'text-zinc-400'}>
+                    {item.icon}
+                  </span>
+                  {item.label}
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      </nav>
+
+      {/* Footer */}
+      <div className="px-6 py-4 border-t border-zinc-200">
+        <p className="text-xs text-zinc-400 tracking-wider">PEAKUP v1.0</p>
+      </div>
+    </aside>
+  )
+}
--- a/peakup-frontend/src/index.css
+++ b/peakup-frontend/src/index.css
@@ -0,0 +1,44 @@
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    --gradient-from: #ef4444;
+    --gradient-to: #f97316;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    background: #ffffff;
+    color: #18181b;
+    font-family: 'DM Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  #root {
+    width: 100%;
+    min-height: 100svh;
+    display: flex;
+  }
+}
+
+@layer utilities {
+  .gradient-text {
+    background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gradient-bg {
+    background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
+  }
+
+  .gradient-bar {
+    background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
+    border-radius: 1px;
+  }
+}
--- a/peakup-frontend/src/main.tsx
+++ b/peakup-frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/peakup-frontend/src/pages/Activities.tsx
+++ b/peakup-frontend/src/pages/Activities.tsx
@@ -0,0 +1,229 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type SortingState,
+} from '@tanstack/react-table'
+import { ArrowUpDown, ChevronLeft, ChevronRight, Search } from 'lucide-react'
+import { api } from '@/api/client'
+import { type Activity, formatDistance, formatDuration, sportIcon } from '@/types/api'
+
+const col = createColumnHelper<Activity>()
+
+const columns = [
+  col.accessor('startTime', {
+    header: 'DATE',
+    cell: (info) =>
+      new Date(info.getValue()).toLocaleDateString('en', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+      }),
+    sortingFn: 'datetime',
+  }),
+  col.accessor('name', {
+    header: 'ACTIVITY',
+    cell: (info) => (
+      <div className="flex items-center gap-2">
+        <span>{sportIcon(info.row.original.type)}</span>
+        <span className="font-medium text-zinc-800">{info.getValue()}</span>
+      </div>
+    ),
+  }),
+  col.accessor('type', {
+    header: 'TYPE',
+    cell: (info) => (
+      <span className="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
+        {info.getValue()}
+      </span>
+    ),
+  }),
+  col.accessor('distanceM', {
+    header: 'DISTANCE',
+    cell: (info) => formatDistance(info.getValue()),
+  }),
+  col.accessor('movingTimeS', {
+    header: 'TIME',
+    cell: (info) => formatDuration(info.getValue()),
+  }),
+  col.accessor('averageHeartrateBpm', {
+    header: 'AVG HR',
+    cell: (info) =>
+      info.getValue() > 0 ? (
+        <span className="text-red-500 font-semibold">{Math.round(info.getValue())} bpm</span>
+      ) : (
+        <span className="text-zinc-300">—</span>
+      ),
+  }),
+  col.accessor('averagePowerWatt', {
+    header: 'AVG POWER',
+    cell: (info) =>
+      info.getValue() > 0 ? (
+        <span className="font-semibold text-zinc-800">{Math.round(info.getValue())} W</span>
+      ) : (
+        <span className="text-zinc-300">—</span>
+      ),
+  }),
+  col.accessor('totalElevationGainM', {
+    header: 'ELEV.',
+    cell: (info) =>
+      info.getValue() > 0 ? `${Math.round(info.getValue())} m` : <span className="text-zinc-300">—</span>,
+  }),
+  col.accessor('trainingLoad', {
+    header: 'TSS',
+    cell: (info) =>
+      info.getValue() > 0 ? (
+        <span className="font-semibold gradient-text">{Math.round(info.getValue())}</span>
+      ) : (
+        <span className="text-zinc-300">—</span>
+      ),
+  }),
+]
+
+export function Activities() {
+  const { data: activities = [], isLoading } = useQuery({
+    queryKey: ['activities'],
+    queryFn: api.activities,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: 'startTime', desc: true },
+  ])
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  const table = useReactTable({
+    data: activities,
+    columns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageSize: 20 } },
+  })
+
+  return (
+    <div className="flex-1 overflow-y-auto bg-zinc-50 p-8">
+      {/* Header */}
+      <div className="mb-8 flex items-end justify-between">
+        <div>
+          <h1 className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-1">
+            Training Log
+          </h1>
+          <h2 className="text-2xl font-light text-zinc-900 tracking-tight">
+            Activities
+          </h2>
+        </div>
+        <p className="text-xs text-zinc-400 font-semibold tracking-wider">
+          {activities.length} ACTIVITIES
+        </p>
+      </div>
+
+      {/* Search */}
+      <div className="mb-4 relative max-w-xs">
+        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
+        <input
+          type="text"
+          placeholder="Search activities..."
+          value={globalFilter}
+          onChange={(e) => setGlobalFilter(e.target.value)}
+          className="w-full pl-9 pr-3 py-2 text-sm border border-zinc-200 rounded-sm bg-white text-zinc-800 placeholder:text-zinc-400 focus:outline-none focus:border-red-400 focus:ring-1 focus:ring-red-400"
+        />
+      </div>
+
+      {/* Table */}
+      <div className="border border-zinc-200 rounded-sm bg-white overflow-hidden">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-20">
+            <div className="w-6 h-6 rounded-full border-2 border-zinc-200 border-t-red-500 animate-spin" />
+          </div>
+        ) : (
+          <>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-zinc-200 bg-zinc-50">
+                    {table.getHeaderGroups().map((hg) =>
+                      hg.headers.map((header) => (
+                        <th
+                          key={header.id}
+                          className="px-4 py-3 text-left text-xs font-semibold tracking-widest text-zinc-400 whitespace-nowrap"
+                        >
+                          {header.column.getCanSort() ? (
+                            <button
+                              onClick={header.column.getToggleSortingHandler()}
+                              className="flex items-center gap-1 hover:text-zinc-600 transition-colors"
+                            >
+                              {flexRender(header.column.columnDef.header, header.getContext())}
+                              <ArrowUpDown size={10} className="text-zinc-300" />
+                            </button>
+                          ) : (
+                            flexRender(header.column.columnDef.header, header.getContext())
+                          )}
+                        </th>
+                      )),
+                    )}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row, i) => (
+                    <tr
+                      key={row.id}
+                      className={[
+                        'border-b border-zinc-100 last:border-0 transition-colors hover:bg-zinc-50',
+                        i % 2 === 0 ? 'bg-white' : 'bg-zinc-50/50',
+                      ].join(' ')}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <td
+                          key={cell.id}
+                          className="px-4 py-3 text-sm text-zinc-600 whitespace-nowrap"
+                        >
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Pagination */}
+            <div className="flex items-center justify-between px-4 py-3 border-t border-zinc-200 bg-zinc-50">
+              <p className="text-xs text-zinc-400">
+                {table.getFilteredRowModel().rows.length} results ·{' '}
+                page {table.getState().pagination.pageIndex + 1} of{' '}
+                {table.getPageCount()}
+              </p>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+                  className="p-1.5 rounded-sm border border-zinc-200 text-zinc-500 hover:border-zinc-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                >
+                  <ChevronLeft size={14} />
+                </button>
+                <button
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+                  className="p-1.5 rounded-sm border border-zinc-200 text-zinc-500 hover:border-zinc-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                >
+                  <ChevronRight size={14} />
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/peakup-frontend/src/pages/Dashboard.tsx
+++ b/peakup-frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,346 @@
+import { useQuery } from '@tanstack/react-query'
+import {
+  Area,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import { api } from '@/api/client'
+import { type Activity, formatDistance, formatDuration, sportIcon } from '@/types/api'
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+function MetricCard({
+  label,
+  value,
+  unit,
+  sub,
+}: {
+  label: string
+  value: string | number
+  unit?: string
+  sub?: string
+}) {
+  return (
+    <div className="border border-zinc-200 rounded-sm p-5 bg-white">
+      <p className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-3">
+        {label}
+      </p>
+      <p className="text-3xl font-bold text-zinc-900 leading-none">
+        {value}
+        {unit && (
+          <span className="text-sm font-normal text-zinc-400 ml-1">{unit}</span>
+        )}
+      </p>
+      {sub && <p className="text-xs text-zinc-400 mt-1">{sub}</p>}
+    </div>
+  )
+}
+
+function ProgressBar({ value, max }: { value: number; max: number }) {
+  const pct = Math.min(100, (value / max) * 100)
+  return (
+    <div className="h-1.5 bg-zinc-100 rounded-sm overflow-hidden">
+      <div className="gradient-bar h-full transition-all" style={{ width: `${pct}%` }} />
+    </div>
+  )
+}
+
+function WeeklyGoal({
+  label,
+  current,
+  target,
+  unit,
+}: {
+  label: string
+  current: number
+  target: number
+  unit: string
+}) {
+  return (
+    <div className="border border-zinc-200 rounded-sm p-5 bg-white">
+      <div className="flex items-end justify-between mb-3">
+        <p className="text-xs font-semibold tracking-widest text-zinc-400 uppercase">
+          {label}
+        </p>
+        <p className="text-xs text-zinc-400">
+          <span className="text-zinc-900 font-semibold">{current}</span> / {target}{' '}
+          {unit}
+        </p>
+      </div>
+      <ProgressBar value={current} max={target} />
+    </div>
+  )
+}
+
+// ── TSS / load chart ─────────────────────────────────────────────────────────
+
+function buildLoadData(activities: Activity[]) {
+  const sorted = [...activities]
+    .filter((a) => a.trainingLoad > 0)
+    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
+
+  // last 12 weeks
+  const now = Date.now()
+  const twelveWeeks = 12 * 7 * 24 * 3600 * 1000
+  const recent = sorted.filter((a) => now - new Date(a.startTime).getTime() < twelveWeeks)
+
+  // bucket by week
+  const buckets: Record<string, { actual: number; planned: number }> = {}
+  recent.forEach((a) => {
+    const d = new Date(a.startTime)
+    const startOfWeek = new Date(d)
+    startOfWeek.setDate(d.getDate() - d.getDay())
+    const key = startOfWeek.toISOString().slice(0, 10)
+    if (!buckets[key]) buckets[key] = { actual: 0, planned: 0 }
+    buckets[key].actual += Math.round(a.trainingLoad)
+    buckets[key].planned += Math.round(a.trainingLoad * 1.1)
+  })
+
+  return Object.entries(buckets)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([week, v]) => ({
+      week: week.slice(5), // MM-DD
+      ...v,
+    }))
+}
+
+// ── recent activities list ────────────────────────────────────────────────────
+
+function RecentActivity({ activity }: { activity: Activity }) {
+  const date = new Date(activity.startTime).toLocaleDateString('en', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  })
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-zinc-100 last:border-0">
+      <div className="flex items-center gap-3">
+        <span className="text-lg leading-none">{sportIcon(activity.type)}</span>
+        <div>
+          <p className="text-sm font-medium text-zinc-800 leading-none mb-1">
+            {activity.name}
+          </p>
+          <p className="text-xs text-zinc-400">{date}</p>
+        </div>
+      </div>
+      <div className="text-right">
+        <p className="text-sm font-semibold text-zinc-800">
+          {formatDistance(activity.distanceM)}
+        </p>
+        <p className="text-xs text-zinc-400">{formatDuration(activity.movingTimeS)}</p>
+      </div>
+    </div>
+  )
+}
+
+// ── Custom tooltip ────────────────────────────────────────────────────────────
+
+function LoadTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean
+  payload?: Array<{ name: string; value: number; color: string }>
+  label?: string
+}) {
+  if (!active || !payload?.length) return null
+  return (
+    <div className="bg-white border border-zinc-200 rounded-sm px-3 py-2 shadow-sm text-xs">
+      <p className="font-semibold text-zinc-500 mb-1">Week {label}</p>
+      {payload.map((p) => (
+        <p key={p.name} style={{ color: p.color }}>
+          {p.name}: <span className="font-bold">{p.value}</span> TSS
+        </p>
+      ))}
+    </div>
+  )
+}
+
+// ── Dashboard ─────────────────────────────────────────────────────────────────
+
+export function Dashboard() {
+  const { data: activities = [], isLoading } = useQuery({
+    queryKey: ['activities'],
+    queryFn: api.activities,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="w-6 h-6 rounded-full border-2 border-zinc-200 border-t-red-500 animate-spin" />
+      </div>
+    )
+  }
+
+  // This week stats
+  const now = new Date()
+  const startOfWeek = new Date(now)
+  startOfWeek.setDate(now.getDate() - now.getDay())
+  startOfWeek.setHours(0, 0, 0, 0)
+
+  const thisWeek = activities.filter(
+    (a) => new Date(a.startTime) >= startOfWeek,
+  )
+
+  const weekDistance = thisWeek.reduce((s, a) => s + a.distanceM, 0) / 1000
+  const weekTime = thisWeek.reduce((s, a) => s + a.movingTimeS, 0)
+  const weekTSS = thisWeek.reduce((s, a) => s + (a.trainingLoad || 0), 0)
+  const weekElevation = thisWeek.reduce((s, a) => s + (a.totalElevationGainM || 0), 0)
+
+  // CTL / ATL from latest activity
+  const latest = [...activities].sort(
+    (a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime(),
+  )[0]
+  const ctl = latest?.ctl?.toFixed(0) ?? '—'
+  const atl = latest?.atl?.toFixed(0) ?? '—'
+  const tsb = latest ? ((latest.ctl ?? 0) - (latest.atl ?? 0)).toFixed(0) : '—'
+
+  const recent = [...activities]
+    .sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime())
+    .slice(0, 5)
+
+  const loadData = buildLoadData(activities)
+
+  return (
+    <div className="flex-1 overflow-y-auto bg-zinc-50 p-8">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-1">
+          Overview
+        </h1>
+        <h2 className="text-2xl font-light text-zinc-900 tracking-tight">Dashboard</h2>
+      </div>
+
+      {/* Weekly Goals */}
+      <section className="mb-8">
+        <p className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-4">
+          This Week
+        </p>
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+          <WeeklyGoal
+            label="Distance"
+            current={Math.round(weekDistance)}
+            target={100}
+            unit="km"
+          />
+          <WeeklyGoal
+            label="Time"
+            current={Math.round(weekTime / 3600)}
+            target={10}
+            unit="h"
+          />
+          <WeeklyGoal
+            label="TSS"
+            current={Math.round(weekTSS)}
+            target={500}
+            unit="pts"
+          />
+          <WeeklyGoal
+            label="Elevation"
+            current={Math.round(weekElevation)}
+            target={3000}
+            unit="m"
+          />
+        </div>
+      </section>
+
+      {/* Fitness Metrics */}
+      <section className="mb-8">
+        <p className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-4">
+          Fitness State
+        </p>
+        <div className="grid grid-cols-3 gap-3">
+          <MetricCard label="Fitness (CTL)" value={ctl} unit="TSS/day" sub="Chronic Training Load" />
+          <MetricCard label="Fatigue (ATL)" value={atl} unit="TSS/day" sub="Acute Training Load" />
+          <MetricCard
+            label="Form (TSB)"
+            value={tsb}
+            sub={Number(tsb) > 0 ? 'Fresh — ready to race' : 'Fatigued — building fitness'}
+          />
+        </div>
+      </section>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Load chart */}
+        <div className="lg:col-span-2 border border-zinc-200 rounded-sm bg-white p-5">
+          <p className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-5">
+            Weekly Training Load (TSS)
+          </p>
+          {loadData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={200}>
+              <ComposedChart data={loadData} margin={{ left: -20, right: 8 }}>
+                <defs>
+                  <linearGradient id="tssGrad" x1="0" y1="0" x2="1" y2="0">
+                    <stop offset="0%" stopColor="#ef4444" />
+                    <stop offset="100%" stopColor="#f97316" />
+                  </linearGradient>
+                  <linearGradient id="tssAreaGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor="#ef4444" stopOpacity={0.15} />
+                    <stop offset="100%" stopColor="#f97316" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <XAxis
+                  dataKey="week"
+                  tick={{ fontSize: 10, fill: '#a1a1aa' }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fontSize: 10, fill: '#a1a1aa' }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <Tooltip content={<LoadTooltip />} />
+                <Area
+                  type="monotone"
+                  dataKey="actual"
+                  fill="url(#tssAreaGrad)"
+                  stroke="none"
+                />
+                <Line
+                  type="monotone"
+                  dataKey="actual"
+                  stroke="url(#tssGrad)"
+                  strokeWidth={2}
+                  dot={false}
+                  name="Actual"
+                />
+                <Line
+                  type="monotone"
+                  dataKey="planned"
+                  stroke="#d4d4d8"
+                  strokeWidth={1.5}
+                  strokeDasharray="4 3"
+                  dot={false}
+                  name="Planned"
+                />
+              </ComposedChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="h-[200px] flex items-center justify-center text-zinc-400 text-sm">
+              No training data yet
+            </div>
+          )}
+        </div>
+
+        {/* Recent activities */}
+        <div className="border border-zinc-200 rounded-sm bg-white p-5">
+          <p className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-4">
+            Recent Activities
+          </p>
+          {recent.length > 0 ? (
+            recent.map((a) => <RecentActivity key={a.id} activity={a} />)
+          ) : (
+            <p className="text-sm text-zinc-400">No activities yet</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/peakup-frontend/src/pages/Placeholder.tsx
+++ b/peakup-frontend/src/pages/Placeholder.tsx
@@ -0,0 +1,12 @@
+export function Placeholder({ name }: { name: string }) {
+  return (
+    <div className="flex-1 flex items-center justify-center bg-zinc-50">
+      <div className="text-center">
+        <p className="text-xs font-semibold tracking-widest text-zinc-400 uppercase mb-2">
+          Coming Soon
+        </p>
+        <h2 className="text-2xl font-light text-zinc-900">{name}</h2>
+      </div>
+    </div>
+  )
+}
--- a/peakup-frontend/src/types/api.ts
+++ b/peakup-frontend/src/types/api.ts
@@ -0,0 +1,70 @@
+export interface Activity {
+  id: number
+  athleteId: number
+  originId: string
+  name: string
+  type: string
+  sportType: string
+  startTime: string
+  timezone: string | null
+  distanceM: number
+  movingTimeS: number
+  elapsedTimeS: number
+  averageSpeedMps: number
+  maxSpeedMps: number
+  averageHeartrateBpm: number
+  maxHeartrateBPM: number
+  averageCadenceRPM: number
+  averagePowerWatt: number
+  normalizedPowerWatt: number
+  totalWorkKJ: number
+  calories: number
+  totalElevationGainM: number
+  trainingLoad: number
+  intensityFactor: number
+  ftp: number | null
+  atl: number
+  ctl: number
+  streamStatus: number
+}
+
+export interface Athlete {
+  id: number
+  firstName: string
+  lastName: string
+  city: string | null
+  country: string | null
+  sex: string | null
+  weight: number | null
+}
+
+// Helpers
+export function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+  if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
+  return `${m}:${String(s).padStart(2, '0')}`
+}
+
+export function formatDistance(meters: number): string {
+  return (meters / 1000).toFixed(1) + ' km'
+}
+
+export function formatPace(mps: number): string {
+  if (mps === 0) return '—'
+  const sPerKm = 1000 / mps
+  const m = Math.floor(sPerKm / 60)
+  const s = Math.round(sPerKm % 60)
+  return `${m}:${String(s).padStart(2, '0')} /km`
+}
+
+export function sportIcon(type: string): string {
+  const t = type.toLowerCase()
+  if (t.includes('ride') || t.includes('cycling')) return '🚴'
+  if (t.includes('run')) return '🏃'
+  if (t.includes('swim')) return '🏊'
+  if (t.includes('walk') || t.includes('hike')) return '🥾'
+  if (t.includes('ski')) return '⛷️'
+  return '⚡'
+}
--- a/peakup-frontend/tsconfig.app.json
+++ b/peakup-frontend/tsconfig.app.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/peakup-frontend/tsconfig.json
+++ b/peakup-frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/peakup-frontend/tsconfig.node.json
+++ b/peakup-frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/peakup-frontend/vite.config.ts
+++ b/peakup-frontend/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>