Upload 36 files

.dockerignore

@@ -0,0 +1 @@
+node_modules

.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

Dockerfile

@@ -0,0 +1,92 @@
+###################################################
+# Stage: base
+# 
+# This base stage ensures all other stages are using the same base image
+# and provides common configuration for all stages, such as the working dir.
+###################################################
+FROM node:20 AS base
+WORKDIR /usr/local/app
+
+################## CLIENT STAGES ##################
+
+###################################################
+# Stage: client-base
+#
+# This stage is used as the base for the client-dev and client-build stages,
+# since there are common steps needed for each.
+###################################################
+FROM base AS client-base
+COPY client/package.json client/yarn.lock ./
+RUN --mount=type=cache,id=yarn,target=/usr/local/share/.cache/yarn \
+    yarn install
+COPY client/.eslintrc.cjs client/index.html client/vite.config.js ./
+COPY client/public ./public
+COPY client/src ./src
+
+###################################################
+# Stage: client-dev
+# 
+# This stage is used for development of the client application. It sets 
+# the default command to start the Vite development server.
+###################################################
+FROM client-base AS client-dev
+CMD ["yarn", "dev"]
+
+###################################################
+# Stage: client-build
+#
+# This stage builds the client application, producing static HTML, CSS, and
+# JS files that can be served by the backend.
+###################################################
+FROM client-base AS client-build
+RUN yarn build
+
+
+
+
+###################################################
+################  BACKEND STAGES  #################
+###################################################
+
+###################################################
+# Stage: backend-base
+#
+# This stage is used as the base for the backend-dev and test stages, since
+# there are common steps needed for each.
+###################################################
+FROM base AS backend-dev
+COPY backend/package.json backend/yarn.lock ./
+RUN --mount=type=cache,id=yarn,target=/usr/local/share/.cache/yarn \
+    yarn install --frozen-lockfile
+COPY backend/spec ./spec
+COPY backend/src ./src
+CMD ["yarn", "dev"]
+
+###################################################
+# Stage: test
+#
+# This stage runs the tests on the backend. This is split into a separate
+# stage to allow the final image to not have the test dependencies or test
+# cases.
+###################################################
+FROM backend-dev AS test
+RUN yarn test
+
+###################################################
+# Stage: final
+#
+# This stage is intended to be the final "production" image. It sets up the
+# backend and copies the built client application from the client-build stage.
+#
+# It pulls the package.json and yarn.lock from the test stage to ensure that
+# the tests run (without this, the test stage would simply be skipped).
+###################################################
+FROM base AS final
+ENV NODE_ENV=production
+COPY --from=test /usr/local/app/package.json /usr/local/app/yarn.lock ./
+RUN --mount=type=cache,id=yarn,target=/usr/local/share/.cache/yarn \
+    yarn install --production --frozen-lockfile
+COPY backend/src ./src
+COPY --from=client-build /usr/local/app/dist ./src/static
+EXPOSE 3000
+CMD ["node", "src/index.js"]

backend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "format": "prettier -l --write \"**/*.js\"",
+    "format-check": "prettier --check \"**/*.js\"",
+    "test": "jest",
+    "dev": "nodemon src/index.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "mysql2": "^3.9.1",
+    "sqlite3": "^5.1.7",
+    "uuid": "^9.0.1",
+    "wait-port": "^1.1.0"
+  },
+  "resolutions": {
+    "@babel/core": "7.23.9"
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true
+  },
+  "devDependencies": {
+    "jest": "^29.7.0",
+    "nodemon": "^3.0.3",
+    "prettier": "^3.2.4"
+  }
+}

backend/spec/persistence/sqlite.spec.js

