iswa/budget-app
1
0
Fork 0
Code Issues Pull Requests 7 Actions Packages Projects Releases Wiki Activity

Add Docker Compose project scaffold

Browse Source 
Sets up the full monorepo structure with:
- Multi-stage Dockerfile (client-build + production stages)
- docker-compose.yml for production, docker-compose.dev.yml overlay for development
- Express server (port 3000) with pg pool, health route, and SPA static file serving
- React 18 + Vite client with react-router-dom v6, nav bar, and placeholder page components
- .env.example with PostgreSQL and app config
- Empty db/migrations/ directory for future migrations
- CLAUDE.md updated with development workflow commands

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Iswa Iswa
2026-03-19 19:02:17 -04:00
parent 24d22ad850
commit 83abac52f6
21 changed files with 271 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.claude/settings.local.json Normal file
View File

@@ -0,0 +1,14 @@
{
"permissions": {
"allow": [
"Bash(td --help)",
"Bash(td create:*)",
"Bash(EPIC=td-8064d2)",
"Bash(__NEW_LINE_51256bdd53dfa89e__ td:*)",
"Bash(td list:*)",
"Bash(git add:*)",
"Bash(git commit:*)",
"Bash(td start:*)"
]
}
}

5
.env.example Normal file
View File

@@ -0,0 +1,5 @@
POSTGRES_USER=budget
POSTGRES_PASSWORD=budget
POSTGRES_DB=budget
DATABASE_URL=postgresql://budget:budget@db:5432/budget
PORT=3000

22
CLAUDE.md
View File

@@ -24,3 +24,25 @@ td session --new # force a new session in the same terminal context
``` ```
Task state is stored in `.todos/issues.db` (SQLite). Task state is stored in `.todos/issues.db` (SQLite).
## Development
**Run production stack (Docker):**
```bash
docker compose up
```
**Run development stack with live reload (Docker):**
```bash
docker compose -f docker-compose.yml -f docker-compose.dev.yml up
```
**Frontend only (Vite dev server):**
```bash
cd client && npm install && npm run dev
```
**Backend only (nodemon):**
```bash
cd server && npm install && npm run dev
```

27
Dockerfile Normal file
View File

@@ -0,0 +1,27 @@
# Stage 1: build the React client
FROM node:20-alpine AS client-build
WORKDIR /app/client
COPY client/package.json ./
RUN npm install
COPY client/ ./
RUN npm run build
# Stage 2: production server
FROM node:20-alpine AS production
WORKDIR /app/server
COPY server/package.json ./
RUN npm install --omit=dev
COPY server/ ./
# Copy built client assets
COPY --from=client-build /app/client/dist /app/client/dist
EXPOSE 3000
CMD ["node", "src/index.js"]

12
client/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Budget</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

18
client/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "budget-client",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.23.1"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.0",
"vite": "^5.2.11"
}
}

32
client/src/App.jsx Normal file
View File

@@ -0,0 +1,32 @@
import { Routes, Route, NavLink } from 'react-router-dom';
import PaycheckView from './pages/PaycheckView.jsx';
import Bills from './pages/Bills.jsx';
import Settings from './pages/Settings.jsx';
import MonthlySummary from './pages/MonthlySummary.jsx';
import AnnualOverview from './pages/AnnualOverview.jsx';
function App() {
return (
<div>
<nav style={{ display: 'flex', gap: '1rem', padding: '1rem', borderBottom: '1px solid #ccc' }}>
<NavLink to="/">Paycheck</NavLink>
<NavLink to="/bills">Bills</NavLink>
<NavLink to="/settings">Settings</NavLink>
<NavLink to="/summary/monthly">Monthly Summary</NavLink>
<NavLink to="/summary/annual">Annual Overview</NavLink>
</nav>
<main style={{ padding: '1rem' }}>
<Routes>
<Route path="/" element={<PaycheckView />} />
<Route path="/bills" element={<Bills />} />
<Route path="/settings" element={<Settings />} />
<Route path="/summary/monthly" element={<MonthlySummary />} />
<Route path="/summary/annual" element={<AnnualOverview />} />
</Routes>
</main>
</div>
);
}
export default App;

