Initial React Kanban app with Docker
This commit is contained in:
4
.dockerignore
Normal file
4
.dockerignore
Normal file
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
dist
|
||||
.git
|
||||
npm-debug.log*
|
||||
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
dist
|
||||
.DS_Store
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
14
Dockerfile
Normal file
14
Dockerfile
Normal 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
43
README.md
Normal 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
5
docker-compose.yml
Normal file
@@ -0,0 +1,5 @@
|
||||
services:
|
||||
kanban-app:
|
||||
build: .
|
||||
ports:
|
||||
- "8080:80"
|
||||
12
index.html
Normal file
12
index.html
Normal 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
1677
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
package.json
Normal file
19
package.json
Normal 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
143
src/App.jsx
Normal 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
136
src/index.css
Normal 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
10
src/main.jsx
Normal 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
6
vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()]
|
||||
});
|
||||
Reference in New Issue
Block a user