@@ -0,0 +1,65 @@
+const db = require('../../src/persistence/sqlite');
+const fs = require('fs');
+const location = process.env.SQLITE_DB_LOCATION || '/etc/todos/todo.db';
+
+const ITEM = {
+    id: '7aef3d7c-d301-4846-8358-2a91ec9d6be3',
+    name: 'Test',
+    completed: false,
+};
+
+beforeEach(() => {
+    if (fs.existsSync(location)) {
+        fs.unlinkSync(location);
+    }
+});
+
+test('it initializes correctly', async () => {
+    await db.init();
+});
+
+test('it can store and retrieve items', async () => {
+    await db.init();
+
+    await db.storeItem(ITEM);
+
+    const items = await db.getItems();
+    expect(items.length).toBe(1);
+    expect(items[0]).toEqual(ITEM);
+});
+
+test('it can update an existing item', async () => {
+    await db.init();
+
+    const initialItems = await db.getItems();
+    expect(initialItems.length).toBe(0);
+
+    await db.storeItem(ITEM);
+
+    await db.updateItem(
+        ITEM.id,
+        Object.assign({}, ITEM, { completed: !ITEM.completed }),
+    );
+
+    const items = await db.getItems();
+    expect(items.length).toBe(1);
+    expect(items[0].completed).toBe(!ITEM.completed);
+});
+
+test('it can remove an existing item', async () => {
+    await db.init();
+    await db.storeItem(ITEM);
+
+    await db.removeItem(ITEM.id);
+
+    const items = await db.getItems();
+    expect(items.length).toBe(0);
+});
+
+test('it can get a single item', async () => {
+    await db.init();
+    await db.storeItem(ITEM);
+
+    const item = await db.getItem(ITEM.id);
+    expect(item).toEqual(ITEM);
+});

backend/spec/routes/addItem.spec.js

@@ -0,0 +1,30 @@
+const db = require('../../src/persistence');
+const addItem = require('../../src/routes/addItem');
+const ITEM = { id: 12345 };
+const { v4: uuid } = require('uuid');
+
+jest.mock('uuid', () => ({ v4: jest.fn() }));
+
+jest.mock('../../src/persistence', () => ({
+    removeItem: jest.fn(),
+    storeItem: jest.fn(),
+    getItem: jest.fn(),
+}));
+
+test('it stores item correctly', async () => {
+    const id = 'something-not-a-uuid';
+    const name = 'A sample item';
+    const req = { body: { name } };
+    const res = { send: jest.fn() };
+
+    uuid.mockReturnValue(id);
+
+    await addItem(req, res);
+
+    const expectedItem = { id, name, completed: false };
+
+    expect(db.storeItem.mock.calls.length).toBe(1);
+    expect(db.storeItem.mock.calls[0][0]).toEqual(expectedItem);
+    expect(res.send.mock.calls[0].length).toBe(1);
+    expect(res.send.mock.calls[0][0]).toEqual(expectedItem);
+});

backend/spec/routes/deleteItem.spec.js

@@ -0,0 +1,20 @@
+const db = require('../../src/persistence');
+const deleteItem = require('../../src/routes/deleteItem');
+const ITEM = { id: 12345 };
+
+jest.mock('../../src/persistence', () => ({
+    removeItem: jest.fn(),
+    getItem: jest.fn(),
+}));
+
+test('it removes item correctly', async () => {
+    const req = { params: { id: 12345 } };
+    const res = { sendStatus: jest.fn() };
+
+    await deleteItem(req, res);
+
+    expect(db.removeItem.mock.calls.length).toBe(1);
+    expect(db.removeItem.mock.calls[0][0]).toBe(req.params.id);
+    expect(res.sendStatus.mock.calls[0].length).toBe(1);
+    expect(res.sendStatus.mock.calls[0][0]).toBe(200);
+});

backend/spec/routes/getItems.spec.js

@@ -0,0 +1,19 @@
+const db = require('../../src/persistence');
+const getItems = require('../../src/routes/getItems');
+const ITEMS = [{ id: 12345 }];
+
+jest.mock('../../src/persistence', () => ({
+    getItems: jest.fn(),
+}));
+
+test('it gets items correctly', async () => {
+    const req = {};
+    const res = { send: jest.fn() };
+    db.getItems.mockReturnValue(Promise.resolve(ITEMS));
+
+    await getItems(req, res);
+
+    expect(db.getItems.mock.calls.length).toBe(1);
+    expect(res.send.mock.calls[0].length).toBe(1);
+    expect(res.send.mock.calls[0][0]).toEqual(ITEMS);
+});

