init

frontend/src/App.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
+import CollectionMap from './components/CollectionMap'
+import WatchedMap from './components/WatchedMap'
+import './App.css'
+
+function App() {
+  return (
+    <Router>
+      <div className="app">
+        <NavBar />
+        <Routes>
+          <Route path="/" element={<CollectionMap />} />
+          <Route path="/watched" element={<WatchedMap />} />
+        </Routes>
+      </div>
+    </Router>
+  )
+}
+
+function NavBar() {
+  const location = useLocation()
+  
+  return (
+    <nav className="navbar">
+      <div className="nav-container">
+        <h1 className="nav-title">Movie Map</h1>
+        <div className="nav-links">
+          <Link 
+            to="/" 
+            className={location.pathname === '/' ? 'active' : ''}
+          >
+            Collection Map
+          </Link>
+          <Link 
+            to="/watched" 
+            className={location.pathname === '/watched' ? 'active' : ''}
+          >
+            Watched Map
+          </Link>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default App
+