Discord Clone

June 14, 2023 ยท View on GitHub

A real-time chat application that mimics Discord.

demo

Features

  • Show who is typing.
  • Show who is online.
  • Allow users to edit/delete their own messages.

Technologies

  • JavaScript
  • React
  • Redux
  • Styled components
  • Node.js
  • Express.js
  • Socket.io
  • PostgreSQL

Installation

  • Clone the repo.
  • Run npm install to install dependencies for the server.
  • Run cd client and then npm install to install dependencies for the client.

Local Development

  • Create a .env file in server, following the format of the .evn.example file. Fill in the details.
  • Run npm run client to start the client.
  • Run npm run server to start the server.
  • Run npm run dev to start the client and the server concurrently.

Deploy to Heroku

Install Heroku CLI.

Login to your Heroku account.

heroku login

Create a new Heroku app.

heroku create YOUR_APP_NAME

Setup Heroku Postgres Database. This should return a DATABASE_URL.

heroku addons:create heroku-postgresql:hobby-dev --app YOUR_APP_NAME

Log into the Heroku Postgre database.

heroku pg:psql DATABASE_URL --app YOUR_APP_NAME

Copy and paste the content in server/src/db/schemas.sql to create the tables.

Copy and paste the content in server/src/db/sample_data.sql to create the channels.

Use \q to quit the database.