vira-velmozhna/collab-plan.astro
← projekte
const project = "collab-plan";

collab-plan

Full-Stack-Monorepo mit Next.js-Frontend und Express- + Socket.IO-Backend, inklusive Gast-Demo mit einem Klick.

Next.js 14TypeScriptTailwind CSSSocket.IOExpressMongoDBJWTVercelRender
collab-plan screenshot

Überblick

Plan Together ist eine kollaborative To-do-Liste in Echtzeit. Wird eine Liste mit einer anderen Person geteilt, sehen beide sofort, wie Aufgaben hinzugefügt, geändert und abgehakt werden — ohne Neuladen.

Ausprobieren geht ohne Registrierung: „Try the demo“ erstellt ein temporäres Gastkonto mit einer Beispielliste.

Was ich gebaut habe

  • Next.js-14-Frontend (App Router) mit TypeScript und Tailwind CSS
  • Express-REST-API mit MongoDB (Mongoose) und JWT-Authentifizierung
  • Echtzeit-Updates mit Socket.IO — jede Liste ist ein Room, Änderungen werden an alle Betrachter gepusht
  • Teilen von Listen per Benutzername, mit eigenen und geteilten Listen
  • Gastkonten mit Beispieldaten, die nach 7 Tagen automatisch gelöscht werden
  • Monorepo mit npm Workspaces; Frontend auf Vercel, Backend auf Render, Datenbank auf MongoDB Atlas