https://github.com/dzervoudakes/simple-chat
No frills chat app built with React and Socket.io.
https://github.com/dzervoudakes/simple-chat
chat docker-compose express mongodb overnightjs react react-with-styles socket-io spa typescript
Last synced: 2 months ago
JSON representation
No frills chat app built with React and Socket.io.
- Host: GitHub
- URL: https://github.com/dzervoudakes/simple-chat
- Owner: dzervoudakes
- License: mit
- Created: 2021-02-07T18:12:40.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-12-09T01:59:18.000Z (over 4 years ago)
- Last Synced: 2025-02-03T11:51:00.093Z (over 1 year ago)
- Topics: chat, docker-compose, express, mongodb, overnightjs, react, react-with-styles, socket-io, spa, typescript
- Language: TypeScript
- Homepage:
- Size: 25.7 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple Chat
> No frills chat app built with React and Socket.io.
[](https://github.com/dzervoudakes/simple-chat/actions)
[](https://github.com/dzervoudakes/simple-chat/actions)
[](https://codecov.io/gh/dzervoudakes/simple-chat)
[](https://www.codacy.com/gh/dzervoudakes/simple-chat/dashboard?utm_source=github.com&utm_medium=referral&utm_content=dzervoudakes/simple-chat&utm_campaign=Badge_Grade)
[](https://prettier.io/)
## Premise
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
## Technologies Used
- **Frontend:** React, TypeScript, Socket.io-client, CSS-in-JS theming
- **Backend:** Node + Express, OvernightJS, Mongoose, Socket.io
- **Database:** Docker, MongoDB
- **CI/CD:** GitHub Actions
## Local Development
### Database and Server Setup
- Ensure that `Docker` is installed and running
- In your terminal, `cd` into the `server` directory and run `npm 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` and `TestUser123`
- The password for each test user is `passworddd`
The `server/README.md` provides additional information on build scripts and environment variables.
### Client Setup
- In another terminal window, `cd` into the `client` directory and run `npm install`
- Run `npm start`
- The application may be accessed in a web browser at `http://localhost:8080`
The `client/README.md` provides additional information on build scripts and environment variables.
## Technical Requirements
> The runtime environment for this application requires `node >= 14.6.0` and `npm >= 6.14.7`.
## Configuration
> This application makes use of `ESLint`, `Stylelint` and `EditorConfig`. Each of these features requires
> an extension be installed in order to work properly with IDEs and text editors such as VSCode.
## Accessibility
> This application has been tested for accessibility via the [axe DevTools - Web Accessibility Testing](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) and [Accessibility Insights for Web](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni) Chrome extensions.