How travis-sova/discord-clone works
Discord Clone is a Vue/Express chat application backed by MySQL. Users register or log in, then browse public servers and channels or find and open one-to-one DMs; chat views load and poll messages and let users send, edit, and delete their own messages. Owners can create servers and manage their names and channels. Backend route details beyond the supplied excerpts are represented at the documented API entry point; unsampled route wiring is not expanded.
Main entry points: api.js API client · index.js Express API · main.vue Chat navigation · main.js App routing
Components 14
Web interface
- App routing
frontend/src/main.js - Login and registration
frontend/src/views - Session state
frontend/src/services/auth.js - Chat navigation
frontend/src/views/main.vue
Identity and API
- API client
frontend/src/services/api.js - Express API
backend/index.js - Input validation
backend/validation.js
Conversation features
- Server and DM lists
frontend/src/components - Conversation view
frontend/src/components/page-dm.vue - Message composer
frontend/src/components/baseChatBox.vue - DM creation
backend/dm.js
Persistence
- MySQL database
Other components
- User
- Browser
Connections 16
- User → Browser: uses
- Browser → App routing: opens pages
- App routing → Login and registration: routes to
- App routing → Session state: checks session
- Login and registration → Session state: authenticates via
- Session state → API client: requests
- Chat navigation → API client: loads lists
- Chat navigation → Server and DM lists: renders
- Chat navigation → Conversation view: opens conversation
- Conversation view → API client: loads and edits
- Message composer → API client: sends message
- API client → Express API: HTTP requests
- Express API → Input validation: validates input
- Express API → DM creation: opens direct DM
- Express API → MySQL database: queries and updates
- DM creation → MySQL database: transacts DM records