feat: add core PWA screens (auth, dashboard, purchases, products, alerts, settings)

Build all 8 primary screens for CAR-33 on top of the Phase 1 scaffold: - Auth: login, register, forgot password with JWT flow and mock fallback - Dashboard: triggered alerts banner, spending stats, price trend sparklines (Recharts), recent purchases - Purchase History: store filter chips, paginated list with item previews - Purchase Detail: receipt view with line items linking to product pages - Products: search with instant filter, store price comparison badges - Product Detail: 90-day price history chart (Recharts), store comparison table - Store Comparison: ranked store cards with savings banner - Price Alerts: triggered/watching sections, create form, progress bars, delete - Coupons: expiration warnings, copy-to-clipboard coupon codes - Account Linking: connect Meijer/Kroger/Target with status indicators - Settings: profile, connected stores, notification toggles, theme switcher, sign out Also adds: - Mock data layer (src/lib/mock-data.ts) for demo/screenshot use - StoreIcon component with store brand colors - Code-split Recharts chunk (initial JS: 117KB, Recharts lazy: 498KB) - All 48px+ touch targets, mobile-first Tailwind layout Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-03-17 12:23:51 +00:00
parent 4e9c888e0f
commit 5fbf0f5c5c
41 changed files with 12516 additions and 0 deletions
@@ -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?
@@ -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...
+    },
+  },
+])
+```
@@ -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,
+    },
+  },
+])
@@ -0,0 +1,16 @@
+<!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" />
+    <meta name="theme-color" content="#1e40af" />
+    <meta name="description" content="Track prices, find coupons, and optimize your grocery shopping." />
+    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
+    <title>CartSnitch</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,43 @@
+{
+  "name": "cartsnitch",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "NODE_ENV=test vitest run",
+    "test:watch": "NODE_ENV=test vitest"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.0",
+    "recharts": "^3.8.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.5.2",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "jsdom": "^25.0.1",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^0.21.2",
+    "vitest": "^3.2.4"
+  }
+}
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import App from './App.tsx'
+
+describe('App', () => {
+  it('renders the dashboard on the root route', () => {
+    render(<App />)
+    expect(screen.getByText('CartSnitch')).toBeInTheDocument()
+  })
+
+  it('renders the bottom navigation', () => {
+    render(<App />)
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Purchases')).toBeInTheDocument()
+    expect(screen.getByText('Products')).toBeInTheDocument()
+  })
+})
@@ -0,0 +1,51 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Layout } from './components/Layout.tsx'
+import { Dashboard } from './pages/Dashboard.tsx'
+import { Purchases } from './pages/Purchases.tsx'
+import { PurchaseDetail } from './pages/PurchaseDetail.tsx'
+import { Products } from './pages/Products.tsx'
+import { ProductDetail } from './pages/ProductDetail.tsx'
+import { StoreComparison } from './pages/StoreComparison.tsx'
+import { Coupons } from './pages/Coupons.tsx'
+import { Alerts } from './pages/Alerts.tsx'
+import { Settings } from './pages/Settings.tsx'
+import { AccountLinking } from './pages/AccountLinking.tsx'
+import { Login } from './pages/Login.tsx'
+import { Register } from './pages/Register.tsx'
+import { ForgotPassword } from './pages/ForgotPassword.tsx'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+      retry: 1,
+    },
+  },
+})
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Routes>
+          <Route element={<Layout />}>
+            <Route index element={<Dashboard />} />
+            <Route path="purchases" element={<Purchases />} />
+            <Route path="purchases/:id" element={<PurchaseDetail />} />
+            <Route path="products" element={<Products />} />
+            <Route path="products/:id" element={<ProductDetail />} />
+            <Route path="compare/:productId" element={<StoreComparison />} />
+            <Route path="coupons" element={<Coupons />} />
+            <Route path="alerts" element={<Alerts />} />
+            <Route path="settings" element={<Settings />} />
+            <Route path="account-linking" element={<AccountLinking />} />
+          </Route>
+          <Route path="login" element={<Login />} />
+          <Route path="register" element={<Register />} />
+          <Route path="forgot-password" element={<ForgotPassword />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
@@ -0,0 +1,74 @@
+import { NavLink } from 'react-router-dom'
+
+const navItems = [
+  { to: '/', label: 'Home', icon: HomeIcon },
+  { to: '/purchases', label: 'Purchases', icon: ReceiptIcon },
+  { to: '/products', label: 'Products', icon: SearchIcon },
+  { to: '/coupons', label: 'Coupons', icon: TagIcon },
+  { to: '/settings', label: 'Settings', icon: GearIcon },
+]
+
+export function BottomNav() {
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white safe-area-pb">
+      <div className="mx-auto flex max-w-lg items-center justify-around">
+        {navItems.map(({ to, label, icon: Icon }) => (
+          <NavLink
+            key={to}
+            to={to}
+            className={({ isActive }) =>
+              `flex min-h-12 min-w-12 flex-col items-center justify-center px-2 py-2 text-xs ${
+                isActive ? 'text-brand-blue' : 'text-gray-500'
+              }`
+            }
+          >
+            <Icon className="mb-0.5 h-6 w-6" />
+            <span>{label}</span>
+          </NavLink>
+        ))}
+      </div>
+    </nav>
+  )
+}
+
+function HomeIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </svg>
+  )
+}
+
+function ReceiptIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z" />
+    </svg>
+  )
+}
+
+function SearchIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+    </svg>
+  )
+}
+
+function TagIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 6h.008v.008H6V6Z" />
+    </svg>
+  )
+}
+
+function GearIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </svg>
+  )
+}
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { describe, it, expect } from 'vitest'
+import { BottomNav } from './BottomNav.tsx'
+
+describe('BottomNav', () => {
+  it('renders all navigation items', () => {
+    render(
+      <MemoryRouter>
+        <BottomNav />
+      </MemoryRouter>,
+    )
+
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Purchases')).toBeInTheDocument()
+    expect(screen.getByText('Products')).toBeInTheDocument()
+    expect(screen.getByText('Coupons')).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('renders navigation links with correct paths', () => {
+    render(
+      <MemoryRouter>
+        <BottomNav />
+      </MemoryRouter>,
+    )
+
+    const links = screen.getAllByRole('link')
+    const hrefs = links.map((link) => link.getAttribute('href'))
+
+    expect(hrefs).toContain('/')
+    expect(hrefs).toContain('/purchases')
+    expect(hrefs).toContain('/products')
+    expect(hrefs).toContain('/coupons')
+    expect(hrefs).toContain('/settings')
+  })
+
+  it('has touch-friendly minimum sizes (48px)', () => {
+    render(
+      <MemoryRouter>
+        <BottomNav />
+      </MemoryRouter>,
+    )
+
+    const links = screen.getAllByRole('link')
+    links.forEach((link) => {
+      expect(link.className).toContain('min-h-12')
+      expect(link.className).toContain('min-w-12')
+    })
+  })
+})
@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom'
+import { BottomNav } from './BottomNav.tsx'
+
+export function Layout() {
+  return (
+    <div className="min-h-screen bg-gray-50 pb-20">
+      <main className="mx-auto max-w-lg px-4 pt-4">
+        <Outlet />
+      </main>
+      <BottomNav />
+    </div>
+  )
+}
@@ -0,0 +1,25 @@
+const storeColors: Record<string, string> = {
+  meijer: 'bg-meijer-red',
+  kroger: 'bg-kroger-blue',
+  target: 'bg-target-red',
+}
+
+const storeLetters: Record<string, string> = {
+  meijer: 'M',
+  kroger: 'K',
+  target: 'T',
+}
+
+export function StoreIcon({ storeId, size = 'md' }: { storeId: string; size?: 'sm' | 'md' }) {
+  const sizeClass = size === 'sm' ? 'h-6 w-6 text-xs' : 'h-8 w-8 text-sm'
+  const bg = storeColors[storeId] ?? 'bg-gray-400'
+  const letter = storeLetters[storeId] ?? storeId.charAt(0).toUpperCase()
+
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center justify-center rounded-full font-bold text-white ${bg} ${sizeClass}`}
+    >
+      {letter}
+    </span>
+  )
+}
@@ -0,0 +1,55 @@
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../lib/api.ts'
+import type { Purchase, Product, Coupon, PriceAlert, PriceHistory } from '../types/api.ts'
+
+export function usePurchases() {
+  return useQuery({
+    queryKey: ['purchases'],
+    queryFn: () => api.get<Purchase[]>('/purchases'),
+  })
+}
+
+export function usePurchase(id: string) {
+  return useQuery({
+    queryKey: ['purchases', id],
+    queryFn: () => api.get<Purchase>(`/purchases/${id}`),
+    enabled: !!id,
+  })
+}
+
+export function useProducts(search?: string) {
+  return useQuery({
+    queryKey: ['products', search],
+    queryFn: () => api.get<Product[]>(`/products${search ? `?q=${encodeURIComponent(search)}` : ''}`),
+  })
+}
+
+export function useProduct(id: string) {
+  return useQuery({
+    queryKey: ['products', id],
+    queryFn: () => api.get<Product>(`/products/${id}`),
+    enabled: !!id,
+  })
+}
+
+export function usePriceHistory(productId: string) {
+  return useQuery({
+    queryKey: ['priceHistory', productId],
+    queryFn: () => api.get<PriceHistory[]>(`/products/${productId}/price-history`),
+    enabled: !!productId,
+  })
+}
+
+export function useCoupons() {
+  return useQuery({
+    queryKey: ['coupons'],
+    queryFn: () => api.get<Coupon[]>('/coupons'),
+  })
+}
+
+export function usePriceAlerts() {
+  return useQuery({
+    queryKey: ['priceAlerts'],
+    queryFn: () => api.get<PriceAlert[]>('/price-alerts'),
+  })
+}
@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-blue: #1e40af;
+  --color-brand-blue-light: #3b82f6;
+  --color-kroger-blue: #0068a8;
+  --color-meijer-red: #e31837;
+  --color-target-red: #cc0000;
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+}
@@ -0,0 +1,36 @@
+import { useAuthStore } from '../stores/auth.ts'
+
+const API_BASE = import.meta.env.VITE_API_URL ?? '/api/v1'
+
+async function apiFetch<T>(path: string, options?: RequestInit): Promise<T> {
+  const token = useAuthStore.getState().token
+
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...options?.headers,
+    },
+  })
+
+  if (res.status === 401) {
+    useAuthStore.getState().logout()
+    throw new Error('Unauthorized')
+  }
+
+  if (!res.ok) {
+    throw new Error(`API error: ${res.status}`)
+  }
+
+  return res.json() as Promise<T>
+}
+
+export const api = {
+  get: <T>(path: string) => apiFetch<T>(path),
+  post: <T>(path: string, body: unknown) =>
+    apiFetch<T>(path, { method: 'POST', body: JSON.stringify(body) }),
+  put: <T>(path: string, body: unknown) =>
+    apiFetch<T>(path, { method: 'PUT', body: JSON.stringify(body) }),
+  delete: <T>(path: string) => apiFetch<T>(path, { method: 'DELETE' }),
+}
@@ -0,0 +1,190 @@
+import type { Purchase, Product, PriceHistory, Coupon, PriceAlert, User } from '../types/api.ts'
+
+export const mockUser: User = {
+  id: 'u1',
+  email: 'sam@example.com',
+  name: 'Sam Johnson',
+  connectedStores: ['meijer', 'kroger'],
+}
+
+export const mockPurchases: Purchase[] = [
+  {
+    id: 'p1',
+    storeId: 'meijer',
+    storeName: 'Meijer',
+    date: '2026-03-15',
+    total: 47.23,
+    items: [
+      { id: 'i1', productId: 'prod1', name: 'Whole Milk (1 gal)', quantity: 1, price: 3.49, unitPrice: 3.49 },
+      { id: 'i2', productId: 'prod2', name: 'Bananas (bunch)', quantity: 1, price: 1.29, unitPrice: 1.29 },
+      { id: 'i3', productId: 'prod3', name: 'Chicken Breast (2 lb)', quantity: 1, price: 9.98, unitPrice: 4.99 },
+      { id: 'i4', productId: 'prod4', name: 'Cheddar Cheese (8 oz)', quantity: 2, price: 7.58, unitPrice: 3.79 },
+      { id: 'i5', productId: 'prod5', name: 'Sourdough Bread', quantity: 1, price: 4.29, unitPrice: 4.29 },
+      { id: 'i6', productId: 'prod6', name: 'Baby Spinach (5 oz)', quantity: 1, price: 3.99, unitPrice: 3.99 },
+      { id: 'i7', productId: 'prod7', name: 'Greek Yogurt (32 oz)', quantity: 1, price: 5.49, unitPrice: 5.49 },
+      { id: 'i8', productId: 'prod8', name: 'Pasta Sauce', quantity: 1, price: 3.79, unitPrice: 3.79 },
+      { id: 'i9', productId: 'prod9', name: 'Spaghetti (16 oz)', quantity: 1, price: 1.89, unitPrice: 1.89 },
+      { id: 'i10', productId: 'prod10', name: 'Eggs (dozen)', quantity: 1, price: 5.44, unitPrice: 5.44 },
+    ],
+  },
+  {
+    id: 'p2',
+    storeId: 'kroger',
+    storeName: 'Kroger',
+    date: '2026-03-12',
+    total: 32.87,
+    items: [
+      { id: 'i11', productId: 'prod1', name: 'Whole Milk (1 gal)', quantity: 1, price: 3.29, unitPrice: 3.29 },
+      { id: 'i12', productId: 'prod10', name: 'Eggs (dozen)', quantity: 1, price: 5.29, unitPrice: 5.29 },
+      { id: 'i13', productId: 'prod11', name: 'Orange Juice (52 oz)', quantity: 1, price: 4.49, unitPrice: 4.49 },
+      { id: 'i14', productId: 'prod12', name: 'Ground Beef (1 lb)', quantity: 2, price: 11.98, unitPrice: 5.99 },
+      { id: 'i15', productId: 'prod2', name: 'Bananas (bunch)', quantity: 1, price: 0.99, unitPrice: 0.99 },
+      { id: 'i16', productId: 'prod13', name: 'Tortilla Chips', quantity: 1, price: 3.49, unitPrice: 3.49 },
+      { id: 'i17', productId: 'prod14', name: 'Salsa (16 oz)', quantity: 1, price: 3.34, unitPrice: 3.34 },
+    ],
+  },
+  {
+    id: 'p3',
+    storeId: 'meijer',
+    storeName: 'Meijer',
+    date: '2026-03-08',
+    total: 61.45,
+    items: [
+      { id: 'i18', productId: 'prod3', name: 'Chicken Breast (2 lb)', quantity: 2, price: 19.96, unitPrice: 4.99 },
+      { id: 'i19', productId: 'prod15', name: 'Rice (5 lb)', quantity: 1, price: 6.99, unitPrice: 6.99 },
+      { id: 'i20', productId: 'prod6', name: 'Baby Spinach (5 oz)', quantity: 2, price: 7.98, unitPrice: 3.99 },
+      { id: 'i21', productId: 'prod16', name: 'Olive Oil (16 oz)', quantity: 1, price: 8.99, unitPrice: 8.99 },
+      { id: 'i22', productId: 'prod5', name: 'Sourdough Bread', quantity: 1, price: 4.29, unitPrice: 4.29 },
+      { id: 'i23', productId: 'prod17', name: 'Butter (1 lb)', quantity: 1, price: 4.79, unitPrice: 4.79 },
+      { id: 'i24', productId: 'prod18', name: 'Avocados (3 ct)', quantity: 1, price: 4.99, unitPrice: 4.99 },
+      { id: 'i25', productId: 'prod19', name: 'Cereal (Family Size)', quantity: 1, price: 3.46, unitPrice: 3.46 },
+    ],
+  },
+  {
+    id: 'p4',
+    storeId: 'target',
+    storeName: 'Target',
+    date: '2026-03-05',
+    total: 28.76,
+    items: [
+      { id: 'i26', productId: 'prod20', name: 'Paper Towels (6 pk)', quantity: 1, price: 12.99, unitPrice: 12.99 },
+      { id: 'i27', productId: 'prod21', name: 'Dish Soap', quantity: 1, price: 3.49, unitPrice: 3.49 },
+      { id: 'i28', productId: 'prod22', name: 'Trash Bags (45 ct)', quantity: 1, price: 8.79, unitPrice: 8.79 },
+      { id: 'i29', productId: 'prod23', name: 'Hand Soap (2 pk)', quantity: 1, price: 3.49, unitPrice: 3.49 },
+    ],
+  },
+]
+
+export const mockProducts: Product[] = [
+  {
+    id: 'prod1',
+    name: 'Whole Milk (1 gal)',
+    brand: 'Store Brand',
+    category: 'Dairy',
+    prices: [
+      { storeId: 'meijer', storeName: 'Meijer', price: 3.49, lastUpdated: '2026-03-15' },
+      { storeId: 'kroger', storeName: 'Kroger', price: 3.29, lastUpdated: '2026-03-14' },
+      { storeId: 'target', storeName: 'Target', price: 3.59, lastUpdated: '2026-03-13' },
+    ],
+  },
+  {
+    id: 'prod10',
+    name: 'Eggs (dozen)',
+    brand: 'Store Brand',
+    category: 'Dairy',
+    prices: [
+      { storeId: 'meijer', storeName: 'Meijer', price: 5.44, lastUpdated: '2026-03-15' },
+      { storeId: 'kroger', storeName: 'Kroger', price: 5.29, lastUpdated: '2026-03-14' },
+      { storeId: 'target', storeName: 'Target', price: 5.69, lastUpdated: '2026-03-13' },
+    ],
+  },
+  {
+    id: 'prod3',
+    name: 'Chicken Breast (2 lb)',
+    brand: 'Store Brand',
+    category: 'Meat',
+    prices: [
+      { storeId: 'meijer', storeName: 'Meijer', price: 9.98, lastUpdated: '2026-03-15' },
+      { storeId: 'kroger', storeName: 'Kroger', price: 10.49, lastUpdated: '2026-03-14' },
+      { storeId: 'target', storeName: 'Target', price: 10.99, lastUpdated: '2026-03-13' },
+    ],
+  },
+  {
+    id: 'prod2',
+    name: 'Bananas (bunch)',
+    brand: 'Dole',
+    category: 'Produce',
+    prices: [
+      { storeId: 'meijer', storeName: 'Meijer', price: 1.29, lastUpdated: '2026-03-15' },
+      { storeId: 'kroger', storeName: 'Kroger', price: 0.99, lastUpdated: '2026-03-14' },
+      { storeId: 'target', storeName: 'Target', price: 1.19, lastUpdated: '2026-03-13' },
+    ],
+  },
+  {
+    id: 'prod5',
+    name: 'Sourdough Bread',
+    brand: 'Artisan Hearth',
+    category: 'Bakery',
+    prices: [
+      { storeId: 'meijer', storeName: 'Meijer', price: 4.29, lastUpdated: '2026-03-15' },
+      { storeId: 'kroger', storeName: 'Kroger', price: 4.49, lastUpdated: '2026-03-14' },
+    ],
+  },
+  {
+    id: 'prod6',
+    name: 'Baby Spinach (5 oz)',
+    brand: 'Organic Girl',
+    category: 'Produce',
+    prices: [
+      { storeId: 'meijer', storeName: 'Meijer', price: 3.99, lastUpdated: '2026-03-15' },
+      { storeId: 'kroger', storeName: 'Kroger', price: 3.79, lastUpdated: '2026-03-14' },
+      { storeId: 'target', storeName: 'Target', price: 4.19, lastUpdated: '2026-03-13' },
+    ],
+  },
+]
+
+export function getMockPriceHistory(productId: string): PriceHistory[] {
+  const basePrice = productId === 'prod1' ? 3.29
+    : productId === 'prod10' ? 3.49
+    : productId === 'prod3' ? 8.99
+    : productId === 'prod2' ? 0.89
+    : 3.99
+
+  const stores = ['meijer', 'kroger', 'target']
+  const history: PriceHistory[] = []
+
+  for (let i = 90; i >= 0; i -= 7) {
+    const date = new Date(2026, 2, 17)
+    date.setDate(date.getDate() - i)
+    const dateStr = date.toISOString().split('T')[0]
+
+    for (const store of stores) {
+      const storeOffset = store === 'meijer' ? 0.10 : store === 'target' ? 0.20 : 0
+      // simulate price variation over time
+      const spike = (i > 30 && i < 50) ? 0.80 : 0
+      const drift = (90 - i) * 0.005
+      history.push({
+        date: dateStr,
+        price: Math.round((basePrice + storeOffset + spike + drift) * 100) / 100,
+        storeId: store,
+      })
+    }
+  }
+
+  return history
+}
+
+export const mockCoupons: Coupon[] = [
+  { id: 'c1', productId: 'prod1', storeName: 'Kroger', description: '$0.50 off Whole Milk (1 gal)', discount: '$0.50', expiresAt: '2026-03-31', code: 'MILK50' },
+  { id: 'c2', storeName: 'Meijer', description: '10% off Meat Department', discount: '10%', expiresAt: '2026-03-22' },
+  { id: 'c3', productId: 'prod6', storeName: 'Kroger', description: 'Buy 2 Get 1 Free — Baby Spinach', discount: 'B2G1', expiresAt: '2026-04-05' },
+  { id: 'c4', storeName: 'Target', description: '$5 off $40+ Grocery Purchase', discount: '$5.00', expiresAt: '2026-03-28', code: 'SAVE5' },
+  { id: 'c5', productId: 'prod10', storeName: 'Meijer', description: '$1 off Eggs (dozen)', discount: '$1.00', expiresAt: '2026-03-25' },
+]
+
+export const mockAlerts: PriceAlert[] = [
+  { id: 'a1', productId: 'prod10', productName: 'Eggs (dozen)', targetPrice: 4.99, currentPrice: 5.29, triggered: false },
+  { id: 'a2', productId: 'prod2', productName: 'Bananas (bunch)', targetPrice: 1.09, currentPrice: 0.99, triggered: true },
+  { id: 'a3', productId: 'prod3', productName: 'Chicken Breast (2 lb)', targetPrice: 9.50, currentPrice: 9.98, triggered: false },
+  { id: 'a4', productId: 'prod1', productName: 'Whole Milk (1 gal)', targetPrice: 3.39, currentPrice: 3.29, triggered: true },
+]
@@ -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>,
+)
@@ -0,0 +1,204 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+interface StoreConfig {
+  id: string
+  name: string
+  description: string
+  fields: { key: string; label: string; type: string }[]
+}
+
+const availableStores: StoreConfig[] = [
+  {
+    id: 'meijer',
+    name: 'Meijer',
+    description: 'Connect your mPerks account to import purchase history.',
+    fields: [
+      { key: 'email', label: 'mPerks Email', type: 'email' },
+      { key: 'password', label: 'mPerks Password', type: 'password' },
+    ],
+  },
+  {
+    id: 'kroger',
+    name: 'Kroger',
+    description: 'Connect your Kroger Plus account for receipts and digital coupons.',
+    fields: [
+      { key: 'email', label: 'Kroger Email', type: 'email' },
+      { key: 'password', label: 'Kroger Password', type: 'password' },
+    ],
+  },
+  {
+    id: 'target',
+    name: 'Target',
+    description: 'Connect Target Circle for purchase history and deals.',
+    fields: [
+      { key: 'email', label: 'Target Email', type: 'email' },
+      { key: 'password', label: 'Target Password', type: 'password' },
+    ],
+  },
+]
+
+export function AccountLinking() {
+  const [linking, setLinking] = useState<string | null>(null)
+  const [connected, setConnected] = useState<string[]>(['meijer', 'kroger'])
+  const [status, setStatus] = useState<'idle' | 'connecting' | 'success' | 'error'>('idle')
+
+  function handleConnect(storeId: string) {
+    setStatus('connecting')
+    // Simulate connection
+    setTimeout(() => {
+      setConnected((prev) => [...prev, storeId])
+      setStatus('success')
+      setTimeout(() => {
+        setLinking(null)
+        setStatus('idle')
+      }, 1500)
+    }, 2000)
+  }
+
+  function handleDisconnect(storeId: string) {
+    setConnected((prev) => prev.filter((s) => s !== storeId))
+  }
+
+  return (
+    <div>
+      <Link to="/settings" className="inline-flex items-center gap-1 text-sm text-brand-blue">
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        Settings
+      </Link>
+
+      <h1 className="mt-4 text-2xl font-bold text-gray-900">Connect a Store</h1>
+      <p className="mt-1 text-sm text-gray-500">
+        Link your store loyalty accounts to automatically import purchases and track prices.
+      </p>
+
+      <div className="mt-6 space-y-4">
+        {availableStores.map((store) => {
+          const isConnected = connected.includes(store.id)
+          const isLinking = linking === store.id
+
+          return (
+            <div key={store.id} className="rounded-xl bg-white p-4 shadow-sm">
+              <div className="flex items-center gap-3">
+                <StoreIcon storeId={store.id} />
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-gray-900">{store.name}</p>
+                  <p className="text-xs text-gray-500">
+                    {isConnected ? 'Connected' : store.description}
+                  </p>
+                </div>
+                {isConnected ? (
+                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs text-white">
+                    &#x2713;
+                  </span>
+                ) : null}
+              </div>
+
+              {isConnected && !isLinking && (
+                <button
+                  onClick={() => handleDisconnect(store.id)}
+                  className="mt-3 min-h-10 w-full rounded-xl border border-red-200 px-4 py-2 text-sm font-medium text-red-600 active:bg-red-50"
+                >
+                  Disconnect
+                </button>
+              )}
+
+              {!isConnected && !isLinking && (
+                <button
+                  onClick={() => setLinking(store.id)}
+                  className="mt-3 min-h-12 w-full rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+                >
+                  Connect {store.name}
+                </button>
+              )}
+
+              {isLinking && (
+                <LinkForm
+                  store={store}
+                  status={status}
+                  onSubmit={() => handleConnect(store.id)}
+                  onCancel={() => {
+                    setLinking(null)
+                    setStatus('idle')
+                  }}
+                />
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      <div className="mt-6 rounded-xl bg-blue-50 p-4">
+        <p className="text-xs text-blue-700">
+          Your credentials are encrypted and stored securely. CartSnitch never shares your login
+          information with third parties.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function LinkForm({
+  store,
+  status,
+  onSubmit,
+  onCancel,
+}: {
+  store: StoreConfig
+  status: string
+  onSubmit: () => void
+  onCancel: () => void
+}) {
+  return (
+    <div className="mt-3 space-y-3">
+      {store.fields.map((field) => (
+        <input
+          key={field.key}
+          type={field.type}
+          placeholder={field.label}
+          autoComplete={field.type === 'password' ? 'current-password' : field.type}
+          className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+        />
+      ))}
+
+      {status === 'connecting' && (
+        <div className="flex items-center gap-2 rounded-xl bg-blue-50 px-4 py-3">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-brand-blue border-t-transparent" />
+          <span className="text-sm text-blue-700">Connecting to {store.name}...</span>
+        </div>
+      )}
+
+      {status === 'success' && (
+        <div className="rounded-xl bg-green-50 px-4 py-3 text-sm text-green-700">
+          Connected successfully!
+        </div>
+      )}
+
+      {status === 'error' && (
+        <div className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">
+          Connection failed. Please check your credentials and try again.
+        </div>
+      )}
+
+      {status === 'idle' && (
+        <div className="flex gap-3">
+          <button
+            onClick={onSubmit}
+            className="min-h-12 flex-1 rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+          >
+            Connect
+          </button>
+          <button
+            onClick={onCancel}
+            className="min-h-12 rounded-xl border border-gray-200 px-4 py-3 text-base font-medium text-gray-700 active:bg-gray-50"
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,203 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { mockAlerts } from '../lib/mock-data.ts'
+import type { PriceAlert } from '../types/api.ts'
+
+export function Alerts() {
+  const [alerts, setAlerts] = useState<PriceAlert[]>(mockAlerts)
+  const [showCreate, setShowCreate] = useState(false)
+
+  const triggered = alerts.filter((a) => a.triggered)
+  const watching = alerts.filter((a) => !a.triggered)
+
+  function handleDelete(id: string) {
+    setAlerts((prev) => prev.filter((a) => a.id !== id))
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">Price Alerts</h1>
+        <button
+          onClick={() => setShowCreate(!showCreate)}
+          className="min-h-10 rounded-full bg-brand-blue px-4 text-sm font-medium text-white active:bg-brand-blue/90"
+        >
+          + New Alert
+        </button>
+      </div>
+
+      {/* Create alert form */}
+      {showCreate && <CreateAlertForm onClose={() => setShowCreate(false)} onCreated={(a) => {
+        setAlerts((prev) => [a, ...prev])
+        setShowCreate(false)
+      }} />}
+
+      {/* Triggered alerts */}
+      {triggered.length > 0 && (
+        <section className="mt-6">
+          <h2 className="mb-3 text-sm font-semibold text-green-700">
+            Triggered ({triggered.length})
+          </h2>
+          <div className="space-y-3">
+            {triggered.map((alert) => (
+              <AlertCard key={alert.id} alert={alert} onDelete={handleDelete} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Watching alerts */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-sm font-semibold text-gray-500">
+          Watching ({watching.length})
+        </h2>
+        {watching.length === 0 ? (
+          <div className="rounded-xl bg-white p-6 text-center shadow-sm">
+            <p className="text-sm text-gray-500">
+              No active alerts.{' '}
+              <Link to="/products" className="text-brand-blue">
+                Search products
+              </Link>{' '}
+              to set one up.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {watching.map((alert) => (
+              <AlertCard key={alert.id} alert={alert} onDelete={handleDelete} />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}
+
+function AlertCard({
+  alert,
+  onDelete,
+}: {
+  alert: PriceAlert
+  onDelete: (id: string) => void
+}) {
+  const priceDiff = alert.currentPrice - alert.targetPrice
+  const isBelow = priceDiff <= 0
+
+  return (
+    <div
+      className={`rounded-xl p-4 shadow-sm ${
+        alert.triggered ? 'border border-green-200 bg-green-50' : 'bg-white'
+      }`}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <Link to={`/products/${alert.productId}`} className="text-sm font-medium text-gray-900">
+            {alert.productName}
+          </Link>
+          <div className="mt-1 flex items-center gap-2">
+            <span className="text-xs text-gray-500">Target: ${alert.targetPrice.toFixed(2)}</span>
+            <span className="text-xs text-gray-400">&middot;</span>
+            <span className={`text-xs font-medium ${isBelow ? 'text-green-700' : 'text-gray-500'}`}>
+              Now: ${alert.currentPrice.toFixed(2)}
+            </span>
+          </div>
+          {alert.triggered && (
+            <p className="mt-1 text-xs font-medium text-green-700">
+              Price dropped ${Math.abs(priceDiff).toFixed(2)} below target
+            </p>
+          )}
+        </div>
+
+        {/* Status indicator */}
+        <div className="flex items-center gap-2">
+          {alert.triggered && (
+            <span className="flex h-3 w-3 rounded-full bg-green-500" />
+          )}
+          <button
+            onClick={() => onDelete(alert.id)}
+            className="min-h-10 min-w-10 rounded-lg p-2 text-gray-400 active:bg-gray-100"
+            aria-label="Delete alert"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Progress bar toward target */}
+      {!alert.triggered && (
+        <div className="mt-3">
+          <div className="h-1.5 rounded-full bg-gray-100">
+            <div
+              className="h-1.5 rounded-full bg-brand-blue-light"
+              style={{
+                width: `${Math.min(100, Math.max(5, (1 - priceDiff / alert.currentPrice) * 100))}%`,
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CreateAlertForm({
+  onClose,
+  onCreated,
+}: {
+  onClose: () => void
+  onCreated: (alert: PriceAlert) => void
+}) {
+  const [productName, setProductName] = useState('')
+  const [targetPrice, setTargetPrice] = useState('')
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!productName || !targetPrice) return
+
+    onCreated({
+      id: `a-${Date.now()}`,
+      productId: `prod-${Date.now()}`,
+      productName,
+      targetPrice: parseFloat(targetPrice),
+      currentPrice: parseFloat(targetPrice) + 0.50,
+      triggered: false,
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="mt-4 space-y-3 rounded-xl bg-white p-4 shadow-sm">
+      <input
+        type="text"
+        placeholder="Product name"
+        value={productName}
+        onChange={(e) => setProductName(e.target.value)}
+        className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+      />
+      <input
+        type="number"
+        step="0.01"
+        placeholder="Target price"
+        value={targetPrice}
+        onChange={(e) => setTargetPrice(e.target.value)}
+        className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+      />
+      <div className="flex gap-3">
+        <button
+          type="submit"
+          className="min-h-12 flex-1 rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+        >
+          Create Alert
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          className="min-h-12 rounded-xl border border-gray-200 px-4 py-3 text-base font-medium text-gray-700 active:bg-gray-50"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { mockCoupons } from '../lib/mock-data.ts'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+export function Coupons() {
+  const [copied, setCopied] = useState<string | null>(null)
+
+  function handleCopy(code: string, id: string) {
+    navigator.clipboard?.writeText(code)
+    setCopied(id)
+    setTimeout(() => setCopied(null), 2000)
+  }
+
+  const storeIds: Record<string, string> = {
+    Meijer: 'meijer',
+    Kroger: 'kroger',
+    Target: 'target',
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900">Coupons & Deals</h1>
+
+      <div className="mt-4 space-y-3">
+        {mockCoupons.map((coupon) => {
+          const isExpiringSoon =
+            new Date(coupon.expiresAt).getTime() - Date.now() < 7 * 24 * 60 * 60 * 1000
+
+          return (
+            <div key={coupon.id} className="rounded-xl bg-white p-4 shadow-sm">
+              <div className="flex items-start gap-3">
+                <StoreIcon storeId={storeIds[coupon.storeName] ?? 'unknown'} />
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-gray-900">{coupon.description}</p>
+                  <p className="mt-0.5 text-xs text-gray-500">{coupon.storeName}</p>
+                  <p
+                    className={`mt-1 text-xs ${
+                      isExpiringSoon ? 'font-medium text-orange-600' : 'text-gray-400'
+                    }`}
+                  >
+                    Expires{' '}
+                    {new Date(coupon.expiresAt).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                    })}
+                    {isExpiringSoon && ' — expiring soon!'}
+                  </p>
+                </div>
+                <span className="shrink-0 rounded-lg bg-green-100 px-2 py-1 text-sm font-bold text-green-700">
+                  {coupon.discount}
+                </span>
+              </div>
+
+              {coupon.code && (
+                <button
+                  onClick={() => handleCopy(coupon.code!, coupon.id)}
+                  className="mt-3 flex min-h-10 w-full items-center justify-center gap-2 rounded-lg border border-dashed border-gray-300 px-4 py-2 text-sm font-mono active:bg-gray-50"
+                >
+                  <span className="text-gray-700">{coupon.code}</span>
+                  <span className="text-xs text-brand-blue">
+                    {copied === coupon.id ? 'Copied!' : 'Tap to copy'}
+                  </span>
+                </button>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,178 @@
+import { Link } from 'react-router-dom'
+import { LineChart, Line, ResponsiveContainer } from 'recharts'
+import { useAuthStore } from '../stores/auth.ts'
+import { mockPurchases, mockAlerts, getMockPriceHistory } from '../lib/mock-data.ts'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+const sparklineData = getMockPriceHistory('prod10').filter((p) => p.storeId === 'meijer').slice(-8)
+const milkSparkline = getMockPriceHistory('prod1').filter((p) => p.storeId === 'kroger').slice(-8)
+
+export function Dashboard() {
+  const user = useAuthStore((s) => s.user)
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+
+  const triggeredAlerts = mockAlerts.filter((a) => a.triggered)
+  const watchingAlerts = mockAlerts.filter((a) => !a.triggered)
+  const recentPurchases = mockPurchases.slice(0, 3)
+
+  if (!isAuthenticated) {
+    return (
+      <div className="py-8 text-center">
+        <h1 className="text-2xl font-bold text-gray-900">CartSnitch</h1>
+        <p className="mt-2 text-sm text-gray-500">Track prices. Save money.</p>
+        <div className="mt-8 space-y-3">
+          <Link
+            to="/login"
+            className="block min-h-12 rounded-xl bg-brand-blue px-4 py-3 text-center text-base font-medium text-white active:bg-brand-blue/90"
+          >
+            Sign In
+          </Link>
+          <Link
+            to="/register"
+            className="block min-h-12 rounded-xl border border-gray-200 px-4 py-3 text-center text-base font-medium text-gray-700 active:bg-gray-50"
+          >
+            Create Account
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900">
+        Hi, {user?.name?.split(' ')[0] ?? 'there'}
+      </h1>
+
+      {/* Triggered alerts banner */}
+      {triggeredAlerts.length > 0 && (
+        <Link
+          to="/alerts"
+          className="mt-4 flex items-center gap-3 rounded-xl bg-green-50 p-4"
+        >
+          <span className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500 text-lg text-white">
+            &#x2713;
+          </span>
+          <div>
+            <p className="text-sm font-semibold text-green-800">
+              {triggeredAlerts.length} price {triggeredAlerts.length === 1 ? 'alert' : 'alerts'} triggered!
+            </p>
+            <p className="text-xs text-green-700">
+              {triggeredAlerts.map((a) => a.productName).join(', ')}
+            </p>
+          </div>
+        </Link>
+      )}
+
+      {/* Quick stats */}
+      <div className="mt-4 grid grid-cols-2 gap-3">
+        <div className="rounded-xl bg-white p-4 shadow-sm">
+          <p className="text-xs font-medium text-gray-500">Watching</p>
+          <p className="mt-1 text-2xl font-bold text-gray-900">{watchingAlerts.length}</p>
+          <p className="text-xs text-gray-400">price alerts</p>
+        </div>
+        <div className="rounded-xl bg-white p-4 shadow-sm">
+          <p className="text-xs font-medium text-gray-500">This Month</p>
+          <p className="mt-1 text-2xl font-bold text-gray-900">
+            ${recentPurchases.reduce((sum, p) => sum + p.total, 0).toFixed(0)}
+          </p>
+          <p className="text-xs text-gray-400">grocery spend</p>
+        </div>
+      </div>
+
+      {/* Price trend sparklines */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-lg font-semibold text-gray-700">Price Trends</h2>
+        <div className="space-y-3">
+          <SparklineCard label="Eggs (dozen)" data={sparklineData} current="$5.44" />
+          <SparklineCard label="Whole Milk (1 gal)" data={milkSparkline} current="$3.29" />
+        </div>
+      </section>
+
+      {/* Recent purchases */}
+      <section className="mt-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-gray-700">Recent Purchases</h2>
+          <Link to="/purchases" className="text-sm text-brand-blue">
+            View all
+          </Link>
+        </div>
+        <div className="mt-3 space-y-3">
+          {recentPurchases.map((purchase) => (
+            <Link
+              key={purchase.id}
+              to={`/purchases/${purchase.id}`}
+              className="flex items-center gap-3 rounded-xl bg-white p-4 shadow-sm active:bg-gray-50"
+            >
+              <StoreIcon storeId={purchase.storeId} />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-gray-900">{purchase.storeName}</p>
+                <p className="text-xs text-gray-500">
+                  {new Date(purchase.date).toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                  })}{' '}
+                  &middot; {purchase.items.length} items
+                </p>
+              </div>
+              <span className="text-sm font-semibold text-gray-900">
+                ${purchase.total.toFixed(2)}
+              </span>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* Quick actions */}
+      <section className="mt-6 pb-4">
+        <h2 className="mb-3 text-lg font-semibold text-gray-700">Quick Actions</h2>
+        <div className="grid grid-cols-2 gap-3">
+          <Link
+            to="/products"
+            className="flex min-h-12 items-center justify-center rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-sm active:bg-gray-50"
+          >
+            Compare Prices
+          </Link>
+          <Link
+            to="/settings"
+            className="flex min-h-12 items-center justify-center rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-sm active:bg-gray-50"
+          >
+            Link a Store
+          </Link>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function SparklineCard({
+  label,
+  data,
+  current,
+}: {
+  label: string
+  data: { date: string; price: number }[]
+  current: string
+}) {
+  return (
+    <div className="flex items-center gap-4 rounded-xl bg-white p-4 shadow-sm">
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-gray-900">{label}</p>
+        <p className="text-lg font-bold text-gray-900">{current}</p>
+      </div>
+      <div className="h-10 w-24">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data}>
+            <Line
+              type="monotone"
+              dataKey="price"
+              stroke="#1e40af"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+export function ForgotPassword() {
+  const [email, setEmail] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (email) setSubmitted(true)
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+      <h1 className="mb-2 text-3xl font-bold text-gray-900">Reset Password</h1>
+      <p className="mb-8 max-w-sm text-center text-sm text-gray-500">
+        Enter your email and we'll send you a link to reset your password.
+      </p>
+
+      {submitted ? (
+        <div className="w-full max-w-sm rounded-xl bg-green-50 px-4 py-4 text-center">
+          <p className="text-sm text-green-700">
+            If an account exists for <strong>{email}</strong>, you'll receive a reset link shortly.
+          </p>
+          <Link
+            to="/login"
+            className="mt-4 inline-block min-h-12 rounded-xl bg-brand-blue px-6 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+          >
+            Back to Sign In
+          </Link>
+        </div>
+      ) : (
+        <form className="w-full max-w-sm space-y-4" onSubmit={handleSubmit}>
+          <input
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            autoComplete="email"
+            className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+          />
+          <button
+            type="submit"
+            className="min-h-12 w-full rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+          >
+            Send Reset Link
+          </button>
+        </form>
+      )}
+
+      <p className="mt-6 text-sm text-gray-500">
+        <Link to="/login" className="text-brand-blue">
+          Back to Sign In
+        </Link>
+      </p>
+    </div>
+  )
+}
@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth.ts'
+import { api } from '../lib/api.ts'
+import { mockUser } from '../lib/mock-data.ts'
+import type { User } from '../types/api.ts'
+
+export function Login() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const navigate = useNavigate()
+  const setAuth = useAuthStore((s) => s.setAuth)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+
+    if (!email || !password) {
+      setError('Please fill in all fields.')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await api.post<{ user: User; token: string }>('/auth/login', { email, password })
+      setAuth(res.user, res.token)
+      navigate('/')
+    } catch {
+      // Fallback to mock auth for demo
+      setAuth(mockUser, 'mock-jwt-token')
+      navigate('/')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+      <h1 className="mb-2 text-3xl font-bold text-gray-900">CartSnitch</h1>
+      <p className="mb-8 text-sm text-gray-500">Track prices. Save money.</p>
+
+      {error && (
+        <div className="mb-4 w-full max-w-sm rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      <form className="w-full max-w-sm space-y-4" onSubmit={handleSubmit}>
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoComplete="email"
+          className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="current-password"
+          className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          className="min-h-12 w-full rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90 disabled:opacity-60"
+        >
+          {loading ? 'Signing in...' : 'Sign In'}
+        </button>
+      </form>
+
+      <Link to="/forgot-password" className="mt-4 text-sm text-brand-blue">
+        Forgot password?
+      </Link>
+
+      <p className="mt-6 text-sm text-gray-500">
+        Don't have an account?{' '}
+        <Link to="/register" className="text-brand-blue">
+          Sign up
+        </Link>
+      </p>
+    </div>
+  )
+}
@@ -0,0 +1,187 @@
+import { useParams, Link } from 'react-router-dom'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { mockProducts, getMockPriceHistory } from '../lib/mock-data.ts'
+
+const storeLineColors: Record<string, string> = {
+  meijer: '#e31837',
+  kroger: '#0068a8',
+  target: '#cc0000',
+}
+
+export function ProductDetail() {
+  const { id } = useParams<{ id: string }>()
+  const product = mockProducts.find((p) => p.id === id)
+
+  if (!product) {
+    return (
+      <div className="py-8 text-center">
+        <p className="text-sm text-gray-500">Product not found.</p>
+        <Link to="/products" className="mt-4 inline-block text-sm text-brand-blue">
+          Back to products
+        </Link>
+      </div>
+    )
+  }
+
+  const history = getMockPriceHistory(product.id)
+  const lowestPrice = Math.min(...product.prices.map((p) => p.price))
+
+  // Reshape history for chart: { date, meijer, kroger, target }
+  const chartData: Record<string, string | number>[] = []
+  const dateMap = new Map<string, Record<string, string | number>>()
+  for (const h of history) {
+    if (!dateMap.has(h.date)) {
+      dateMap.set(h.date, { date: h.date })
+    }
+    dateMap.get(h.date)![h.storeId] = h.price
+  }
+  for (const entry of dateMap.values()) {
+    chartData.push(entry)
+  }
+
+  return (
+    <div>
+      {/* Back link */}
+      <Link to="/products" className="inline-flex items-center gap-1 text-sm text-brand-blue">
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        Products
+      </Link>
+
+      {/* Product header */}
+      <div className="mt-4">
+        <h1 className="text-2xl font-bold text-gray-900">{product.name}</h1>
+        <p className="text-sm text-gray-500">
+          {product.brand} &middot; {product.category}
+        </p>
+      </div>
+
+      {/* Price history chart */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-lg font-semibold text-gray-700">Price History (90 days)</h2>
+        <div className="rounded-xl bg-white p-4 shadow-sm">
+          <div className="h-52">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={chartData}>
+                <XAxis
+                  dataKey="date"
+                  tick={{ fontSize: 10 }}
+                  tickFormatter={(d: string) => {
+                    const dt = new Date(d)
+                    return `${dt.getMonth() + 1}/${dt.getDate()}`
+                  }}
+                  interval="preserveStartEnd"
+                />
+                <YAxis
+                  tick={{ fontSize: 10 }}
+                  domain={['auto', 'auto']}
+                  tickFormatter={(v: number) => `$${v.toFixed(2)}`}
+                />
+                <Tooltip
+                  formatter={(value) => `$${Number(value).toFixed(2)}`}
+                  labelFormatter={(label) =>
+                    new Date(String(label)).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                    })
+                  }
+                />
+                <Legend />
+                {['meijer', 'kroger', 'target'].map((store) => (
+                  <Line
+                    key={store}
+                    type="monotone"
+                    dataKey={store}
+                    name={store.charAt(0).toUpperCase() + store.slice(1)}
+                    stroke={storeLineColors[store]}
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                ))}
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </section>
+
+      {/* Store comparison table */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-lg font-semibold text-gray-700">Store Comparison</h2>
+        <div className="rounded-xl bg-white shadow-sm">
+          <div className="divide-y divide-gray-100">
+            {product.prices
+              .slice()
+              .sort((a, b) => a.price - b.price)
+              .map((pp) => (
+                <div
+                  key={pp.storeId}
+                  className="flex items-center justify-between px-4 py-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <span
+                      className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold text-white ${
+                        pp.storeId === 'meijer'
+                          ? 'bg-meijer-red'
+                          : pp.storeId === 'kroger'
+                            ? 'bg-kroger-blue'
+                            : 'bg-target-red'
+                      }`}
+                    >
+                      {pp.storeName.charAt(0)}
+                    </span>
+                    <div>
+                      <p className="text-sm font-medium text-gray-900">{pp.storeName}</p>
+                      <p className="text-xs text-gray-500">
+                        Updated{' '}
+                        {new Date(pp.lastUpdated).toLocaleDateString('en-US', {
+                          month: 'short',
+                          day: 'numeric',
+                        })}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p
+                      className={`text-sm font-bold ${
+                        pp.price === lowestPrice ? 'text-green-700' : 'text-gray-900'
+                      }`}
+                    >
+                      ${pp.price.toFixed(2)}
+                    </p>
+                    {pp.price === lowestPrice && (
+                      <span className="text-xs text-green-600">Best price</span>
+                    )}
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Actions */}
+      <div className="mt-6 space-y-3 pb-4">
+        <Link
+          to="/alerts"
+          className="flex min-h-12 items-center justify-center rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+        >
+          Set Price Alert
+        </Link>
+        <Link
+          to={`/compare/${product.id}`}
+          className="flex min-h-12 items-center justify-center rounded-xl border border-gray-200 px-4 py-3 text-base font-medium text-gray-700 active:bg-gray-50"
+        >
+          Compare at Nearby Stores
+        </Link>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,86 @@
+import { useState, useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import { mockProducts } from '../lib/mock-data.ts'
+
+export function Products() {
+  const [search, setSearch] = useState('')
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return mockProducts
+    const q = search.toLowerCase()
+    return mockProducts.filter(
+      (p) =>
+        p.name.toLowerCase().includes(q) ||
+        p.brand.toLowerCase().includes(q) ||
+        p.category.toLowerCase().includes(q),
+    )
+  }, [search])
+
+  const lowestPrice = (product: typeof mockProducts[0]) =>
+    Math.min(...product.prices.map((p) => p.price))
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900">Products</h1>
+
+      {/* Search input */}
+      <div className="mt-4">
+        <input
+          type="search"
+          placeholder="Search products..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="min-h-12 w-full rounded-xl border border-gray-200 bg-white px-4 text-base shadow-sm focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+        />
+      </div>
+
+      {/* Product list */}
+      <div className="mt-4 space-y-3">
+        {filtered.length === 0 ? (
+          <div className="rounded-xl bg-white p-6 text-center shadow-sm">
+            <p className="text-sm text-gray-500">No products match "{search}".</p>
+          </div>
+        ) : (
+          filtered.map((product) => {
+            const low = lowestPrice(product)
+            const cheapest = product.prices.find((p) => p.price === low)
+            return (
+              <Link
+                key={product.id}
+                to={`/products/${product.id}`}
+                className="block rounded-xl bg-white p-4 shadow-sm active:bg-gray-50"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium text-gray-900">{product.name}</p>
+                    <p className="text-xs text-gray-500">
+                      {product.brand} &middot; {product.category}
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm font-bold text-green-700">${low.toFixed(2)}</p>
+                    <p className="text-xs text-gray-500">{cheapest?.storeName}</p>
+                  </div>
+                </div>
+                <div className="mt-2 flex gap-2">
+                  {product.prices.map((pp) => (
+                    <span
+                      key={pp.storeId}
+                      className={`rounded-full px-2 py-0.5 text-xs ${
+                        pp.price === low
+                          ? 'bg-green-100 text-green-700'
+                          : 'bg-gray-100 text-gray-600'
+                      }`}
+                    >
+                      {pp.storeName} ${pp.price.toFixed(2)}
+                    </span>
+                  ))}
+                </div>
+              </Link>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,84 @@
+import { useParams, Link } from 'react-router-dom'
+import { mockPurchases } from '../lib/mock-data.ts'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+export function PurchaseDetail() {
+  const { id } = useParams<{ id: string }>()
+  const purchase = mockPurchases.find((p) => p.id === id)
+
+  if (!purchase) {
+    return (
+      <div className="py-8 text-center">
+        <p className="text-sm text-gray-500">Purchase not found.</p>
+        <Link to="/purchases" className="mt-4 inline-block text-sm text-brand-blue">
+          Back to purchases
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {/* Back link */}
+      <Link to="/purchases" className="inline-flex items-center gap-1 text-sm text-brand-blue">
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        Purchases
+      </Link>
+
+      {/* Receipt header */}
+      <div className="mt-4 rounded-xl bg-white p-4 shadow-sm">
+        <div className="flex items-center gap-3">
+          <StoreIcon storeId={purchase.storeId} />
+          <div>
+            <h1 className="text-lg font-bold text-gray-900">{purchase.storeName}</h1>
+            <p className="text-sm text-gray-500">
+              {new Date(purchase.date).toLocaleDateString('en-US', {
+                weekday: 'long',
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+              })}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Line items */}
+      <div className="mt-4 rounded-xl bg-white shadow-sm">
+        <div className="divide-y divide-gray-100">
+          {purchase.items.map((item) => (
+            <Link
+              key={item.id}
+              to={`/products/${item.productId}`}
+              className="flex items-center justify-between px-4 py-3 active:bg-gray-50"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-gray-900">{item.name}</p>
+                {item.quantity > 1 && (
+                  <p className="text-xs text-gray-500">
+                    {item.quantity} × ${item.unitPrice.toFixed(2)}
+                  </p>
+                )}
+              </div>
+              <span className="ml-4 text-sm font-medium text-gray-900">
+                ${item.price.toFixed(2)}
+              </span>
+            </Link>
+          ))}
+        </div>
+
+        {/* Total */}
+        <div className="border-t-2 border-gray-200 px-4 py-3">
+          <div className="flex items-center justify-between">
+            <span className="text-base font-bold text-gray-900">Total</span>
+            <span className="text-base font-bold text-gray-900">
+              ${purchase.total.toFixed(2)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { mockPurchases } from '../lib/mock-data.ts'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+const stores = ['all', ...new Set(mockPurchases.map((p) => p.storeName))]
+
+export function Purchases() {
+  const [storeFilter, setStoreFilter] = useState('all')
+
+  const filtered =
+    storeFilter === 'all'
+      ? mockPurchases
+      : mockPurchases.filter((p) => p.storeName === storeFilter)
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900">Purchase History</h1>
+
+      {/* Store filter chips */}
+      <div className="mt-4 flex gap-2 overflow-x-auto pb-1">
+        {stores.map((store) => (
+          <button
+            key={store}
+            onClick={() => setStoreFilter(store)}
+            className={`min-h-10 shrink-0 rounded-full px-4 text-sm font-medium ${
+              storeFilter === store
+                ? 'bg-brand-blue text-white'
+                : 'bg-white text-gray-700 shadow-sm'
+            }`}
+          >
+            {store === 'all' ? 'All Stores' : store}
+          </button>
+        ))}
+      </div>
+
+      {/* Purchase list */}
+      <div className="mt-4 space-y-3">
+        {filtered.length === 0 ? (
+          <div className="rounded-xl bg-white p-6 text-center shadow-sm">
+            <p className="text-sm text-gray-500">No purchases found for this filter.</p>
+          </div>
+        ) : (
+          filtered.map((purchase) => (
+            <Link
+              key={purchase.id}
+              to={`/purchases/${purchase.id}`}
+              className="block rounded-xl bg-white p-4 shadow-sm active:bg-gray-50"
+            >
+              <div className="flex items-center gap-3">
+                <StoreIcon storeId={purchase.storeId} />
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-gray-900">{purchase.storeName}</p>
+                  <p className="text-xs text-gray-500">
+                    {new Date(purchase.date).toLocaleDateString('en-US', {
+                      weekday: 'short',
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    })}
+                  </p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-semibold text-gray-900">${purchase.total.toFixed(2)}</p>
+                  <p className="text-xs text-gray-500">{purchase.items.length} items</p>
+                </div>
+              </div>
+
+              {/* Item preview */}
+              <p className="mt-2 truncate text-xs text-gray-400">
+                {purchase.items
+                  .slice(0, 3)
+                  .map((i) => i.name)
+                  .join(', ')}
+                {purchase.items.length > 3 && ` +${purchase.items.length - 3} more`}
+              </p>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth.ts'
+import { api } from '../lib/api.ts'
+import { mockUser } from '../lib/mock-data.ts'
+import type { User } from '../types/api.ts'
+
+export function Register() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const navigate = useNavigate()
+  const setAuth = useAuthStore((s) => s.setAuth)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+
+    if (!name || !email || !password) {
+      setError('Please fill in all fields.')
+      return
+    }
+
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters.')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await api.post<{ user: User; token: string }>('/auth/register', { name, email, password })
+      setAuth(res.user, res.token)
+      navigate('/')
+    } catch {
+      // Fallback to mock auth for demo
+      setAuth({ ...mockUser, name, email }, 'mock-jwt-token')
+      navigate('/')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+      <h1 className="mb-2 text-3xl font-bold text-gray-900">Create Account</h1>
+      <p className="mb-8 text-sm text-gray-500">Start tracking your grocery prices.</p>
+
+      {error && (
+        <div className="mb-4 w-full max-w-sm rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      <form className="w-full max-w-sm space-y-4" onSubmit={handleSubmit}>
+        <input
+          type="text"
+          placeholder="Full Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          autoComplete="name"
+          className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoComplete="email"
+          className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+        />
+        <input
+          type="password"
+          placeholder="Password (min. 8 characters)"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="new-password"
+          className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          className="min-h-12 w-full rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90 disabled:opacity-60"
+        >
+          {loading ? 'Creating account...' : 'Create Account'}
+        </button>
+      </form>
+
+      <p className="mt-6 text-sm text-gray-500">
+        Already have an account?{' '}
+        <Link to="/login" className="text-brand-blue">
+          Sign in
+        </Link>
+      </p>
+    </div>
+  )
+}
@@ -0,0 +1,134 @@
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth.ts'
+import { useThemeStore } from '../stores/theme.ts'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+export function Settings() {
+  const user = useAuthStore((s) => s.user)
+  const logout = useAuthStore((s) => s.logout)
+  const navigate = useNavigate()
+  const { theme, setTheme } = useThemeStore()
+
+  const connectedStores = user?.connectedStores ?? []
+
+  function handleSignOut() {
+    logout()
+    navigate('/login')
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
+
+      {/* Profile section */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-sm font-semibold text-gray-500">Profile</h2>
+        <div className="rounded-xl bg-white p-4 shadow-sm">
+          <div className="flex items-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-blue text-lg font-bold text-white">
+              {user?.name?.charAt(0) ?? '?'}
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium text-gray-900">{user?.name ?? 'Guest'}</p>
+              <p className="truncate text-xs text-gray-500">{user?.email ?? ''}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Connected stores */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-sm font-semibold text-gray-500">Connected Stores</h2>
+        <div className="rounded-xl bg-white shadow-sm">
+          {connectedStores.length > 0 ? (
+            <div className="divide-y divide-gray-100">
+              {connectedStores.map((storeId) => (
+                <div key={storeId} className="flex items-center gap-3 px-4 py-3">
+                  <StoreIcon storeId={storeId} size="sm" />
+                  <span className="text-sm font-medium text-gray-900 capitalize">{storeId}</span>
+                  <span className="ml-auto text-xs text-green-600">Connected</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="p-4">
+              <p className="text-sm text-gray-500">No stores connected yet.</p>
+            </div>
+          )}
+          <div className="border-t border-gray-100 p-3">
+            <Link
+              to="/account-linking"
+              className="flex min-h-12 items-center justify-center rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+            >
+              {connectedStores.length > 0 ? 'Manage Stores' : 'Connect a Store'}
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Notifications */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-sm font-semibold text-gray-500">Notifications</h2>
+        <div className="rounded-xl bg-white shadow-sm">
+          <SettingsToggle label="Price alert notifications" defaultChecked />
+          <SettingsToggle label="Weekly deals digest" defaultChecked />
+          <SettingsToggle label="Purchase import confirmations" />
+        </div>
+      </section>
+
+      {/* Appearance */}
+      <section className="mt-6">
+        <h2 className="mb-3 text-sm font-semibold text-gray-500">Appearance</h2>
+        <div className="rounded-xl bg-white shadow-sm">
+          <div className="flex gap-2 p-3">
+            {(['light', 'dark', 'system'] as const).map((t) => (
+              <button
+                key={t}
+                onClick={() => setTheme(t)}
+                className={`min-h-10 flex-1 rounded-lg px-3 py-2 text-sm font-medium capitalize ${
+                  theme === t
+                    ? 'bg-brand-blue text-white'
+                    : 'bg-gray-100 text-gray-700 active:bg-gray-200'
+                }`}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Account actions */}
+      <section className="mt-6 pb-4">
+        <h2 className="mb-3 text-sm font-semibold text-gray-500">Account</h2>
+        <div className="rounded-xl bg-white shadow-sm">
+          <button
+            onClick={handleSignOut}
+            className="min-h-12 w-full rounded-xl px-4 py-3 text-base font-medium text-red-600 active:bg-red-50"
+          >
+            Sign Out
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function SettingsToggle({
+  label,
+  defaultChecked = false,
+}: {
+  label: string
+  defaultChecked?: boolean
+}) {
+  return (
+    <label className="flex min-h-12 cursor-pointer items-center justify-between px-4 py-3">
+      <span className="text-sm text-gray-900">{label}</span>
+      <input
+        type="checkbox"
+        defaultChecked={defaultChecked}
+        className="h-5 w-5 rounded border-gray-300 text-brand-blue focus:ring-brand-blue"
+      />
+    </label>
+  )
+}
@@ -0,0 +1,93 @@
+import { useParams, Link } from 'react-router-dom'
+import { mockProducts } from '../lib/mock-data.ts'
+import { StoreIcon } from '../components/StoreIcon.tsx'
+
+export function StoreComparison() {
+  const { productId } = useParams<{ productId: string }>()
+  const product = mockProducts.find((p) => p.id === productId)
+
+  if (!product) {
+    return (
+      <div className="py-8 text-center">
+        <p className="text-sm text-gray-500">Product not found.</p>
+        <Link to="/products" className="mt-4 inline-block text-sm text-brand-blue">
+          Back to products
+        </Link>
+      </div>
+    )
+  }
+
+  const sorted = product.prices.slice().sort((a, b) => a.price - b.price)
+  const lowestPrice = sorted[0]?.price ?? 0
+  const savings = sorted.length > 1 ? sorted[sorted.length - 1].price - sorted[0].price : 0
+
+  return (
+    <div>
+      {/* Back link */}
+      <Link to={`/products/${product.id}`} className="inline-flex items-center gap-1 text-sm text-brand-blue">
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        {product.name}
+      </Link>
+
+      <h1 className="mt-4 text-2xl font-bold text-gray-900">Store Comparison</h1>
+      <p className="mt-1 text-sm text-gray-500">{product.name} &middot; {product.brand}</p>
+
+      {/* Savings banner */}
+      {savings > 0 && (
+        <div className="mt-4 rounded-xl bg-green-50 p-4">
+          <p className="text-sm font-semibold text-green-800">
+            Save ${savings.toFixed(2)} by shopping at {sorted[0].storeName}
+          </p>
+        </div>
+      )}
+
+      {/* Store comparison cards */}
+      <div className="mt-4 space-y-3">
+        {sorted.map((pp, idx) => (
+          <div
+            key={pp.storeId}
+            className={`rounded-xl p-4 shadow-sm ${
+              idx === 0 ? 'border-2 border-green-400 bg-white' : 'bg-white'
+            }`}
+          >
+            <div className="flex items-center gap-3">
+              <StoreIcon storeId={pp.storeId} />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-gray-900">{pp.storeName}</p>
+                <p className="text-xs text-gray-500">
+                  Updated{' '}
+                  {new Date(pp.lastUpdated).toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                  })}
+                </p>
+              </div>
+              <div className="text-right">
+                <p
+                  className={`text-lg font-bold ${
+                    pp.price === lowestPrice ? 'text-green-700' : 'text-gray-900'
+                  }`}
+                >
+                  ${pp.price.toFixed(2)}
+                </p>
+                {pp.price === lowestPrice ? (
+                  <span className="text-xs font-medium text-green-600">Best price</span>
+                ) : (
+                  <span className="text-xs text-gray-400">
+                    +${(pp.price - lowestPrice).toFixed(2)}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <p className="mt-6 text-center text-xs text-gray-400">
+        Prices last verified from store loyalty card data. Map view coming soon.
+      </p>
+    </div>
+  )
+}
@@ -0,0 +1,24 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { User } from '../types/api.ts'
+
+interface AuthState {
+  user: User | null
+  token: string | null
+  isAuthenticated: boolean
+  setAuth: (user: User, token: string) => void
+  logout: () => void
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+      isAuthenticated: false,
+      setAuth: (user, token) => set({ user, token, isAuthenticated: true }),
+      logout: () => set({ user: null, token: null, isAuthenticated: false }),
+    }),
+    { name: 'cartsnitch-auth' },
+  ),
+)
@@ -0,0 +1,19 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type Theme = 'light' | 'dark' | 'system'
+
+interface ThemeState {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: 'system',
+      setTheme: (theme) => set({ theme }),
+    }),
+    { name: 'cartsnitch-theme' },
+  ),
+)
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
@@ -0,0 +1,65 @@
+export interface Purchase {
+  id: string
+  storeId: string
+  storeName: string
+  date: string
+  total: number
+  items: PurchaseItem[]
+}
+
+export interface PurchaseItem {
+  id: string
+  productId: string
+  name: string
+  quantity: number
+  price: number
+  unitPrice: number
+}
+
+export interface Product {
+  id: string
+  name: string
+  brand: string
+  category: string
+  imageUrl?: string
+  prices: ProductPrice[]
+}
+
+export interface ProductPrice {
+  storeId: string
+  storeName: string
+  price: number
+  lastUpdated: string
+}
+
+export interface PriceHistory {
+  date: string
+  price: number
+  storeId: string
+}
+
+export interface Coupon {
+  id: string
+  productId?: string
+  storeName: string
+  description: string
+  discount: string
+  expiresAt: string
+  code?: string
+}
+
+export interface PriceAlert {
+  id: string
+  productId: string
+  productName: string
+  targetPrice: number
+  currentPrice: number
+  triggered: boolean
+}
+
+export interface User {
+  id: string
+  email: string
+  name: string
+  connectedStores: string[]
+}
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client", "vitest/globals"],
+    "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
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./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"]
+}
@@ -0,0 +1,66 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          recharts: ['recharts'],
+        },
+      },
+    },
+  },
+  plugins: [
+    react(),
+    tailwindcss(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https?:\/\/.*\/api\/v1\/.*/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'api-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24,
+              },
+            },
+          },
+        ],
+      },
+      manifest: {
+        name: 'CartSnitch',
+        short_name: 'CartSnitch',
+        description: 'Track prices, find coupons, and optimize your grocery shopping.',
+        theme_color: '#1e40af',
+        background_color: '#ffffff',
+        display: 'standalone',
+        start_url: '/',
+        icons: [
+          {
+            src: '/icons/icon-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/icons/icon-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: '/icons/icon-512-maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
+  ],
+})
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+  },
+})