MixMatch-Inc · zakkiyyat · Aug 23, 2025 · Aug 23, 2025 · Aug 23, 2025 · Aug 23, 2025
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -5,4 +5,4 @@
   "trailingComma": "es5",
   "printWidth": 80,
   "tabWidth": 2
-}
+}
diff --git a/README.md b/README.md
@@ -1 +1 @@
-## Chordially
+## Chordially
diff --git a/app/globals.css b/app/globals.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 :root {
   --background: #ffffff;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,34 +1,25 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { MswProvider } from './msw-provider'
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'Chordially',
+  description: 'A Tinder for Music',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang='en'>
+      <body className={inter.className}>
+        <MswProvider>{children}</MswProvider>
       </body>
     </html>
-  );
+  )
 }
diff --git a/app/msw-provider.tsx b/app/msw-provider.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { ReactNode, useEffect, useState } from 'react'
+
+export function MswProvider({ children }: { children: ReactNode }) {
+  const [mswReady, setMswReady] = useState(false)
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      const initMsw = async () => {
+        const { worker } = await import('@/lib/msw/browser')
+        await worker.start()
+        setMswReady(true)
+      }
+
+      if (!mswReady) {
+        initMsw()
+      }
+    }
+  }, [mswReady])
+
+  return <>{children}</>
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,103 +1,45 @@
-import Image from "next/image";
+'use client'
+
+import { useState } from 'react'
+import type { UserProfile } from '@/lib/api-schema'
 
 export default function Home() {
+  const [data, setData] = useState<UserProfile[] | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const fetchData = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch('/api/users/potential-matches')
+      const json = await res.json()
+      setData(json.users)
+    } catch (error) {
+      console.error('Failed to fetch mock data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+    <main className='flex min-h-screen flex-col items-center p-24'>
+      <h1 className='text-4xl font-bold mb-8'>Chordially Dev Home</h1>
+
+      <button
+        onClick={fetchData}
+        disabled={loading}
+        className='bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded disabled:bg-gray-400'
+      >
+        {loading ? 'Loading...' : 'Fetch Mock User Data'}
+      </button>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+      {data && (
+        <div className='mt-8 p-4 border rounded-lg w-full max-w-2xl bg-gray-50 dark:bg-gray-800'>
+          <h2 className='text-2xl font-semibold mb-4'>Mock Data Received:</h2>
+          <pre className='text-xs overflow-auto'>
+            {JSON.stringify(data, null, 2)}
+          </pre>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
+      )}
+    </main>
+  )
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,26 +1,26 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { FlatCompat } from '@eslint/eslintrc'
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 const compat = new FlatCompat({
   baseDirectory: __dirname,
-});
+})
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
+
   {
     ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
     ],
-    extends: ["next/core-web-vitals", "prettier"]
   },
-];
+]
 
-export default eslintConfig;
+export default eslintConfig
diff --git a/frontend/ChordiallyApp/.bundle/config b/frontend/ChordiallyApp/.bundle/config
diff --git a/frontend/ChordiallyApp/.eslintrc.js b/frontend/ChordiallyApp/.eslintrc.js
diff --git a/frontend/ChordiallyApp/.gitignore b/frontend/ChordiallyApp/.gitignore
diff --git a/frontend/ChordiallyApp/.prettierrc.js b/frontend/ChordiallyApp/.prettierrc.js
diff --git a/frontend/ChordiallyApp/.watchmanconfig b/frontend/ChordiallyApp/.watchmanconfig
diff --git a/frontend/ChordiallyApp/App.tsx b/frontend/ChordiallyApp/App.tsx