backend/spec/routes/updateItem.spec.js

@@ -0,0 +1,33 @@
+const db = require('../../src/persistence');
+const updateItem = require('../../src/routes/updateItem');
+const ITEM = { id: 12345 };
+
+jest.mock('../../src/persistence', () => ({
+    getItem: jest.fn(),
+    updateItem: jest.fn(),
+}));
+
+test('it updates items correctly', async () => {
+    const req = {
+        params: { id: 1234 },
+        body: { name: 'New title', completed: false },
+    };
+    const res = { send: jest.fn() };
+
+    db.getItem.mockReturnValue(Promise.resolve(ITEM));
+
+    await updateItem(req, res);
+
+    expect(db.updateItem.mock.calls.length).toBe(1);
+    expect(db.updateItem.mock.calls[0][0]).toBe(req.params.id);
+    expect(db.updateItem.mock.calls[0][1]).toEqual({
+        name: 'New title',
+        completed: false,
+    });
+
+    expect(db.getItem.mock.calls.length).toBe(1);
+    expect(db.getItem.mock.calls[0][0]).toBe(req.params.id);
+
+    expect(res.send.mock.calls[0].length).toBe(1);
+    expect(res.send.mock.calls[0][0]).toEqual(ITEM);
+});

backend/src/index.js

@@ -0,0 +1,36 @@
+const express = require('express');
+const app = express();
+const db = require('./persistence');
+const getGreeting = require('./routes/getGreeting');
+const getItems = require('./routes/getItems');
+const addItem = require('./routes/addItem');
+const updateItem = require('./routes/updateItem');
+const deleteItem = require('./routes/deleteItem');
+
+app.use(express.json());
+app.use(express.static(__dirname + '/static'));
+
+app.get('/api/greeting', getGreeting);
+app.get('/api/items', getItems);
+app.post('/api/items', addItem);
+app.put('/api/items/:id', updateItem);
+app.delete('/api/items/:id', deleteItem);
+
+db.init()
+    .then(() => {
+        app.listen(3000, () => console.log('Listening on port 3000'));
+    })
+    .catch((err) => {
+        console.error(err);
+        process.exit(1);
+    });
+
+const gracefulShutdown = () => {
+    db.teardown()
+        .catch(() => {})
+        .then(() => process.exit());
+};
+
+process.on('SIGINT', gracefulShutdown);
+process.on('SIGTERM', gracefulShutdown);
+process.on('SIGUSR2', gracefulShutdown); // Sent by nodemon

backend/src/persistence/index.js

@@ -0,0 +1,2 @@
+if (process.env.MYSQL_HOST) module.exports = require('./mysql');
+else module.exports = require('./sqlite');

backend/src/persistence/mysql.js

