/GroupChat

Instant messaging webapp project made with React, Redux, TypeScript, Node, MongoDB & Socket.io

Primary LanguageTypeScriptMIT LicenseMIT

gc-logo-nobg

Introduction

GroupChat is an instant messaging webapp built from scratch for my personnal portfolio. This project is not intended to generate profit, but the source code is open source and anyone interested can fork the project and do whatever he wants with.

Have a look to the live version , this readme or its dedicated blog post to learn more about the project structure and the technologies involved.

In case you want to share problems or tips, please go ahead, it is very much appreciated! 😇

Table of Contents

Setup

In order to run the project locally, you need node installed globally.

Step 1

Clone the project and install dependencies in both frontend and backend directory. 
git clone https://github.com/KillianFrappartDev/GroupChat.git
cd GroupChat/frontend && npm install
cd GroupChat/backend && npm install

Step 2

Create a mongoDB database, a Cloudinary account and insert environement variables. 
# backend/.env

DB_URL=<URL HERE>
JWT_SECRET=<Any string you want>

# frontend/.env

REACT_APP_SERVER_URL=http://localhost:5000/api
REACT_APP_SOCKET_URL=http://localhost:5000
REACT_APP_CLOUDINARY_API=<Your cloudinary api>
REACT_APP_CLOUDINARY_SECRET=<Your cloudinary secret>

Step 3

Start a dev server. 
cd GroupChat/frontend && npm start
cd GroupChat/backend && npm start

Codebase Overview

folder structure

Frontend

  • build: Base directory for the live version. It gets updated when you run "npm run build"
  • public: index.html and template page.
  • src: JavaScript entry point and it is where all the logic lives.
  • assets: Pictures and logos.
  • components: Presentational and dynamic react components.
  • views: Call it pages if you prefer, views are build by combining components together.
  • redux: Redux related logic (global state management).

Backend

  • utils: Helper functions, data and middlewares.
  • controllers: Database related actions.
  • models: MongoDB / Mongoose models definition.
  • routes: API routes.
  • app.js: Entry point.

Tech Stack

MERN

Frontend

  • React: JavaScript library for building user interfaces.
  • Redux: State container.
  • TypeScript: JavaScript superset.
  • Material UI: Beautiful UI library.
  • SCSS: CSS preprocessor.

Backend

  • Node: JavaScript runtime.
  • Express: Node library for building REST API.
  • MongoDB: NoSQL Database.
  • SocketIO: Enables real-time, bidirectional and event-based communication..