12
client/src/main.jsx Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

5
client/src/pages/AnnualOverview.jsx Normal file
View File

@@ -0,0 +1,5 @@
function AnnualOverview() {
return <div><h1>Annual Overview</h1><p>Placeholder — coming soon.</p></div>;
}
export default AnnualOverview;

5
client/src/pages/Bills.jsx Normal file
View File

@@ -0,0 +1,5 @@
function Bills() {
return <div><h1>Bills</h1><p>Placeholder — coming soon.</p></div>;
}
export default Bills;

5
client/src/pages/MonthlySummary.jsx Normal file
View File

@@ -0,0 +1,5 @@
function MonthlySummary() {
return <div><h1>Monthly Summary</h1><p>Placeholder — coming soon.</p></div>;
}
export default MonthlySummary;

5
client/src/pages/PaycheckView.jsx Normal file
View File

@@ -0,0 +1,5 @@
function PaycheckView() {
return <div><h1>Paycheck View</h1><p>Placeholder — coming soon.</p></div>;
}
export default PaycheckView;

5
client/src/pages/Settings.jsx Normal file
View File

@@ -0,0 +1,5 @@
function Settings() {
return <div><h1>Settings</h1><p>Placeholder — coming soon.</p></div>;
}
export default Settings;

11
client/vite.config.js Normal file
View File

@@ -0,0 +1,11 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': 'http://localhost:3001',
},
},
});

0
db/migrations/.gitkeep Normal file
View File

9
docker-compose.dev.yml Normal file
View File

@@ -0,0 +1,9 @@
services:
app:
volumes:
- ./server:/app/server
- ./client:/app/client
ports:
- "5173:5173"
environment:
NODE_ENV: development

24
docker-compose.yml Normal file
View File

@@ -0,0 +1,24 @@
services:
db:
image: postgres:16-alpine
restart: unless-stopped
environment:
POSTGRES_USER: ${POSTGRES_USER}
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
POSTGRES_DB: ${POSTGRES_DB}
volumes:
- pgdata:/var/lib/postgresql/data
app:
build: .
restart: unless-stopped
depends_on:
- db
ports:
- "3000:3000"
environment:
DATABASE_URL: ${DATABASE_URL}
PORT: ${PORT}
volumes:
pgdata:

18
server/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "budget-server",
"version": "1.0.0",
"main": "src/index.js",
"scripts": {
"start": "node src/index.js",
"dev": "nodemon src/index.js"
},
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"pg": "^8.11.5"
},
"devDependencies": {
"nodemon": "^3.1.0"
}
}

7
server/src/db.js Normal file
View File

@@ -0,0 +1,7 @@
const { Pool } = require('pg');
const pool = new Pool({
connectionString: process.env.DATABASE_URL,
});
module.exports = pool;

27
server/src/index.js Normal file
View File

@@ -0,0 +1,27 @@
require('dotenv').config();
const express = require('express');
const cors = require('cors');
const path = require('path');
const healthRouter = require('./routes/health');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(cors());
app.use(express.json());
// API routes
app.use('/api', healthRouter);
// Serve static client files in production
const clientDist = path.join(__dirname, '../../client/dist');
app.use(express.static(clientDist));
// SPA fallback — send index.html for any unmatched route
app.get('*', (req, res) => {
res.sendFile(path.join(clientDist, 'index.html'));
});
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});

8
server/src/routes/health.js Normal file
View File

@@ -0,0 +1,8 @@
const express = require('express');
const router = express.Router();
router.get('/health', (req, res) => {
res.status(200).json({ status: 'ok' });
});
module.exports = router;