codepath · rijulpoudel · Jul 5, 2026 · Jul 5, 2026 · Jul 13, 2026 · Jul 13, 2026
diff --git a/.DS_Store b/.DS_Store
diff --git a/Code/.gitignore b/Code/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Code/client/index.html b/Code/client/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MatchLens</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.jsx"></script>
+  </body>
+</html>
diff --git a/Code/client/src/App.css b/Code/client/src/App.css
@@ -0,0 +1,3 @@
+.app {
+  min-height: 100vh;
+}
diff --git a/Code/client/src/App.jsx b/Code/client/src/App.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { useRoutes } from 'react-router-dom'
+import Login from './pages/Login'
+import Home from './pages/Home'
+import './App.css'
+
+const App = () => {
+  let element = useRoutes([
+    {
+      path: '/',
+      element: <Login title='MatchLens | Sign In' />
+    },
+    {
+      path: '/home',
+      element: <Home title='MatchLens | Home' />
+    }
+  ])
+
+  return (
+    <div className='app'>
+      { element }
+    </div>
+  )
+}
+
+export default App
diff --git a/Code/client/src/components/Navigation.jsx b/Code/client/src/components/Navigation.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import '../css/Navigation.css'
+
+const liveScores = [
+    { home: 'MCI', hs: 2, away: 'LIV', as: 1, time: "72'" },
+    { home: 'RMA', hs: 0, away: 'FCB', as: 0, time: 'HT' },
+    { home: 'PSG', hs: 3, away: 'BAY', as: 2, time: "88'" }
+]
+
+const Navigation = () => {
+    const navigate = useNavigate()
+
+    const handleSignOut = () => {
+        localStorage.removeItem('matchlens_user')
+        navigate('/')
+    }
+
+    return (
+        <header className='ml-header'>
+            <nav className='ml-nav'>
+                <div className='ml-nav-left'>
+                    <Link to='/home' className='ml-logo'>MatchLens</Link>
+                    <ul className='ml-nav-links'>
+                        <li><Link to='/home' className='active'>Home</Link></li>
+                        <li><a href='#' onClick={(e) => e.preventDefault()}>Matches</a></li>
+                        <li><a href='#' onClick={(e) => e.preventDefault()}>Players &amp; Teams</a></li>
+                        <li><a href='#' onClick={(e) => e.preventDefault()}>Fan Leaderboard</a></li>
+                    </ul>
+                </div>
+                <div className='ml-nav-right'>
+                    <input type='search' placeholder='Search matches...' className='ml-search' />
+                    <button className='ml-icon-btn' title='Notifications'>🔔</button>
+                    <button className='ml-icon-btn' title='Sign out' onClick={handleSignOut}>👤</button>
+                </div>
+            </nav>
+
+            <div className='ml-ticker'>
+                {liveScores.map((match, index) => (
+                    <span key={index} className='ml-ticker-item'>
+                        <span className='ml-live-dot'>●</span>
+                        <span className='ml-live-label'>LIVE</span>
+                        <span className='ml-ticker-teams'>
+                            {match.home} <strong>{match.hs} - {match.as}</strong> {match.away}
+                        </span>
+                        <span className='ml-ticker-time'>{match.time}</span>
+                    </span>
+                ))}
+            </div>
+        </header>
+    )
+}
+
+export default Navigation