SAV MERN Demo — Realtime Kanban
Full-stack MERN build • JWT (HttpOnly) • Socket.IO realtime sync • Deployed on Vercel + Render
Summary
- Stack: Next.js 14 (App Router) + Express + MongoDB + Socket.IO + TypeScript
- Focus: Scalable full-stack design, realtime UX, and secure cookie-based authentication
- Infra: Dockerized MongoDB + GitHub Actions CI/CD + Deployed to Render (API) and Vercel (Web)
System Architecture
Request flow: Frontend (Next.js) → Express API → MongoDB, with Socket.IO rooms for realtime updates per project.
Key Features Implemented
- Auth: Secure login with JWT in HttpOnly cookies (CORS-safe across domains)
- Realtime Sync: Socket.IO rooms (project:{id}) for instant Kanban board updates across users
- Database: Mongoose models for User, Project, and Task with atomic updates
- Frontend: Next.js App Router + React 18 + drag/drop Kanban interface
- DevOps: Docker Compose (MongoDB + Mongo Express) and GitHub Actions CI with test pipeline
Deployment
- Frontend: Vercel (Next.js)
- Backend: Render (Express API)
- Database: MongoDB Atlas cluster
- CI/CD: GitHub Actions — Build, Test, Deploy
Want a similar system built?
I build full-stack SaaS platforms and realtime dashboards with secure infrastructure and fast time to market.
Schedule a Consultation