React SPA chat application, written with

• React
• Redux
• TypeScript
• Express.js
• Socket.io
• Module SCSS

• Pages

  • Navigation Bar
    • Dark/Light Mode Toggle
    • Navigation
  • Chat Page
    • Sending and receiving messages on the same server
    • Chat Panel with messages from guest user and away user
    • Unread messages, when away from chat tab
    • Automatic scrolling to the bottom of chat everytime it loads or user writes a message
    • Avatar based on username
    • Showing time on which every message is sent
    • Emoji support in messages
    • Link Parser
  • Settings Page
    • Change username
    • Clock Display (12h / 24h)
    • Send message on CTRL + Enter
    • Persist data to local storage
    • Reset Settings to Default TODO:

• Add localization

• Check for unique usernames and assign it by default

• Scroll to bottom CTA

• Parse links with metadata

• Online and offline status

• Write tests

Installation process:

Clone the project to your local directory.

1. Ensure that NodeJS is installed.
2. Install npm.
3. From the project folder, execute the following commands:

After cloning is done, run command yarn install to install all necessary dependencies for the project:

Installation of dependencies could take a few minutes to finish.

To start the application, we first need to run the server - yarn run server or ```node server`` after which Socket.io connections will be instanciated and server will listen for events on PORT 3001

Port is defined in server.js file, so it can be easily reconfigured if needed. If deployed somewhere else, it is set up that it works equally as well for production use.

const port = process.env.PORT || 3001;

After starting a server, run React app by executing the following command yarn start.

When application starts, go to settings and update username, after which you can open a new window with localhost:3000 - (preferably in Incognito mode or different browser/same browser with different application state).

Run yarn run app in root folder and the app (server and client-side) will be hosted on http://localhost:3001

Happy Chatting! 😄

To build the app, type yarn run build - this will generate a folder build/, from which we can serve the app

Browserlist Target: >0.2%, not dead

👤 Adis Jugo

• Website: http://jugoadis.com
• Twitter: @adisreve
• GitHub: @adisreve

Give a ⭐️ if this project helped you!