No frills chat app built with React and Socket.io.
A simple, real-time chat UI with a preconfigured list of chatrooms which users can contribute to. Users can also send private messages to each other.
Notes:
- This is a full rewrite of an older project that had some nasty patterns I wanted to clean up
- I decided to experiment with
react-with-styles
and custom components as an alternative to Material (and had a lot of fun doing it) - The UI is loosely inspired by Slack
- WebSockets are awesome
- Frontend: React, TypeScript, Socket.io-client, CSS-in-JS theming
- Backend: Node + Express, OvernightJS, Mongoose, Socket.io
- Database: Docker, MongoDB
- CI/CD: GitHub Actions
- Ensure that
Docker
is installed and running - In your terminal,
cd
into theserver
directory and runnpm install
- From the project root, open your terminal and run
docker compose up
- Seed data will be populated in the database automatically
- The server will be running on
http://localhost:3000
- There are two test users by default,
Admin123
andTestUser123
- The password for each test user is
passworddd
The server/README.md
provides additional information on build scripts and environment variables.
- In another terminal window,
cd
into theclient
directory and runnpm install
- Run
npm start
- The application may be accessed in a web browser at
http://localhost:8080
- The application may be accessed in a web browser at
The client/README.md
provides additional information on build scripts and environment variables.
The runtime environment for this application requires
node >= 14.6.0
andnpm >= 6.14.7
.
This application makes use of
ESLint
,Stylelint
andEditorConfig
. Each of these features requires an extension be installed in order to work properly with IDEs and text editors such as VSCode.
This application has been tested for accessibility via the axe DevTools - Web Accessibility Testing and Accessibility Insights for Web Chrome extensions.