@@ -0,0 +1,135 @@
+const waitPort = require('wait-port');
+const fs = require('fs');
+const mysql = require('mysql2');
+
+const {
+    MYSQL_HOST: HOST,
+    MYSQL_HOST_FILE: HOST_FILE,
+    MYSQL_USER: USER,
+    MYSQL_USER_FILE: USER_FILE,
+    MYSQL_PASSWORD: PASSWORD,
+    MYSQL_PASSWORD_FILE: PASSWORD_FILE,
+    MYSQL_DB: DB,
+    MYSQL_DB_FILE: DB_FILE,
+} = process.env;
+
+let pool;
+
+async function init() {
+    const host = HOST_FILE ? fs.readFileSync(HOST_FILE) : HOST;
+    const user = USER_FILE ? fs.readFileSync(USER_FILE) : USER;
+    const password = PASSWORD_FILE ? fs.readFileSync(PASSWORD_FILE) : PASSWORD;
+    const database = DB_FILE ? fs.readFileSync(DB_FILE) : DB;
+
+    await waitPort({
+        host,
+        port: 3306,
+        timeout: 10000,
+        waitForDns: true,
+    });
+
+    pool = mysql.createPool({
+        connectionLimit: 5,
+        host,
+        user,
+        password,
+        database,
+        charset: 'utf8mb4',
+    });
+
+    return new Promise((acc, rej) => {
+        pool.query(
+            'CREATE TABLE IF NOT EXISTS todo_items (id varchar(36), name varchar(255), completed boolean) DEFAULT CHARSET utf8mb4',
+            (err) => {
+                if (err) return rej(err);
+
+                console.log(`Connected to mysql db at host ${HOST}`);
+                acc();
+            },
+        );
+    });
+}
+
+async function teardown() {
+    return new Promise((acc, rej) => {
+        pool.end((err) => {
+            if (err) rej(err);
+            else acc();
+        });
+    });
+}
+
+async function getItems() {
+    return new Promise((acc, rej) => {
+        pool.query('SELECT * FROM todo_items', (err, rows) => {
+            if (err) return rej(err);
+            acc(
+                rows.map((item) =>
+                    Object.assign({}, item, {
+                        completed: item.completed === 1,
+                    }),
+                ),
+            );
+        });
+    });
+}
+
+async function getItem(id) {
+    return new Promise((acc, rej) => {
+        pool.query('SELECT * FROM todo_items WHERE id=?', [id], (err, rows) => {
+            if (err) return rej(err);
+            acc(
+                rows.map((item) =>
+                    Object.assign({}, item, {
+                        completed: item.completed === 1,
+                    }),
+                )[0],
+            );
+        });
+    });
+}
+
+async function storeItem(item) {
+    return new Promise((acc, rej) => {
+        pool.query(
+            'INSERT INTO todo_items (id, name, completed) VALUES (?, ?, ?)',
+            [item.id, item.name, item.completed ? 1 : 0],
+            (err) => {
+                if (err) return rej(err);
+                acc();
+            },
+        );
+    });
+}
+
+async function updateItem(id, item) {
+    return new Promise((acc, rej) => {
+        pool.query(
+            'UPDATE todo_items SET name=?, completed=? WHERE id=?',
+            [item.name, item.completed ? 1 : 0, id],
+            (err) => {
+                if (err) return rej(err);
+                acc();
+            },
+        );
+    });
+}
+
+async function removeItem(id) {
+    return new Promise((acc, rej) => {
+        pool.query('DELETE FROM todo_items WHERE id = ?', [id], (err) => {
+            if (err) return rej(err);
+            acc();
+        });
+    });
+}
+
+module.exports = {
+    init,
+    teardown,
+    getItems,
+    getItem,
+    storeItem,
+    updateItem,
+    removeItem,
+};

backend/src/persistence/sqlite.js

@@ -0,0 +1,113 @@
+const sqlite3 = require('sqlite3').verbose();
+const fs = require('fs');
+const location = process.env.SQLITE_DB_LOCATION || '/etc/todos/todo.db';
+
+let db, dbAll, dbRun;
+
+function init() {
+    const dirName = require('path').dirname(location);
+    if (!fs.existsSync(dirName)) {
+        fs.mkdirSync(dirName, { recursive: true });
+    }
+
+    return new Promise((acc, rej) => {
+        db = new sqlite3.Database(location, (err) => {
+            if (err) return rej(err);
+
+            if (process.env.NODE_ENV !== 'test')
+                console.log(`Using sqlite database at ${location}`);
+
+            db.run(
+                'CREATE TABLE IF NOT EXISTS todo_items (id varchar(36), name varchar(255), completed boolean)',
+                (err, result) => {
+                    if (err) return rej(err);
+                    acc();
+                },
+            );
+        });
+    });
+}
+
+async function teardown() {
+    return new Promise((acc, rej) => {
+        db.close((err) => {
+            if (err) rej(err);
+            else acc();
+        });
+    });
+}
+
+async function getItems() {
+    return new Promise((acc, rej) => {
+        db.all('SELECT * FROM todo_items', (err, rows) => {
+            if (err) return rej(err);
+            acc(
+                rows.map((item) =>
+                    Object.assign({}, item, {
+                        completed: item.completed === 1,
+                    }),
+                ),
+            );
+        });
+    });
+}
+
+async function getItem(id) {
+    return new Promise((acc, rej) => {
+        db.all('SELECT * FROM todo_items WHERE id=?', [id], (err, rows) => {
+            if (err) return rej(err);
+            acc(
+                rows.map((item) =>
+                    Object.assign({}, item, {
+                        completed: item.completed === 1,
+                    }),
+                )[0],
+            );
+        });
+    });
+}
+
+async function storeItem(item) {
+    return new Promise((acc, rej) => {
+        db.run(
+            'INSERT INTO todo_items (id, name, completed) VALUES (?, ?, ?)',
+            [item.id, item.name, item.completed ? 1 : 0],
+            (err) => {
+                if (err) return rej(err);
+                acc();
+            },
+        );
+    });
+}
+
+async function updateItem(id, item) {
+    return new Promise((acc, rej) => {
+        db.run(
+            'UPDATE todo_items SET name=?, completed=? WHERE id = ?',
+            [item.name, item.completed ? 1 : 0, id],
+            (err) => {
+                if (err) return rej(err);
+                acc();
+            },
+        );
+    });
+}
+
+async function removeItem(id) {
+    return new Promise((acc, rej) => {
+        db.run('DELETE FROM todo_items WHERE id = ?', [id], (err) => {
+            if (err) return rej(err);
+            acc();
+        });
+    });
+}
+
+module.exports = {
+    init,
+    teardown,
+    getItems,
+    getItem,
+    storeItem,
+    updateItem,
+    removeItem,
+};

