Matiss/basicapptest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial React Kanban app with Docker

Browse Source
This commit is contained in:
Matiss Jurevics
2026-03-11 17:23:32 +00:00
commit 1b97b8cfe1
12 changed files with 2075 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.dockerignore Normal file
View File

@@ -0,0 +1,4 @@
node_modules
dist
.git
npm-debug.log*

6
.gitignore vendored Normal file
View File

@@ -0,0 +1,6 @@
node_modules
dist
.DS_Store
npm-debug.log*
yarn-debug.log*
yarn-error.log*

14
Dockerfile Normal file
View File

@@ -0,0 +1,14 @@
FROM node:20-alpine AS build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.27-alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

43
README.md Normal file
View File

@@ -0,0 +1,43 @@
# Kanban Task Manager (React)
Simple client-side Kanban app built with React + Vite.
## Features
- Create tasks with title and description
- Move tasks across `To Do`, `In Progress`, and `Done`
- Delete tasks
- Persist all data in browser `localStorage` (no backend)
## Run locally
```bash
npm install
npm run dev
```
Open `http://localhost:5173`.
## Build
```bash
npm run build
npm run preview
```
## Run with Docker
### Docker Compose
```bash
docker compose up --build
```
Open `http://localhost:8080`.
### Plain Docker
```bash
docker build -t kanban-app .
docker run --rm -p 8080:80 kanban-app
```

5
docker-compose.yml Normal file
View File

@@ -0,0 +1,5 @@
services:
kanban-app:
build: .
ports:
- "8080:80"

12
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>Kanban Task Manager</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

1677
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "kanban-client-app",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --host"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.3",
"vite": "^5.4.10"
}
}

143
src/App.jsx Normal file
View File

@@ -0,0 +1,143 @@
import { useEffect, useMemo, useState } from "react";
const STORAGE_KEY = "kanban.tasks.v1";
const COLUMNS = [
{ id: "todo", title: "To Do" },
{ id: "in-progress", title: "In Progress" },
{ id: "done", title: "Done" }
];
function loadTasks() {
try {
const stored = localStorage.getItem(STORAGE_KEY);
return stored ? JSON.parse(stored) : [];
} catch {
return [];
}
}
function createTask(title, description) {
return {
id: crypto.randomUUID(),
title: title.trim(),
description: description.trim(),
status: "todo",
createdAt: new Date().toISOString()
};
}
export default function App() {
const [tasks, setTasks] = useState(loadTasks);
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
useEffect(() => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}, [tasks]);
const groupedTasks = useMemo(() => {
return COLUMNS.reduce((acc, column) => {
acc[column.id] = tasks.filter((task) => task.status === column.id);
return acc;
}, {});
}, [tasks]);
const addTask = (event) => {
event.preventDefault();
if (!title.trim()) {
return;
}
setTasks((current) => [createTask(title, description), ...current]);
setTitle("");
setDescription("");
};
const updateTaskStatus = (taskId, direction) => {
setTasks((current) =>
current.map((task) => {
if (task.id !== taskId) {
return task;
}
const currentIndex = COLUMNS.findIndex((column) => column.id === task.status);
const nextIndex = currentIndex + direction;
if (nextIndex < 0 || nextIndex >= COLUMNS.length) {
return task;
}
return { ...task, status: COLUMNS[nextIndex].id };
})
);
};
const removeTask = (taskId) => {
setTasks((current) => current.filter((task) => task.id !== taskId));
};
return (
<main className="app">
<header className="header">
<h1>Kanban Task Manager</h1>
<p>All data stays in your browser via localStorage.</p>
</header>
<section className="create-task">
<form onSubmit={addTask}>
<input
type="text"
placeholder="Task title"
value={title}
onChange={(event) => setTitle(event.target.value)}
aria-label="Task title"
/>
<textarea
placeholder="Task description (optional)"
value={description}
onChange={(event) => setDescription(event.target.value)}
rows={3}
aria-label="Task description"
/>
<button type="submit">Add Task</button>
</form>
</section>
<section className="board">
{COLUMNS.map((column, columnIndex) => (
<article key={column.id} className="column">
<h2>{column.title}</h2>
<div className="task-list">
{groupedTasks[column.id]?.length ? (
groupedTasks[column.id].map((task) => (
<div key={task.id} className="task">
<h3>{task.title}</h3>
{task.description && <p>{task.description}</p>}
<div className="task-actions">
<button
type="button"
onClick={() => updateTaskStatus(task.id, -1)}
disabled={columnIndex === 0}
>
←
</button>
<button
type="button"
onClick={() => updateTaskStatus(task.id, 1)}
disabled={columnIndex === COLUMNS.length - 1}
>
→
</button>
<button type="button" className="danger" onClick={() => removeTask(task.id)}>
Delete
</button>
</div>
</div>
))
) : (
<p className="empty">No tasks yet.</p>
)}
</div>
</article>
))}
</section>
</main>
);
}

136
src/index.css Normal file
View File

@@ -0,0 +1,136 @@
:root {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: #1f2937;
background: #f5f7fb;
line-height: 1.5;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.app {
max-width: 1100px;
margin: 0 auto;
padding: 24px;
}
.header h1 {
margin: 0 0 8px;
}
.header p {
margin: 0;
color: #4b5563;
}
.create-task {
margin: 20px 0;
}
.create-task form {
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 12px;
padding: 16px;
display: grid;
gap: 10px;
}
input,
textarea,
button {
font: inherit;
}
input,
textarea {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 10px 12px;
}
button {
border: none;
border-radius: 8px;
padding: 10px 12px;
background: #2563eb;
color: #ffffff;
cursor: pointer;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.board {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.column {
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 12px;
padding: 12px;
min-height: 300px;
}
.column h2 {
margin: 4px 0 12px;
font-size: 1.1rem;
}
.task-list {
display: grid;
gap: 10px;
}
.task {
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 10px;
}
.task h3 {
margin: 0 0 6px;
font-size: 1rem;
}
.task p {
margin: 0 0 10px;
color: #334155;
white-space: pre-wrap;
}
.task-actions {
display: flex;
gap: 8px;
}
.task-actions button {
padding: 6px 10px;
}
.task-actions .danger {
margin-left: auto;
background: #dc2626;
}
.empty {
margin: 0;
color: #64748b;
}
@media (max-width: 900px) {
.board {
grid-template-columns: 1fr;
}
}

10
src/main.jsx Normal file
View File

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

6
vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()]
});