Loom isn't just another social app; it’s a high-performance, real-time ecosystem built for the next gen of creators. We’re talking glassmorphic UI, ultra-low latency chats, and a clean-as-hell experience. Connect, share, and vibe in real-time.
| Frontend 🎨 | Backend ⚙️ | Infrastructure ☁️ |
|---|---|---|
| React 19 (Vite-powered) | Node.js & Express v5+ | MongoDB (Mongoose) |
| Redux Toolkit (State God) | Redis (Speed Demon) | Cloudinary (Media Hub) |
| Tailwind CSS + DaisyUI | Socket.io (Real-time) | Brevo (Email/OTP) |
| Lucide Icons | JWT Auth (Secure AF) | Jest/Supertest (QA) |
- OTP Verification: Secure email-based onboarding. No bots allowed.
- JWT Persistence: Secure
httpOnlycookies. Your session, your rules. - Bcrypt Protection: Industry-standard hashing. Password security is 10/10.
- Dynamic Portfolios: Showcase your bio, age, and vibes.
- Real-time Edits: Update your profile pic via Cloudinary in a snap.
- Discovery: Search for your squad with a debounced, high-speed algorithm.
- Connection System: Swipe-style requests.
Interested,Accepted, orIgnored. - Live Feed: A tailor-made scroll of content from people you actually care about.
- Optimistic Likes: Double-tap and watch the count jump instantly. Speed is the priority.
- DM System: Instant messaging that actually feels instant.
- Live Notifications: Get that "New Connection" or "New Like" hit the second it happens.
- Live Status: See who's online and vibing in real-time.
"Clean code is the only way."
- Modular Controllers: Logic is separated. Routes stay clean. Scalability is baked in.
- Security Middleware:
Helmetfor that extra shield.Express-Rate-Limitto stop the spammers.Mongo-Sanitizeto keep the DB clean from NoSQL injections.
- Redis Caching: Frequently accessed feeds are stored in RAM. Zero lag, all gas.
To ensure stability and maintainability, the DevTinder engineering team adheres to the following standards:
- Route Guard Parity: Route redirection (like
/signupto/complete-profileor/) must explicitly check user states (isProfileCompleted, verification status) to avoid deadlocks. - Cookie Policy Unification: All authentication cookies (Login, Logout, OTP verification) share a unified options object ensuring standard flags like
httpOnly,secure(production), andsameSiteare consistently applied across environments. - Strict React Hooks Dependencies: We enforce complete dependency arrays in
useEffect. Async operations inside hooks are memoized viauseCallbackto prevent cascading renders and infinite loops. - Functional State Updates: Components use functional state updates (
setState(prev => ...)) especially in effect-driven actions to avoid stale closures. - Test Configuration Parity: The backend test environment uses dedicated configuration (
config/test.json) mirroring production setups and mocks external APIs like Mail services to ensure deterministic test runs.
📂 Backend Structure (Expand for the sauce)
├── config/ # DB, Redis, Cloudinary setup
├── controllers/ # The brains (Auth, Feed, Chat)
├── middlewares/ # The bouncers (Auth Guards, Sanitize)
├── models/ # Mongoose Schemas (User, Post, Connection)
├── routes/ # API Endpoints
└── utils/ # Socket.js, OTP Mailer, JWT Signers
📂 Frontend Structure (Expand for the look)
├── src/
│ ├── components/ # UI atoms (Post, Navbar, Sidebar, Toast)
│ ├── store/ # Redux Slices (User, Feed, Search)
│ ├── pages/ # Full-page views (Home, Profile, Auth)
│ └── utils/ # Constants, Validations, Socket.js
MONGO_URI, REDIS_URL, JWT_SECRET, BREVO_API_KEY, CLOUDINARY_URL
# For the Backend ⚙️
npm install
npm start
# For the Frontend 🎨
cd client
npm install
npm run dev
Built with ❤️ by the Loom Engineering Squad
Loom — Connect with the world.
set DEBUG=development