backend/src/routes/addItem.js

@@ -0,0 +1,13 @@
+const db = require('../persistence');
+const { v4: uuid } = require('uuid');
+
+module.exports = async (req, res) => {
+    const item = {
+        id: uuid(),
+        name: req.body.name,
+        completed: false,
+    };
+
+    await db.storeItem(item);
+    res.send(item);
+};

backend/src/routes/deleteItem.js

@@ -0,0 +1,6 @@
+const db = require('../persistence');
+
+module.exports = async (req, res) => {
+    await db.removeItem(req.params.id);
+    res.sendStatus(200);
+};

backend/src/routes/getGreeting.js

@@ -0,0 +1,7 @@
+const GREETING = 'Hello world!';
+
+module.exports = async (req, res) => {
+    res.send({
+        greeting: GREETING,
+    });
+};

backend/src/routes/getItems.js

@@ -0,0 +1,6 @@
+const db = require('../persistence');
+
+module.exports = async (req, res) => {
+    const items = await db.getItems();
+    res.send(items);
+};

backend/src/routes/updateItem.js

@@ -0,0 +1,10 @@
+const db = require('../persistence');
+
+module.exports = async (req, res) => {
+    await db.updateItem(req.params.id, {
+        name: req.body.name,
+        completed: req.body.completed,
+    });
+    const item = await db.getItem(req.params.id);
+    res.send(item);
+};

client/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+    ],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+    settings: { react: { version: '18.2' } },
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': [
+            'warn',
+            { allowConstantExport: true },
+        ],
+    },
+};

client/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

client/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Lato&display=swap"
+            rel="stylesheet"
+        />
+        <title>Todo App</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.jsx"></script>
+    </body>
+</html>

client/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host=0.0.0.0",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "format": "prettier --write \"**/*.jsx\"",
+    "format-check": "prettier --check \"**/*.js\""
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free-regular": "^5.0.13",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "bootstrap": "^5.3.2",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.70.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.2.4",
+    "vite": "^5.0.8"
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true
+  }
+}

client/src/App.jsx

@@ -0,0 +1,20 @@
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import { TodoListCard } from './components/TodoListCard';
+import { Greeting } from './components/Greeting';
+
+function App() {
+    return (
+        <Container>
+            <Row>
+                <Col md={{ offset: 3, span: 6 }}>
+                    <Greeting />
+                    <TodoListCard />
+                </Col>
+            </Row>
+        </Container>
+    );
+}
+
+export default App;

