/Discord-Clone-Project

Primary LanguagePython

Discords Project

This was a group project where we decided to make a clone of the popular Discord website. You can view our site live: Discords. Discords is a real time communication site with different chat communities called "Servers", with individual chatrooms within the Servers, called "Channels." We have made it possible to sign up and create a user, join servers, and chat live in different Channels all while styled like the original Discord website.

⚡ Technologies We Used:

Socket.io JavaScript React Redux Python Flask PostgreSQL HTML5 CSS3

Index

Features

Servers

  • Users can create a Server
  • Users can read/view other Servers
  • Users can update their Server
  • Users can delete their Server

Channels

  • Users can create Channels within their Servers
  • Users can read/view all of the Channels within a Server
  • Users can delete Channels within a Server they have created

ChatSocket.io

Logged-in Users can

  • chat with live message data being transmitted in real time

Photos

Landing Page

top-landing-page

Landing Page Footer

bottom-landing-page

Login page

login-page

Create a Server Modal

create-server

Right Click to Edit or Delete a Server

edit-server

Chat Room Screen-Shot

server-channels

Installation Instructions

  1. Install dependencies
pipenv install -r requirements.txt

  1. Create a .env file based on the example with proper settings for your development environment

  2. Replace the value for SCHEMA with a unique name, making sure you use the snake_case convention.

  3. Get into your pipenv, migrate your database, seed your database, and run your Flask app

pipenv shell
flask db upgrade
flask seed all
flask run
  1. To run the React App in development, checkout the README inside the react-app directory.

To-dos/Future Features

  • Allowing the user to update a message
  • Allowing the user to update a reaction
  • Allowing the user to update a user photo

This is a view of the top of the Landing Page https://github.com/zgierahn/Discord-Clone-Project/wiki/Images

This is a view of the bottom of the Landing Page https://github.com/zgierahn/Discord-Clone-Project/wiki/Images

This is our Login page https://github.com/zgierahn/Discord-Clone-Project/wiki/Images

This is the main servers and channels area https://github.com/zgierahn/Discord-Clone-Project/wiki/Images

This is the modal that pops up when you right click on a server to either edit or delete https://github.com/zgierahn/Discord-Clone-Project/wiki/Images

This is the modal that pops up to create a server when you select the create a server button https://github.com/zgierahn/Discord-Clone-Project/wiki/Images