Skip to content

francescocartelli/nyla-instant-messaging-app

Repository files navigation

Nyla

Nyla is an example of an instant messaging application.



GitHub stars   GitHub forks

Requirements


Architecture

Nyla is a centralized instant messaging application built with React.js front-end, Express.js back-end and MongoDB database. Real-time messaging is provided by Websockets as notification servers, coordinated using Redis message queue. The chosen architecture and overall server design allows for horizontally scalability.


This repository contains the implementation of the SPA (client folder), REST api server (server-api folder) and ws server (server-ws folder). MongoDB and Redis can be used simply by installing the relevant software; no other configuration (other than that provided in the folders listed above) is required.


Getting started (development and staging environments)

To start with the local development build (each server in single instance), docker-compose can be used ( manual configuration is also described below).


Manual Setup of development environemnt

Setup back-end (MongoDB, Redis, REST-API server and WS server) and front-end (React Client App) of the app by following the list below.

Reuse example configuration files for setting up local development build.

MongoDB

At first, the app will start with an empty database, generated with the first write (probably a user registration). For this reason database configuration only consist in starting the MongoDB process or service.

  1. Download and setup MongoDB (here).
  2. Start MongoDB as process or a service.

Redis

  1. Redis is used as message-queue for API server and WS server communication. Just download and configure Redis in the build environment (here).

  2. Start Redis server:

     % redis-server
    

REST-API Server (Express.js)

  1. In server-api, .env.example file provides the basic configurations. Use it for generating a .env file:

    • Providing database url and name:

         DATABASE_URL=mongodb://<database_host:database_port>
         DATABASE_NAME=<your_database>
      
    • Providing a JWT encryption key (better if its very long and complex) for token signing:

         SECRET_OR_KEY=<your_secret_or_key>
      
    • Providing Redis MQ url and port:

         MQ_SERVER_URL=<redis_server_host:redis_server_port>
      
  2. Optionally, provide your Google OAuth2 configurations once you registered your application. With a null GOOGLE_CLIENT_ID Google authentication endpoints will not be exposed:

     	GOOGLE_CLIENT_ID=<your_google_client_id>
     	GOOGLE_CLIENT_SECRET=<your_google_client_secret>
     	GOOGLE_CALLBACK_URL=http://localhost:3001/api/authenticate/google/callback
     	GOOGLE_SUCCESS_REDIRECT_URL=http://localhost:3000
    
  3. [OPTIONAL: For independent deploy] From the server-api root folder, install all required modules, then run the server:

     	server % npm install
     	server % npm start
    

WS-Server (WS.js)

  1. In server-ws, .env.example file provides the basic configurations. Use it for generating a .env file:

    • Providing Redis MQ url and port configurations:

         MQ_SERVER_URL=<redis_server_host:redis_server_port>
      
    • Providinge server-api url:

        API_SERVER_URL=<api_server_host:api_server_port>
      
  2. [OPTIONAL: For independent deploy] From the server-ws root folder, install all required modules, then run the server:

       server % npm install
       server % npm start
    

SPA (React.js)

  1. In client, .env.example file provides the basic configurations. Use it for generating a .env file:

    • Providing url for react-proxy server (to server-api):

       VITE_PROXY_URL=http://localhost:3001
      
    • Providing the url for ws-server:

       VITE_WSS_URL=ws://<ws_server_host:ws_server_port>
      
  2. [OPTIONAL: For independent deploy] From the client root folder, install the packages, then run the client:

       client % npm install
       client % npm start
    

Deploy all the workspaces

  1. From the repository root folder, install the packages, then concurrently run all the servers and client:

       client % npm install
       client % npm start
    

Using docker-compose (staging environment)

  1. Following the previous setup, update the docker-compose.yml environment variables accordingly for all the services described in the configuration.

  2. Start Docker application

  3. Navigate to the project root folder (where docker-compose.yaml file is located) and just run all the services using docker-compose:

     	docker-compose up
    

This setup is intended to simulate the acceptance/staging environment rather than the standard development setup. Unlike the dev environment, the server-api and server-ws services are replicated into multiple instances and routed through an Nginx load balancer to better reflect a production architecture.

Wait for all containers to be created and initialized. Once the environment is ready, access the application through your browser.



Open-API Swagger Documentation

The API documentation is generated using Swagger, and it provides a comprehensive overview of all available endpoints, their functionality, required parameters, and expected responses. You can access the Swagger documentation by visiting http://localhost:3001/api-docs after starting the API server.



Main Features (Images)

Create and track your personal chats

Create and track your personal chats and find new users.

Instant messaging with group and direct chats

Instant messaging with group and direct chats with intuitive settings.

Current chat features include:

  • Edit miswritten messages after sending.
  • Delete awkward messages after sending.
  • Reply to specific messages to keep conversations organized and on topic.
  • Manage users and admins in chat groups.

Rich text messaging for expressive conversations

Emphasize your messages using Rich Text mode with ease: bold, italic, headings, bullet lists and more available with one click.

Google OAuth2 or password-based registration/authentication

Registration/authentication using Google Auth2 or standard username and password.



Curiosity

Nyla is a short word inspired by Nyarlathotep, who is a fictional entity belonging to Howard Phillips Lovecraft's Cthulhu Cycle. Nyarlathotep acts according to the will of the Outer Gods and is their messenger.



Author



License

This project is licensed under the MIT License, which means you're free to use, modify, and distribute the code as long as you include the original license notice.

About

Nyla is a centralized instant messaging application built with React.js front-end, Express.js back-end and MongoDB database. Real-time messaging is provided by Websockets as notification servers, coordinated using Redis message queue.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages