Local Jira-Style Project Manager

A local single-user Jira-style Kanban app built with vanilla HTML/CSS/JS and a minimal Node.js backend for file persistence.

Stack

• Frontend: public/index.html, public/style.css, public/app.js
• Backend: server.js (Node.js built-in http + fs, no external packages)
• Persistence: data.json

Features

• Project sidebar with create, edit (right-click), delete, and task counts
• Kanban board with statuses: To Do, In Progress, In Review, Testing, Done
• Drag-and-drop task movement with immediate write to data.json
• Task detail modal for full edit/delete
• Create task globally or per column
• Live search and filters (type, assignee, status)
• Toggle for all-project board view
• Overview dashboard with status totals, project breakdown, and recent updates
• Project-specific assignees managed at project level and reused in task forms
• Dark mode by default with light mode toggle
• Lightweight iconography and local SVG favicon
• Quick color palette in project modal (20 preset colors + custom picker)
• Optional project links: GitHub repo and live demo URL

Run

1. Make sure Node.js 18+ is installed.
2. Start the server from project root:

node server.js

3. Open(WRONG):

http://localhost:3002

4. Via Nginx:

http://127.0.0.1/jira/

Deploy Behind Nginx

If you serve this through Nginx, make sure /api/ is proxied to Node.

server {
  listen 80;
  server_name your-domain-or-ip;

  location /api/ {
    proxy_pass http://127.0.0.1:3002;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  location / {
    proxy_pass http://127.0.0.1:3002;
  }
}

Optional: Separate Frontend and API Origins

If frontend and API are on different origins:

1. Start server with CORS origin allowed:
   • CORS_ORIGIN=https://your-frontend-domain node server.js
2. Set API base in public/index.html before app.js:

<script>
  window.__API_BASE_URL__ = "https://your-api-domain";
</script>
<script src="app.js"></script>

API

• GET /api/data -> reads data.json
• PUT /api/data -> overwrites data.json with { projects: [], tasks: [] }
• GET /api/health -> { service, status, port }

Every create/update/delete/status move triggers an immediate PUT /api/data.