diff --git a/TODO.md b/TODO.md index d649073..4637707 100644 --- a/TODO.md +++ b/TODO.md @@ -18,7 +18,7 @@ ### Frontend Setup - [x] Initialize React + Vite project - [x] Configure Tailwind CSS -- [ ] Set up React Router +- [x] Set up React Router - [ ] Create recipe list page - [ ] Create recipe detail/edit page - [ ] Implement cook mode UI @@ -46,6 +46,14 @@ ## ✅ Completed Tasks ### 2026-03-24 +- **React Router setup** + - Updated main.tsx to wrap App in BrowserRouter + - Configured routes in App.tsx with navigation header + - Created page components: RecipeListPage, RecipeDetailPage, CookModePage, NotFoundPage + - Added active link highlighting in navigation + - Defined routes: / (list), /recipe/new, /recipe/:id, /recipe/:id/cook, * (404) + - Verified build and dev server work correctly + - **Tailwind CSS configuration** - Installed Tailwind CSS v4 with PostCSS and Autoprefixer - Installed @tailwindcss/postcss plugin for v4 compatibility diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7fb199f..e830ee4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,24 +1,67 @@ +import { Routes, Route, Link, useLocation } from 'react-router-dom'; +import { RecipeListPage } from './pages/RecipeListPage'; +import { RecipeDetailPage } from './pages/RecipeDetailPage'; +import { CookModePage } from './pages/CookModePage'; +import { NotFoundPage } from './pages/NotFoundPage'; + function App() { + const location = useLocation(); + + const isActive = (path: string) => { + if (path === '/' && location.pathname === '/') return true; + if (path !== '/' && location.pathname.startsWith(path)) return true; + return false; + }; + + const linkClass = (path: string) => { + const base = "px-3 py-2 rounded-md text-sm font-medium transition-colors"; + return isActive(path) + ? `${base} bg-blue-100 text-blue-700` + : `${base} text-gray-700 hover:bg-gray-100`; + }; + return (
-
-

Recipe Manager

-

Frontend initialized and ready for development

+
+
+
+ +

Recipe Manager

+ +
+ + +
+
-
-

- ✅ Vite + React + TypeScript project created successfully. -

-

- ✅ Tailwind CSS configured and working! + + } /> + } /> + } /> + } /> + } /> + +

+ +
- ) + ); } -export default App +export default App; diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bef5202..ade9d64 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,13 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' +import { BrowserRouter } from 'react-router-dom' import './index.css' import App from './App.tsx' createRoot(document.getElementById('root')!).render( - + + + , ) diff --git a/frontend/src/pages/CookModePage.tsx b/frontend/src/pages/CookModePage.tsx new file mode 100644 index 0000000..e32ea09 --- /dev/null +++ b/frontend/src/pages/CookModePage.tsx @@ -0,0 +1,27 @@ +import { useParams } from 'react-router-dom'; + +/** + * CookModePage - Hands-free cooking interface with wake lock + */ +export function CookModePage() { + const { id } = useParams<{ id: string }>(); + + return ( +
+
+

+ Cook Mode {id && `- Recipe #${id}`} +

+

+ Step-by-step cooking interface +

+
+ +
+

+ Cook mode interface will be implemented later +

+
+
+ ); +} diff --git a/frontend/src/pages/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage.tsx new file mode 100644 index 0000000..76e1e01 --- /dev/null +++ b/frontend/src/pages/NotFoundPage.tsx @@ -0,0 +1,19 @@ +import { Link } from 'react-router-dom'; + +/** + * NotFoundPage - 404 error page + */ +export function NotFoundPage() { + return ( +
+

404

+

Page not found

+ + Back to Recipes + +
+ ); +} diff --git a/frontend/src/pages/RecipeDetailPage.tsx b/frontend/src/pages/RecipeDetailPage.tsx new file mode 100644 index 0000000..4e43f9e --- /dev/null +++ b/frontend/src/pages/RecipeDetailPage.tsx @@ -0,0 +1,27 @@ +import { useParams } from 'react-router-dom'; + +/** + * RecipeDetailPage - View and edit a single recipe + */ +export function RecipeDetailPage() { + const { id } = useParams<{ id: string }>(); + + return ( +
+
+

+ Recipe Details {id ? `#${id}` : '(New)'} +

+

+ View and edit recipe information +

+
+ +
+

+ Recipe detail/edit form will be implemented here (next task) +

+
+
+ ); +} diff --git a/frontend/src/pages/RecipeListPage.tsx b/frontend/src/pages/RecipeListPage.tsx new file mode 100644 index 0000000..c5544c1 --- /dev/null +++ b/frontend/src/pages/RecipeListPage.tsx @@ -0,0 +1,21 @@ +/** + * RecipeListPage - Displays a list of all recipes with search and filtering + */ +export function RecipeListPage() { + return ( +
+
+

My Recipes

+

+ Browse and search your recipe collection +

+
+ +
+

+ Recipe list will be implemented here (next task) +

+
+
+ ); +}