A production-ready, real-time Agile Retrospective tool built to help remote teams collaborate effortlessly. Teams can create rooms, brainstorm ideas on drag-and-drop sticky notes, vote on items, and see updates synchronize instantly across all clients.
- Instant Real-Time Sync: Powered by WebSockets for instantaneous multi-user collaboration.
- Persistent Rooms: Agile boards are stored permanently using Mongoose schemas.
- Interactive Fluid Layout: Smooth interactive behaviors built across frontend viewports.
- Secure Environment Isolation: Decoupled architecture with strict production environment variable configurations.
| Layer | Technology | Usage |
|---|---|---|
| Frontend | React (Vite) | Component-driven UI framework |
| Styling | Inline CSS & Global Mixins | Clean modern styling layouts |
| Real-time | Socket.io | Bidirectional event-driven communication |
| Backend | Node.js / Express | Robust REST routing & server controllers |
| Database | MongoDB & Mongoose | Cloud document store with object data modeling |
| Deployment | Vercel & Render | Decoupled client-server static and cloud container hosting |
RetroSync/
├── backend/ # Express server, Socket.io events, & Mongoose schemas
│ ├── config.env # Local sensitive credentials (ignored by Git)
│ ├── index.js # Server initialization & gateway listeners
│ └── models/ # Database models (e.g., Note.js)
│
└── frontend/ # Vite React SPA client application
├── src/ # Component lifecycle logic
│ ├── components/ # Modular presentation UI
│ └── context/ # Global shared state hook wrappers
└── dist/ # Production minified bundle destination
- Node.js (v16 or higher)
- MongoDB Atlas Account
Step 1: Navigate to the backend directory
cd backendStep 2: Install backend dependencies
npm installStep 3: Create a config.env file in the backend/ root directory
DATABASE_PASS=your_mongodb_cluster_passwordStep 4: Fire up the local development server
npm startStep 1: Navigate to the frontend directory
cd ../frontendStep 2: Install frontend dependencies
npm installStep 3: Launch the development server
npm run devStep 4: Open your browser to http://localhost:5173.
- Live Client Link: https://retro-sync-olive.vercel.app
- API Socket Server: Hosted securely via automated Render web app container pipelines.
💡 Note on Free-Tier Hosting: The backend server is hosted on a free cloud container. If the application has been inactive, it may take roughly 50-60 seconds for the engine instance to spin up on your first connection request.