How adityaraj-r/syncspace works
SyncSpace is a language-exchange social app: users sign up, complete a language profile, discover and connect with friends, then chat or call. The frontend routes users through those stages and calls a JSON API; the backend authenticates requests, updates user and friendship records, and issues Stream tokens. README-documented chat reactions, typing indicators, group calls, screen sharing, and recording are represented at the documented integration boundary; their implementation details are not shown in the excerpts.
Main entry points: App.jsx Route and access · api.js API client · server.js HTTP server · auth.middleware.js JWT protection
Components 24
Client experience
- Route and access
frontend/src/App.jsx - API client
frontend/src/lib/api.js - Theme state
frontend/src/store/useThemeStore.js
Identity and profiles
- Sign-in and signup
frontend/src/pages/LoginPage.jsx - Profile onboarding
frontend/src/pages/OnBoardingpage.jsx - Session query
frontend/src/hooks/useAuthUser.js - Auth and onboarding
backend/src/controllers/auth.controller.js - JWT protection
backend/src/middlewares/auth.middleware.js - User records
backend/src/models/User.js
Language exchange
- Discovery home
frontend/src/pages/Homepage.jsx - Friends
frontend/src/pages/FriendsPage.jsx - Requests and notices
frontend/src/pages/Notificationpage.jsx - Matching and requests
backend/src/controllers/user.controller.js - Friend requests
backend/src/models/FriendRequest.js
Realtime communication
- Chat interface
frontend/src/pages/Chatpage.jsx - Call interface
frontend/src/pages/Callpage.jsx - Stream token
backend/src/controllers/chat.controller.js
Backend API
- HTTP server
backend/src/server.js - Auth routes
backend/src/routes/auth.route.js - User routes
backend/src/routes/user.route.js - Chat routes
backend/src/routes/chat.route.js
Other components
- Visitor
- MongoDB
- Stream chat and video
Connections 35
- Visitor → Route and access: opens app
frontend/src/App.jsx - Route and access → Sign-in and signup: routes to
frontend/src/App.jsx - Route and access → Profile onboarding: routes to
frontend/src/App.jsx - Route and access → Discovery home: routes to
frontend/src/App.jsx - Route and access → Friends: routes to
frontend/src/App.jsx - Route and access → Requests and notices: routes to
frontend/src/App.jsx - Route and access → Chat interface: routes to
frontend/src/App.jsx - Route and access → Call interface: routes to
frontend/src/App.jsx - Route and access → Session query: checks session
frontend/src/App.jsx - Route and access → Theme state: reads theme
frontend/src/App.jsx - Sign-in and signup → API client: submits credentials
frontend/src/lib/api.js - Profile onboarding → API client: saves profile
frontend/src/lib/api.js - Session query → API client: loads session
frontend/src/hooks/useAuthUser.js - Discovery home → API client: fetches matches
frontend/src/pages/Homepage.jsx - Friends → API client: fetches friends
frontend/src/pages/FriendsPage.jsx - Requests and notices → API client: fetches requests
frontend/src/pages/Notificationpage.jsx - Chat interface → API client: gets token
frontend/src/pages/Chatpage.jsx - Call interface → API client: gets token
frontend/src/pages/Callpage.jsx - API client → HTTP server: HTTP requests
frontend/src/lib/api.js - HTTP server → Auth routes: mounts auth
backend/src/server.js - HTTP server → User routes: mounts users
backend/src/server.js - HTTP server → Chat routes: mounts chat
backend/src/server.js - Auth routes → Auth and onboarding: dispatches
backend/src/routes/auth.route.js - Auth routes → JWT protection: protects routes
backend/src/routes/auth.route.js - User routes → Matching and requests: dispatches
backend/src/routes/user.route.js - User routes → JWT protection: protects routes
backend/src/routes/user.route.js - Chat routes → Stream token: dispatches
backend/src/routes/chat.route.js - Chat routes → JWT protection: protects route
backend/src/routes/chat.route.js - Auth and onboarding → User records: reads and updates
backend/src/controllers/auth.controller.js - Auth and onboarding → Stream chat and video: upserts user
backend/src/controllers/auth.controller.js - JWT protection → User records: loads user
backend/src/middlewares/auth.middleware.js - Matching and requests → User records: queries friends
backend/src/controllers/user.controller.js - Matching and requests → Friend requests: manages requests
backend/src/controllers/user.controller.js - Stream token → Stream chat and video: creates token
backend/src/controllers/chat.controller.js - HTTP server → MongoDB: connects database
backend/src/server.js