client/src/components/AddNewItemForm.jsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+export function AddItemForm({ onNewItem }) {
+    const [newItem, setNewItem] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+
+    const submitNewItem = (e) => {
+        e.preventDefault();
+        setSubmitting(true);
+
+        const options = {
+            method: 'POST',
+            body: JSON.stringify({ name: newItem }),
+            headers: { 'Content-Type': 'application/json' },
+        };
+
+        fetch('/api/items', options)
+            .then((r) => r.json())
+            .then((item) => {
+                onNewItem(item);
+                setSubmitting(false);
+                setNewItem('');
+            });
+    };
+
+    return (
+        <Form onSubmit={submitNewItem}>
+            <InputGroup className="mb-3">
+                <Form.Control
+                    value={newItem}
+                    onChange={(e) => setNewItem(e.target.value)}
+                    type="text"
+                    placeholder="New Item"
+                    aria-label="New item"
+                />
+                <Button
+                    type="submit"
+                    variant="success"
+                    disabled={!newItem.length}
+                    className={submitting ? 'disabled' : ''}
+                >
+                    {submitting ? 'Adding...' : 'Add Item'}
+                </Button>
+            </InputGroup>
+        </Form>
+    );
+}
+
+AddItemForm.propTypes = {
+    onNewItem: PropTypes.func,
+};

client/src/components/Greeting.jsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export function Greeting() {
+    const [greeting, setGreeting] = useState(null);
+
+    useEffect(() => {
+        fetch('/api/greeting')
+            .then((res) => res.json())
+            .then((data) => setGreeting(data.greeting));
+    }, [setGreeting]);
+
+    if (!greeting) return null;
+
+    return <h1 className="text-center mb-5">{greeting}</h1>;
+}

client/src/components/ItemDisplay.jsx

@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
+import faCheckSquare from '@fortawesome/fontawesome-free-regular/faCheckSquare';
+import faSquare from '@fortawesome/fontawesome-free-regular/faSquare';
+import './ItemDisplay.scss';
+
+export function ItemDisplay({ item, onItemUpdate, onItemRemoval }) {
+    const toggleCompletion = () => {
+        fetch(`/api/items/${item.id}`, {
+            method: 'PUT',
+            body: JSON.stringify({
+                name: item.name,
+                completed: !item.completed,
+            }),
+            headers: { 'Content-Type': 'application/json' },
+        })
+            .then((r) => r.json())
+            .then(onItemUpdate);
+    };
+
+    const removeItem = () => {
+        fetch(`/api/items/${item.id}`, { method: 'DELETE' }).then(() =>
+            onItemRemoval(item),
+        );
+    };
+
+    return (
+        <Container fluid className={`item ${item.completed && 'completed'}`}>
+            <Row>
+                <Col xs={2} className="text-center">
+                    <Button
+                        className="toggles"
+                        size="sm"
+                        variant="link"
+                        onClick={toggleCompletion}
+                        aria-label={
+                            item.completed
+                                ? 'Mark item as incomplete'
+                                : 'Mark item as complete'
+                        }
+                    >
+                        <FontAwesomeIcon
+                            icon={item.completed ? faCheckSquare : faSquare}
+                        />
+                        <i
+                            className={`far ${
+                                item.completed ? 'fa-check-square' : 'fa-square'
+                            }`}
+                        />
+                    </Button>
+                </Col>
+                <Col xs={8} className="name">
+                    {item.name}
+                </Col>
+                <Col xs={2} className="text-center remove">
+                    <Button
+                        size="sm"
+                        variant="link"
+                        onClick={removeItem}
+                        aria-label="Remove Item"
+                    >
+                        <FontAwesomeIcon
+                            icon={faTrash}
+                            className="text-danger"
+                        />
+                    </Button>
+                </Col>
+            </Row>
+        </Container>
+    );
+}
+
+ItemDisplay.propTypes = {
+    item: PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+        completed: PropTypes.bool,
+    }),
+    onItemUpdate: PropTypes.func,
+    onItemRemoval: PropTypes.func,
+};

client/src/components/ItemDisplay.scss

@@ -0,0 +1,33 @@
+.item {
+    background-color: white;
+    padding: 15px;
+    margin-bottom: 15px;
+    border: transparent;
+    border-radius: 5px;
+    box-shadow: 0 0 1em #ccc;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+        box-shadow: 0 0 1em #aaa;
+    }
+
+    &.completed {
+        text-decoration: line-through;
+    }
+}
+
+.toggles {
+    color: black;
+}
+
+.name {
+    padding-top: 3px;
+}
+
+.remove {
+    padding-left: 0;
+}
+
+button:focus {
+    border: 1px solid #333;
+}

