Skip to content

A full-stack real-time chat application built with React, Node.js, Redis, Postgres, and Socket.io

Notifications You must be signed in to change notification settings

ousta2/react-live-messenger

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-live-messenger

Description

A real-time chat web app where users can log in, add friends and communicate with them in real time. This application was built publicly with the entire build process avaiable on YouTube in a tutorial format.

YouTube Playist

Why?

This was a passion project. I built it for fun and to challenge myself.

What I Learned

Through the creation of this project I gained a foundation in systems design and project management.

I learned how to use JWT for authentication and the basics of NGINX.

Most of my growth came from the back-end implementations as I used front-end technology that was familiar to me.

Packages

  • client - react.js frontend
  • server - node.js backend
  • common - code shared between client and server

How it works

  • Front-End: React.js
  • Back-End: Node.js / Express.js / Socket.io
  • Authenticaion: JWT
  • Database: PostgreSQL and Redis
  • Hosting: Digital Ocean Linux Server with NGINX and SSL

Installation

  • Clone the repository
  • CD into the repository and run yarn or npm install
  • Make sure redis is installed and the redis-cli functions properly
  • Create a postgres database and a table called users, as defined in ./packages/server/database.sql
  • Create a file named .env in ./packages/server and make sure it has the following variables defined:
    DATABASE_NAME=
    DATABASE_HOST=
    DATABASE_USER=
    DATABASE_PASSWORD=
    DATABASE_PORT=
    COOKIE_SECRET=
  • Run yarn dev:server and yarn dev:client

About

A full-stack real-time chat application built with React, Node.js, Redis, Postgres, and Socket.io

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 95.0%
  • HTML 5.0%