README.md

Discord Clone built with React and Node js

Discord Clone's API is written in TypeScript and using TypeORM and it's frontend is written in modern React, only functional components with hooks and frontend's code is splitted using Suspense and lazy loading techniques.

Features

• Fully responsive app with client side code splitting
• Login/ Register
• Create Public or Private Servers
• Join public servers either while exploring or with INVITE URL's
• While Private servers can only be joined with INVITE URL's
• Create Channels (For now text channels, Audio channels will be added in future versions)
• Realtime chat in channels with different type of messages(TEXT, IMAGE, VIDEO, AUDIO, FILE)
• Server Members roles with different access level
• Edit server details, server member roles
• Kick members, transfer server ownership
• Leave or Delete Servers

Backend Core Packages

• Express Js: For server and api
• PostgreSql: Database used
• TypeOrm: Database ORM
• Socket-io: For realtime connections and chat
• Multer: For handling file uploads
• Cloudinary: For uploading file uploads
• Redis: For user token session management

Frontend Core Packages

• React js: Client side rendering
• React Router DOM V6: For nested routing for servers and channels
• Redux: For Client Global state management
• Axios: For Data fetching on client
• Socket-io-client: Socket io client to connect with server for realtine chat and notifications
• Material Ui V5: Ui library
• Styled Components: For styling the app

Setting up development environment

• Install postgreSQL if you don't have it already and create a database named discord_clone.
• Install redis if not already, or can use Redis cloud instance like Redis labs or Upstash
• Create an empty .env file in root folder, copy .env.example contents into it, and fill in your values.
• npm run install-dependencies
• npm run serve on root folder
• cd client && npm start
• Server should be running now at http://localhost:5000
• Client should be running now at http://localhost:3000

To Run production version on your device

• In root folder execute npm run build
• Then execute cd client && npm run build
• In .env folder add NODE_ENV with value of production.
• Do not forget to delete NODE_ENV variable from .env file to run development server correctly afterwards.
• From your root folder, execute command npm start
• Now your Production version of app should be running at http://localhost:5000

Following features would be added in future

• Audio/Video Channel Support
• Edit Messages
• Search Public Servers

What's Missing?

• User to User relationships, personal chat and search users
• Ban Users from servers
• Private Channels and channel permissions
• Dynamic server member roles
• Message reactions
• Message threads

UI Snapshots

Create/Join Server Modal

Update Server Settings

Join Server with Invite URL

Explore Public Servers