drew/captains-log
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

Set colorscheme.

Browse source
This commit is contained in:
Drew 2025-09-22 20:43:03 -07:00
parent 6ef9843835
commit 420a904efe
13 changed files with 94 additions and 1090 deletions
Download patch file Download diff file Expand all files Collapse all files

4
CLAUDE.md
View file

@ -50,11 +50,11 @@ backend/
└── migrations/ # SQLx database migrations
```
### Frontend: Vite + React + Tailwind CSS
### Frontend: Vite + React
- **Build Tool**: Vite for fast development and optimized builds
- **Framework**: React with functional components and hooks
- **Routing**: React Router for client-side navigation
- **Styling**: Tailwind CSS for rapid UI development
- **Styling**: CSS for styling
- **State Management**: React state with localStorage persistence
- **PWA Features**: Service worker for offline functionality
- **Mobile Optimization**: Touch gestures, responsive design

2
PRD.md
View file

@ -89,7 +89,7 @@
- **Build Tool**: Vite for fast development and optimized builds
- **Framework**: React with functional components and hooks
- **Routing**: React Router for client-side navigation
- **Styling**: Tailwind CSS for rapid UI development
- **Styling**: CSS for styling
- **State Management**: React state with localStorage persistence
- **PWA Features**: Service worker for offline functionality
- **Mobile Optimization**: Touch gestures, responsive design

87
frontend/README.md
View file

@ -1,87 +0,0 @@
# Welcome to React Router!
A modern, production-ready template for building full-stack React applications using React Router.
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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.

59
frontend/app/app.css
View file

@ -1,59 +1,8 @@
@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;
}
/* Captain's Log - Global Styles */
/* Base font family is handled by Material-UI theme */
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;
margin: 0;
padding: 0;
}

65
frontend/app/components/Layout.tsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'
import React, { useState } from 'react'
import {
AppBar,
Box,
@ -21,8 +21,6 @@ import {
Dashboard as DashboardIcon,
Add as AddIcon,
Settings as SettingsIcon,
DarkMode as DarkModeIcon,
LightMode as LightModeIcon,
} from '@mui/icons-material'
const drawerWidth = 240
@ -35,28 +33,11 @@ interface LayoutProps {
export default function Layout({ children, loading = false }: LayoutProps) {
const theme = useTheme()
const [mobileOpen, setMobileOpen] = useState(false)
const [darkMode, setDarkMode] = useState(false)
// Check system preference and localStorage on mount
useEffect(() => {
const savedTheme = localStorage.getItem('theme')
const prefersDark = window.matchMedia(
'(prefers-color-scheme: dark)'
).matches
setDarkMode(savedTheme === 'dark' || (!savedTheme && prefersDark))
}, [])
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen)
}
const handleThemeToggle = () => {
const newTheme = !darkMode
setDarkMode(newTheme)
localStorage.setItem('theme', newTheme ? 'dark' : 'light')
document.documentElement.classList.toggle('dark', newTheme)
}
const menuItems = [
{
text: 'Tasks',
@ -72,17 +53,7 @@ export default function Layout({ children, loading = false }: LayoutProps) {
const drawer = (
<div>
<Toolbar>
<Typography
variant="h6"
noWrap
component="div"
sx={{ fontWeight: 700 }}
>
Captain's Log
</Typography>
</Toolbar>
<List>
<List sx={{ pt: 2 }}>
{menuItems.map(item => (
<ListItem key={item.text} disablePadding>
<ListItemButton
@ -134,8 +105,10 @@ export default function Layout({ children, loading = false }: LayoutProps) {
<AppBar
position="fixed"
sx={{
width: { md: `calc(100% - ${drawerWidth}px)` },
ml: { md: `${drawerWidth}px` },
width: '100%',
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
zIndex: theme.zIndex.drawer + 1,
}}
>
<Toolbar>
@ -149,17 +122,21 @@ export default function Layout({ children, loading = false }: LayoutProps) {
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
Captain's Log
</Typography>
<IconButton
color="inherit"
onClick={handleThemeToggle}
aria-label="toggle dark mode"
<Typography
variant="h6"
noWrap
component="div"
sx={{
flexGrow: 1,
color: '#ffffff',
fontWeight: 700,
display: 'flex',
alignItems: 'center',
gap: 1,
}}
>
{darkMode ? <LightModeIcon /> : <DarkModeIcon />}
</IconButton>
⚓ Captain's Log
</Typography>
</Toolbar>
</AppBar>
@ -196,6 +173,8 @@ export default function Layout({ children, loading = false }: LayoutProps) {
'& .MuiDrawer-paper': {
boxSizing: 'border-box',
width: drawerWidth,
top: '64px', // Position below AppBar
height: 'calc(100% - 64px)', // Adjust height to account for AppBar
},
}}
open

18
frontend/app/root.tsx
View file

@ -10,7 +10,7 @@ import { ThemeProvider } from '@mui/material/styles'
import { CssBaseline } from '@mui/material'
import type { Route } from './+types/root'
import { theme, darkTheme } from './theme'
import { theme } from './theme'
import AppLayout from './components/Layout'
import './app.css'
@ -46,14 +46,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
}
export default function App() {
const isDarkMode =
typeof window !== 'undefined' &&
(localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') &&
window.matchMedia('(prefers-color-scheme: dark)').matches))
return (
<ThemeProvider theme={isDarkMode ? darkTheme : theme}>
<ThemeProvider theme={theme}>
<CssBaseline />
<AppLayout>
<Outlet />
@ -78,14 +72,8 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
stack = error.stack
}
const isDarkMode =
typeof window !== 'undefined' &&
(localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') &&
window.matchMedia('(prefers-color-scheme: dark)').matches))
return (
<ThemeProvider theme={isDarkMode ? darkTheme : theme}>
<ThemeProvider theme={theme}>
<CssBaseline />
<AppLayout>
<main className="pt-16 p-4 container mx-auto">

204
frontend/app/theme.ts
View file

@ -1,5 +1,24 @@
import { createTheme } from '@mui/material/styles'
// Color palette constants
const colors = {
// Primary Colors
deepNavy: '#1e3a5f', // Main brand color for headers and primary actions
oceanBlue: '#2c5282', // Secondary blue for links and active states
compassGold: '#d69e2e', // Accent color for highlights and call-to-actions
// Status Colors
chartGreen: '#48bb78', // Completed tasks and success states
sunsetCoral: '#f56565', // Urgent tasks and error states
seaFoam: '#4fd1c7', // Information and notification states
// Neutrals
parchment: '#f7fafc', // Clean background color
fogGray: '#e2e8f0', // Subtle borders and dividers
stormGray: '#718096', // Secondary text
anchorDark: '#2d3748', // Primary text and headings
}
declare module '@mui/material/styles' {
interface Theme {
custom: {
@ -26,29 +45,37 @@ export const theme = createTheme({
palette: {
mode: 'light',
primary: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
main: '#3b82f6',
main: colors.deepNavy,
light: colors.oceanBlue,
contrastText: '#ffffff',
},
secondary: {
main: colors.compassGold,
contrastText: '#ffffff',
},
success: {
main: colors.chartGreen,
},
error: {
main: colors.sunsetCoral,
},
info: {
main: colors.seaFoam,
},
background: {
default: '#f9fafb',
default: colors.parchment,
paper: '#ffffff',
},
text: {
primary: '#111827',
secondary: '#6b7280',
primary: colors.anchorDark,
secondary: colors.stormGray,
},
grey: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
100: '#edf2f7',
200: colors.fogGray,
300: '#cbd5e0',
500: colors.stormGray,
700: colors.anchorDark,
},
},
typography: {
@ -84,11 +111,11 @@ export const theme = createTheme({
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: '#ffffff',
color: '#111827',
backgroundColor: colors.deepNavy,
color: '#ffffff',
boxShadow:
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
borderBottom: '1px solid #e5e7eb',
borderBottom: 'none',
},
},
},
@ -96,7 +123,7 @@ export const theme = createTheme({
styleOverrides: {
paper: {
backgroundColor: '#ffffff',
borderRight: '1px solid #e5e7eb',
borderRight: `1px solid ${colors.fogGray}`,
},
},
},
@ -122,11 +149,11 @@ export const theme = createTheme({
borderRadius: '0.75rem',
boxShadow:
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
border: '1px solid #e5e7eb',
border: `1px solid ${colors.fogGray}`,
'&:hover': {
boxShadow:
'0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
borderColor: '#d1d5db',
borderColor: '#cbd5e0',
},
},
},
@ -143,138 +170,9 @@ export const theme = createTheme({
},
custom: {
task: {
todo: '#3b82f6',
done: '#22c55e',
backlog: '#6b7280',
},
},
})
export const darkTheme = createTheme({
palette: {
mode: 'dark',
primary: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
main: '#3b82f6',
contrastText: '#ffffff',
},
background: {
default: '#030712',
paper: '#1f2937',
},
text: {
primary: '#f9fafb',
secondary: '#9ca3af',
},
grey: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
},
},
typography: {
fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
h1: {
fontSize: '2rem',
fontWeight: 700,
lineHeight: 1.2,
},
h2: {
fontSize: '1.5rem',
fontWeight: 600,
lineHeight: 1.3,
},
h3: {
fontSize: '1.25rem',
fontWeight: 600,
lineHeight: 1.4,
},
body1: {
fontSize: '1rem',
lineHeight: 1.6,
},
body2: {
fontSize: '0.875rem',
lineHeight: 1.5,
},
},
shape: {
borderRadius: 12,
},
components: {
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: '#1f2937',
color: '#f9fafb',
boxShadow:
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
borderBottom: '1px solid #374151',
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: '#1f2937',
borderRight: '1px solid #374151',
},
},
},
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
borderRadius: '0.75rem',
fontWeight: 500,
},
contained: {
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'&:hover': {
boxShadow:
'0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
},
},
},
},
MuiCard: {
styleOverrides: {
root: {
backgroundColor: '#1f2937',
borderRadius: '0.75rem',
boxShadow:
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
border: '1px solid #374151',
'&:hover': {
boxShadow:
'0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
borderColor: '#4b5563',
},
},
},
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
borderRadius: '0.75rem',
},
},
},
},
},
custom: {
task: {
todo: '#3b82f6',
done: '#22c55e',
backlog: '#6b7280',
todo: colors.oceanBlue,
done: colors.chartGreen,
backlog: colors.stormGray,
},
},
})

643
frontend/package-lock.json generated
View file

@ -20,7 +20,6 @@
"devDependencies": {
"@eslint/js": "^9.36.0",
"@react-router/dev": "^7.7.1",
"@tailwindcss/vite": "^4.1.4",
"@testing-library/jest-dom": "^6.8.0",
"@testing-library/react": "^16.3.0",
"@types/eslint__js": "^8.42.3",
@ -33,7 +32,6 @@
"eslint-plugin-react-refresh": "^0.4.20",
"jsdom": "^27.0.0",
"prettier": "^3.6.2",
"tailwindcss": "^4.1.4",
"typescript": "^5.8.3",
"typescript-eslint": "^8.44.0",
"vite": "^6.3.3",
@ -1586,19 +1584,6 @@
"node": ">=12"
}
},
"node_modules/@isaacs/fs-minipass": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
"integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
"dev": true,
"license": "ISC",
"dependencies": {
"minipass": "^7.0.4"
},
"engines": {
"node": ">=18.0.0"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@ -2463,283 +2448,6 @@
"win32"
]
},
"node_modules/@tailwindcss/node": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
"integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/remapping": "^2.3.4",
"enhanced-resolve": "^5.18.3",
"jiti": "^2.5.1",
"lightningcss": "1.30.1",
"magic-string": "^0.30.18",
"source-map-js": "^1.2.1",
"tailwindcss": "4.1.13"
}
},
"node_modules/@tailwindcss/oxide": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
"integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
"detect-libc": "^2.0.4",
"tar": "^7.4.3"
},
"engines": {
"node": ">= 10"
},
"optionalDependencies": {
"@tailwindcss/oxide-android-arm64": "4.1.13",
"@tailwindcss/oxide-darwin-arm64": "4.1.13",
"@tailwindcss/oxide-darwin-x64": "4.1.13",
"@tailwindcss/oxide-freebsd-x64": "4.1.13",
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
"@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
"@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
"@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
"@tailwindcss/oxide-linux-x64-musl": "4.1.13",
"@tailwindcss/oxide-wasm32-wasi": "4.1.13",
"@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
"@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
}
},
"node_modules/@tailwindcss/oxide-android-arm64": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
"integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-darwin-arm64": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
"integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-darwin-x64": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
"integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-freebsd-x64": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
"integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
"integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
"integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
"integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
"integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-x64-musl": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
"integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-wasm32-wasi": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
"integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
"bundleDependencies": [
"@napi-rs/wasm-runtime",
"@emnapi/core",
"@emnapi/runtime",
"@tybys/wasm-util",
"@emnapi/wasi-threads",
"tslib"
],
"cpu": [
"wasm32"
],
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"@emnapi/core": "^1.4.5",
"@emnapi/runtime": "^1.4.5",
"@emnapi/wasi-threads": "^1.0.4",
"@napi-rs/wasm-runtime": "^0.2.12",
"@tybys/wasm-util": "^0.10.0",
"tslib": "^2.8.0"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
"integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
"integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/vite": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.13.tgz",
"integrity": "sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@tailwindcss/node": "4.1.13",
"@tailwindcss/oxide": "4.1.13",
"tailwindcss": "4.1.13"
},
"peerDependencies": {
"vite": "^5.2.0 || ^6 || ^7"
}
},
"node_modules/@testing-library/dom": {
"version": "10.4.1",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@ -3830,16 +3538,6 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/chownr": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
"integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
"dev": true,
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=18"
}
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@ -4161,16 +3859,6 @@
"npm": "1.2.8000 || >= 1.4.16"
}
},
"node_modules/detect-libc": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
"integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">=8"
}
},
"node_modules/dom-accessibility-api": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@ -4239,20 +3927,6 @@
"node": ">= 0.8"
}
},
"node_modules/enhanced-resolve": {
"version": "5.18.3",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
"integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
"dev": true,
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.4",
"tapable": "^2.2.0"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/entities": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@ -5060,13 +4734,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"dev": true,
"license": "ISC"
},
"node_modules/graphemer": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@ -5379,16 +5046,6 @@
"@pkgjs/parseargs": "^0.11.0"
}
},
"node_modules/jiti": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
"integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "lib/jiti-cli.mjs"
}
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -5528,245 +5185,6 @@
"node": ">= 0.8.0"
}
},
"node_modules/lightningcss": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
"integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
"dev": true,
"license": "MPL-2.0",
"dependencies": {
"detect-libc": "^2.0.3"
},
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"lightningcss-darwin-arm64": "1.30.1",
"lightningcss-darwin-x64": "1.30.1",
"lightningcss-freebsd-x64": "1.30.1",
"lightningcss-linux-arm-gnueabihf": "1.30.1",
"lightningcss-linux-arm64-gnu": "1.30.1",
"lightningcss-linux-arm64-musl": "1.30.1",
"lightningcss-linux-x64-gnu": "1.30.1",
"lightningcss-linux-x64-musl": "1.30.1",
"lightningcss-win32-arm64-msvc": "1.30.1",
"lightningcss-win32-x64-msvc": "1.30.1"
}
},
"node_modules/lightningcss-darwin-arm64": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
"integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-darwin-x64": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
"integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-freebsd-x64": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
"integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-arm-gnueabihf": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
"integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
"cpu": [
"arm"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-arm64-gnu": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
"integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-arm64-musl": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
"integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-x64-gnu": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
"integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-x64-musl": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
"integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-win32-arm64-msvc": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
"integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-win32-x64-msvc": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
"integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@ -6011,19 +5429,6 @@
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/minizlib": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
"integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
"dev": true,
"license": "MIT",
"dependencies": {
"minipass": "^7.1.2"
},
"engines": {
"node": ">= 18"
}
},
"node_modules/morgan": {
"version": "1.10.1",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.1.tgz",
@ -7442,54 +6847,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/tailwindcss": {
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
"integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
"dev": true,
"license": "MIT"
},
"node_modules/tapable": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
"integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/tar": {
"version": "7.4.4",
"resolved": "https://registry.npmjs.org/tar/-/tar-7.4.4.tgz",
"integrity": "sha512-O1z7ajPkjTgEgmTGz0v9X4eqeEXTDREPTO77pVC1Nbs86feBU1Zhdg+edzavPmYW1olxkwsqA2v4uOw6E8LeDg==",
"dev": true,
"license": "ISC",
"dependencies": {
"@isaacs/fs-minipass": "^4.0.0",
"chownr": "^3.0.0",
"minipass": "^7.1.2",
"minizlib": "^3.1.0",
"yallist": "^5.0.0"
},
"engines": {
"node": ">=18"
}
},
"node_modules/tar/node_modules/yallist": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
"integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
"dev": true,
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=18"
}
},
"node_modules/tinybench": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",

2
frontend/package.json
View file

@ -30,7 +30,6 @@
"devDependencies": {
"@eslint/js": "^9.36.0",
"@react-router/dev": "^7.7.1",
"@tailwindcss/vite": "^4.1.4",
"@testing-library/jest-dom": "^6.8.0",
"@testing-library/react": "^16.3.0",
"@types/eslint__js": "^8.42.3",
@ -43,7 +42,6 @@
"eslint-plugin-react-refresh": "^0.4.20",
"jsdom": "^27.0.0",
"prettier": "^3.6.2",
"tailwindcss": "^4.1.4",
"typescript": "^5.8.3",
"typescript-eslint": "^8.44.0",
"vite": "^6.3.3",

76
frontend/tailwind.config.js
View file

@ -1,76 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./app/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
fontFamily: {
sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
},
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
success: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
},
warning: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
},
danger: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
},
},
spacing: {
'18': '4.5rem',
'88': '22rem',
},
borderRadius: {
'xl': '0.75rem',
'2xl': '1rem',
},
boxShadow: {
'card': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
},
},
},
plugins: [],
}

3
frontend/vite.config.ts
View file

@ -1,10 +1,9 @@
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
plugins: [reactRouter(), tsconfigPaths()],
server: {
proxy: {
"/api": {

17
plan/01_CORE_MVP/frontend.md
View file

@ -1,7 +1,7 @@
# Frontend MVP Implementation Plan
## Overview
This plan details the concrete implementation steps for the Captain's Log frontend MVP using Vite + React + TypeScript + Tailwind CSS with comprehensive testing infrastructure.
This plan details the concrete implementation steps for the Captain's Log frontend MVP using Vite + React + TypeScript with comprehensive testing infrastructure.
## Project Structure (Planned Implementation)
```
@ -15,7 +15,7 @@ captains-log/
├── package.json # Node.js project manifest
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── index.html # Entry HTML file
├── src/
│ ├── main.tsx # Application entry point
@ -35,7 +35,7 @@ captains-log/
│ ├── types/
│ │ └── task.ts # TypeScript type definitions
│ └── styles/
│ └── index.css # Tailwind imports and custom styles
│ └── index.css # CSS imports and custom styles
└── tests/
└── components/ # Component unit tests
```
@ -45,16 +45,16 @@ captains-log/
### Task 1.1: Initialize Frontend Project
- [x] **File**: `frontend/package.json`
- Create new Vite + React + TypeScript project
- Add dependencies: react, react-dom, react-router-dom, tailwindcss, @types/*
- Add dependencies: react, react-dom, react-router-dom, @types/*
- Add dev dependencies: vitest, @testing-library/react, @testing-library/jest-dom
- Configure scripts for dev, build, test, lint
- **Expected outcome**: `npm install` succeeds
### Task 1.2: Setup Build Tools and Configuration
- [x] **Files**: `frontend/vite.config.ts`, `frontend/tsconfig.json`, `frontend/tailwind.config.js`
- [x] **Files**: `frontend/vite.config.ts`, `frontend/tsconfig.json`, `frontend/postcss.config.js`
- Configure Vite with React plugin and proxy to backend
- Setup TypeScript with strict mode and path aliases
- Configure Tailwind CSS with custom design tokens
- Configure CSS styling framework
- Setup Vitest for testing
- **Expected outcome**: `npm run dev` starts frontend development server
@ -107,13 +107,13 @@ captains-log/
## Phase 3: Core Components (Days 5-6)
**UI Framework**: Use Material-UI (MUI) for consistent design system and components alongside Tailwind CSS for custom styling.
**UI Framework**: Use Material-UI (MUI) for consistent design system and components alongside CSS for custom styling.
### Task 3.1: Main App Component and Routing
- [ ] **Files**: `frontend/src/App.tsx`, `frontend/src/main.tsx`
- Setup React Router with basic navigation
- Create main layout with MUI AppBar/Drawer and task area
- Implement responsive design with MUI breakpoints and Tailwind utilities
- Implement responsive design with MUI breakpoints and CSS
- Add MUI loading states (CircularProgress) and error boundaries
- Configure MUI theme with custom colors
- **Expected outcome**: Full application loads and navigates properly with Material Design
@ -235,7 +235,6 @@ captains-log/
"@vitejs/plugin-react": "^4.3.0",
"vite": "^5.4.0",
"typescript": "^5.5.0",
"tailwindcss": "^3.4.0",
"vitest": "^2.0.0",
"@testing-library/react": "^16.0.0",
"@testing-library/jest-dom": "^6.5.0"

4
plan/01_CORE_MVP/plan.md
View file

@ -34,7 +34,7 @@ CREATE TABLE tasks (
);
```
#### Frontend: Vite + React + Tailwind
#### Frontend: Vite + React
- Single-page task management interface with React Router
- Quick capture form with React hooks
- Task list with inline editing using React components
@ -81,7 +81,7 @@ CREATE TABLE tasks (
#### Week 2: Frontend Foundation
1. **Vite + React Setup**
- Initialize Vite project with React template
- Configure Tailwind CSS
- Configure CSS styling
- Setup React Router for navigation
- Setup API client utilities
- **Testing**: Setup Vitest, React Testing Library, and Playwright