client/src/components/TodoListCard.jsx

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from 'react';
+import { AddItemForm } from './AddNewItemForm';
+import { ItemDisplay } from './ItemDisplay';
+
+export function TodoListCard() {
+    const [items, setItems] = useState(null);
+
+    useEffect(() => {
+        fetch('/api/items')
+            .then((r) => r.json())
+            .then(setItems);
+    }, []);
+
+    const onNewItem = useCallback(
+        (newItem) => {
+            setItems([...items, newItem]);
+        },
+        [items],
+    );
+
+    const onItemUpdate = useCallback(
+        (item) => {
+            const index = items.findIndex((i) => i.id === item.id);
+            setItems([
+                ...items.slice(0, index),
+                item,
+                ...items.slice(index + 1),
+            ]);
+        },
+        [items],
+    );
+
+    const onItemRemoval = useCallback(
+        (item) => {
+            const index = items.findIndex((i) => i.id === item.id);
+            setItems([...items.slice(0, index), ...items.slice(index + 1)]);
+        },
+        [items],
+    );
+
+    if (items === null) return 'Loading...';
+
+    return (
+        <>
+            <AddItemForm onNewItem={onNewItem} />
+            {items.length === 0 && (
+                <p className="text-center">No items yet! Add one above!</p>
+            )}
+            {items.map((item) => (
+                <ItemDisplay
+                    key={item.id}
+                    item={item}
+                    onItemUpdate={onItemUpdate}
+                    onItemRemoval={onItemRemoval}
+                />
+            ))}
+        </>
+    );
+}

client/src/index.scss

@@ -0,0 +1,7 @@
+@import 'bootstrap/scss/bootstrap';
+
+body {
+    background-color: #f4f4f4;
+    margin-top: 50px;
+    font-family: 'Lato';
+}

client/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);

client/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+});

compose.yml

