DevLog

A real-time, full-stack issue tracker for engineering teams.

Kanban boards, live updates, and role-based access — built on the MERN stack.

Live Demo →

---

Status: Fully deployed and live — frontend on Vercel, API on Render, database on MongoDB Atlas. Register a new account or use the demo credentials below.

The API runs on Render's free tier, which sleeps after 15 minutes of inactivity. The first request after a period of idle time may take 30–50 seconds to wake up — subsequent requests are instant.

Overview

DevLog is a Linear/Jira-style issue tracker built to demonstrate a production-shaped MERN application: cookie-based JWT auth, a drag-and-drop Kanban workflow, live multi-client sync over WebSockets, and role-gated access control — all with a clean, custom-built UI (no component library).

Features

🔐 Authentication	JWT in httpOnly cookies, bcrypt-hashed passwords, register / login / logout / session restore
🗂️ Kanban board	Drag-and-drop issues across status columns via @hello-pangea/dnd
⚡ Real-time sync	Socket.io broadcasts issue changes instantly to every connected client
🎯 Issue tracking	Create, edit, and triage issues with priority and status badges
🛡️ Role-based access control	admin / developer roles, protected routes, scoped permissions
📊 Dashboard	Live project metrics and activity at a glance
👥 Team management	View and manage project members

Tech Stack

Layer	Technologies
Frontend	React 19 · Vite · React Router v7 · Tailwind CSS v4 · Axios · Socket.io-client · react-hot-toast · lucide-react
Backend	Node.js · Express 5 · MongoDB · Mongoose 9 · Socket.io · JWT · bcryptjs · cookie-parser · cors
Deployment	Vercel (frontend) · Render (API) · MongoDB Atlas (database)

Architecture

flowchart LR
    A["React + Vite\n(Vercel)"] -- "HTTPS · cookie-based JWT" --> B["Express 5 API\n(Render)"]
    B -- "WebSocket · Socket.io" --> A
    B --> C[("MongoDB Atlas")]

Loading

Project Structure

devlog/
├── client/              React + Vite frontend
│   └── src/
│       ├── pages/       Dashboard, Board, Login, Register, Team
│       ├── components/  IssueCard, KanbanColumn, Sidebar, Navbar...
│       └── context/     Auth + Socket providers
└── server/               Express + MongoDB backend
    ├── routes/           auth, projects, issues, users
    ├── models/           User, Project, Issue
    ├── middleware/       JWT verification
    └── socket/           Real-time event handling

Getting Started

Prerequisites

• Node.js 18+
• A MongoDB instance (MongoDB Atlas free tier works)

1. Clone & install

git clone https://github.com/Learnee-debug/Devlog.git
cd Devlog/devlog
npm run install:all

2. Configure environment variables

Create server/.env:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:5173
PORT=5000
NODE_ENV=development

3. Seed sample data (optional)

npm run seed

Creates two demo accounts:

Email	Password	Role
admin@devlog.com	password123	admin
dev@devlog.com	password123	developer

4. Run locally

npm run dev:server   # API   → http://localhost:5000
npm run dev:client   # App   → http://localhost:5173

API Reference

Method	Endpoint	Description
POST	/api/auth/register	Create a new account
POST	/api/auth/login	Log in, sets auth cookie
POST	/api/auth/logout	Clear auth cookie
GET	/api/auth/me	Get the current authenticated user
GET POST	/api/projects	List / create projects
GET POST PATCH	/api/issues	List / create / update issues
GET	/api/users	List team members
GET	/api/health	Health check

Deployment

Service	Provider	Notes
Frontend	Vercel	Auto-builds from client/
Backend	Render	Root: server/ · Build: npm install · Start: npm start
Database	MongoDB Atlas	—

Required production environment variables for the backend: MONGO_URI, JWT_SECRET, CLIENT_URL, NODE_ENV=production.

Security Notes

• Passwords are never stored in plaintext — hashed with bcrypt (cost factor 12) before persisting
• Auth tokens live in httpOnly, Secure, SameSite=Lax cookies — never exposed to client-side JS, immune to XSS token theft
• All cross-origin requests are locked to a single allow-listed CLIENT_URL, not a wildcard

Roadmap

• File attachments on issues
• Comment threads per issue
• Email notifications on assignment
• Activity audit log per project

Contributing

Issues and pull requests are welcome. For larger changes, please open an issue first to discuss what you'd like to change.

git checkout -b feature/your-feature
git commit -m "Add your feature"
git push origin feature/your-feature

License

Licensed under the ISC License.

---

Built by Shubham Padkonde

⭐ If this project helped you, consider giving it a star.