diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..9b8d514
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..9b7c041
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
new file mode 100644
index 0000000..2ed2ff2
--- /dev/null
+++ b/frontend/.prettierrc
@@ -0,0 +1,9 @@
+{
+ "semi": false,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5",
+ "printWidth": 80,
+ "bracketSpacing": true,
+ "arrowParens": "avoid"
+}
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..207bf93
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]
\ No newline at end of file
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..5c4780a
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,87 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+To build and run using Docker:
+
+```bash
+docker build -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│ ├── client/ # Static assets
+│ └── server/ # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.
diff --git a/frontend/app/app.css b/frontend/app/app.css
new file mode 100644
index 0000000..ba71dcb
--- /dev/null
+++ b/frontend/app/app.css
@@ -0,0 +1,59 @@
+@import 'tailwindcss';
+
+@theme {
+ --font-sans:
+ 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+ 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+ /* Captain's Log Design Tokens */
+ --color-primary-50: #eff6ff;
+ --color-primary-100: #dbeafe;
+ --color-primary-500: #3b82f6;
+ --color-primary-950: #172554;
+
+ --color-task-todo: #3b82f6;
+ --color-task-done: #22c55e;
+ --color-task-backlog: #6b7280;
+}
+
+html,
+body {
+ @apply bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
+
+/* Captain's Log Component Styles */
+.task-card {
+ @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 transition-all duration-200;
+}
+
+.task-card:hover {
+ @apply shadow-md border-gray-300 dark:border-gray-600;
+}
+
+.quick-capture {
+ @apply bg-white dark:bg-gray-800 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-4 transition-colors duration-200;
+}
+
+.quick-capture:focus-within {
+ @apply border-blue-500 bg-blue-50 dark:bg-blue-950;
+}
+
+.status-badge {
+ @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+}
+
+.status-todo {
+ @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
+}
+
+.status-done {
+ @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
+}
+
+.status-backlog {
+ @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
+}
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
new file mode 100644
index 0000000..f9f8bdf
--- /dev/null
+++ b/frontend/app/root.tsx
@@ -0,0 +1,75 @@
+import {
+ isRouteErrorResponse,
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from 'react-router'
+
+import type { Route } from './+types/root'
+import './app.css'
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+]
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+export default function App() {
+ return
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!'
+ let details = 'An unexpected error occurred.'
+ let stack: string | undefined
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error'
+ details =
+ error.status === 404
+ ? 'The requested page could not be found.'
+ : error.statusText || details
+ } else if (import.meta.env.DEV && error && error instanceof Error) {
+ details = error.message
+ stack = error.stack
+ }
+
+ return (
+
+ {message}
+ {details}
+ {stack && (
+
+ {stack}
+
+ )}
+
+ )
+}
diff --git a/frontend/app/routes.ts b/frontend/app/routes.ts
new file mode 100644
index 0000000..f8effb3
--- /dev/null
+++ b/frontend/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from '@react-router/dev/routes'
+
+export default [index('routes/home.tsx')] satisfies RouteConfig
diff --git a/frontend/app/routes/home.test.tsx b/frontend/app/routes/home.test.tsx
new file mode 100644
index 0000000..c95397e
--- /dev/null
+++ b/frontend/app/routes/home.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import Home from './home'
+
+describe('Home component', () => {
+ it('should render welcome component', () => {
+ render()
+ expect(screen.getByText(/React Router/i)).toBeInTheDocument()
+ })
+})
diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx
new file mode 100644
index 0000000..8440a09
--- /dev/null
+++ b/frontend/app/routes/home.tsx
@@ -0,0 +1,13 @@
+import type { Route } from './+types/home'
+import { Welcome } from '../welcome/welcome'
+
+export function meta(_: Route.MetaArgs) {
+ return [
+ { title: 'New React Router App' },
+ { name: 'description', content: 'Welcome to React Router!' },
+ ]
+}
+
+export default function Home() {
+ return
+}
diff --git a/frontend/app/welcome/logo-dark.svg b/frontend/app/welcome/logo-dark.svg
new file mode 100644
index 0000000..dd82028
--- /dev/null
+++ b/frontend/app/welcome/logo-dark.svg
@@ -0,0 +1,23 @@
+
diff --git a/frontend/app/welcome/logo-light.svg b/frontend/app/welcome/logo-light.svg
new file mode 100644
index 0000000..7328492
--- /dev/null
+++ b/frontend/app/welcome/logo-light.svg
@@ -0,0 +1,23 @@
+
diff --git a/frontend/app/welcome/welcome.tsx b/frontend/app/welcome/welcome.tsx
new file mode 100644
index 0000000..0444e59
--- /dev/null
+++ b/frontend/app/welcome/welcome.tsx
@@ -0,0 +1,89 @@
+import logoDark from './logo-dark.svg'
+import logoLight from './logo-light.svg'
+
+export function Welcome() {
+ return (
+
+
+
+
+
+
+
+
+
+
+