@@ -0,0 +1,176 @@
+###################################################
+# This Compose file provides the development environment for the todo app.
+# 
+# Seeing the final version of the application bundles the frontend with the
+# backend, we are able to "simulate" that by using a proxy to route requests
+# to the appropriate service. All requests to /api will be routed to the 
+# backend while all other requests will be sent to the client service. While
+# there is some overlap in the routing rules, the proxy determines the service
+# based on the most specific rule.
+#
+# To support easier debugging and troubleshooting, phpMyAdmin is also included
+# to provide a web interface to the MySQL database.
+###################################################
+
+###################################################
+# Services
+#
+# The services define the individual components of our application stack.
+# For each service, a separate container will be launched.
+###################################################
+services:
+
+  ###################################################
+  # Service: proxy
+  #
+  # This service is a reverse proxy that will route requests to the appropriate
+  # service. Think of it like a HTTP router or a load balancer. It simply 
+  # forwards requests and allows us to simulate the final version of the 
+  # application where the frontend and backend are bundled together. We can 
+  # also use it to route requests to phpMyAdmin, which won't be accessible at 
+  # localhost, but at db.localhost.
+  #
+  # The image for this service comes directly from Docker Hub and is a Docker
+  # Official Image. Since Traefik can be configured in a variety of ways, we
+  # configure it here to watch the Docker events for new containers and to use
+  # their labels for configuration. That's why the Docker socket is mounted.
+  #
+  # We also expose port 80 to connect to the proxy from the host machine.
+  ###################################################
+  proxy:
+    image: traefik:v2.11
+    command: --providers.docker
+    ports:
+      - 80:80
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+
+  ###################################################
+  # Service: backend
+  # 
+  # This service is the Node.js server that provides the API for the app.
+  # When the container starts, it will use the image that results
+  # from building the Dockerfile, targeting the backend-dev stage.
+  #
+  # The Compose Watch configuration is used to automatically sync the code
+  # from the host machine to the container. This allows the server to be
+  # automatically reloaded when code changes are made.
+  #
+  # The environment variables configure the application to connect to the
+  # database, which is also configured in this Compose file. We obviously
+  # wouldn't hard-code these values in a production environment. But, in
+  # dev, these values are fine.
+  #
+  # Finally, the labels are used to configure Traefik (the reverse proxy) with
+  # the appropriate routing rules. In this case, all requests to localhost/api/*
+  # will be forwarded to this service's port 3000. 
+  ###################################################
+  backend:
+    build:
+      context: ./
+      target: backend-dev
+    environment:
+      MYSQL_HOST: mysql
+      MYSQL_USER: root
+      MYSQL_PASSWORD: secret
+      MYSQL_DB: todos
+    develop:
+      watch:
+        - path: ./backend/src
+          action: sync
+          target: /usr/local/app/src
+        - path: ./backend/package.json
+          action: rebuild
+    labels:
+      traefik.http.routers.backend.rule: Host(`localhost`) && PathPrefix(`/api`)
+      traefik.http.services.backend.loadbalancer.server.port: 3000
+
+  ###################################################
+  # Service: client
+  #
+  # The client service is the React app that provides the frontend for the app.
+  # When the container starts, it will use the image that results from building
+  # the Dockerfile, targeting the dev stage.
+  #
+  # The Compose Watch configuration is used to automatically sync the code from
+  # the host machine to the container. This allows the client to be automatically
+  # reloaded when code changes are made.
+  # 
+  # The labels are used to configure Traefik (the reverse proxy) with the 
+  # appropriate routing rules. In this case, all requests to localhost will be
+  # forwarded to this service's port 5173.
+  ###################################################
+  client:
+    build:
+      context: ./
+      target: client-dev
+    develop:
+      watch:
+        - path: ./client/src
+          action: sync
+          target: /usr/local/app/src
+        - path: ./client/package.json
+          action: rebuild
+    labels:
+      traefik.http.routers.client.rule: Host(`localhost`)
+      traefik.http.services.client.loadbalancer.server.port: 5173
+
+
+  ###################################################
+  # Service: mysql
+  #
+  # The MySQL service is used to provide the database for the application.
+  # The image for this service comes directly from Docker Hub and is a Docker 
+  # Official Image.
+  
+  # The data is persisted in a volume named todo-mysql-data. Using a volume 
+  # allows us to take down the services without losing the data. When we start
+  # the services again, the data will still be there (assuming we didn't delete
+  # the volume, of course!).
+  #
+  # The environment variables configure the root password and the name of the
+  # database to create. Since these are used only for local development, it's
+  # ok to hard-code them here.
+  ###################################################
+  mysql:
+    image: mysql:8.0
+    volumes:
+      - todo-mysql-data:/var/lib/mysql
+    environment: 
+      MYSQL_ROOT_PASSWORD: secret
+      MYSQL_DATABASE: todos
+
+  ###################################################
+  # Service: phpmyadmin
+  #
+  # This service provides a web interface to the MySQL database. It's useful
+  # for debugging and troubleshooting data, schemas, and more. The image for 
+  # this service comes directly from Docker Hub and is a Docker Official Image.
+  #
+  # The environment variables configure the connection to the database and 
+  # provide the default credentials, letting us immediately open the interface
+  # without needing to log in.
+  #
+  # The labels are used to configure Traefik (the reverse proxy) with the
+  # routing rules. In this case, all requests to db.localhost will be forwarded
+  # to this service's port 80.
+  ###################################################
+  phpmyadmin:
+    image: phpmyadmin
+    environment:
+      PMA_HOST: mysql
+      PMA_USER: root
+      PMA_PASSWORD: secret
+    labels:
+      traefik.http.routers.phpmyadmin.rule: Host(`db.localhost`)
+      traefik.http.services.phpmyadmin.loadbalancer.server.port: 80
+
+###################################################
+# Volumes
+#
+# For this application stack, we only have one volume. It's used to persist the
+# data for the MySQL service. We are only going to use the default values,
+# hence the lack of any configuration for the volume.
+###################################################
+volumes:
+  todo-mysql-data: