Concord • Live Demo

A full stack JavaScript solo project using Express, Node, PostgreSQL, and React.

A webapp for people who want to chat with others. It's just a chatroom with servers and rooms.

I have good memories of talking to people through google docs, and a chatroom implementation of real-time-text copying discord's styling seemed like a fun project to practice replicating designs, as well as working with sockets and manipulating a relational database.

Technologies Used

• React
• JavaScript, CSS3
• Node.js
• Express
• PostgreSQL
• Webpack
• Socket.io
• React-Bootstrap

Features

• Users can see, create, edit, and delete messages.
• Users can switch between different rooms within a server.
• Users can switch between different servers with their own individual rooms.
• Users can see other users typing live.
• Users can authenticate with a username and password.

Getting Started

First load the repository in a container volume.

npm i

Install all dependencies.

npm run db:import

Set up the PostgreSQL schema along with initial data.

npm run dev

Run the dev-server that reloads on any changes.

(Alternatively for production: npm run build npm run start)

Webpage can then be accessed at localhost:3000

React Component Relationships

                           ┌─ CreateServer
                           │
           ┌─ RoomSidebar ─┼─ CreateRoom
 ┌── Home ─┤               │
 │         │               └─ Room
 │         │
 │         ├─ MessageContainer ─► Message
App        │                      │
 │         └─ Chat Input          ├─ DeleteModal
 │                                │
 │                                └─ EditMsgInput
 │         ┌─ SignUp
 └─  Auth ─┤
           └─ SignIn

Preview