Real-time Messaging App

¨ ¨ ¨ ¨

• About
• Quick Look
• React Componets Diagram
• Decisions made
• Prerequisites
• Resources and Tools
• Getting Started
• Quick Look
• Stretch Goals
• Web-hosted

The application is built with Node.js and React. Users can authenticate, create custom messaging channels, send direct messges to one another. Message transport is handled by 3rd party API service - getstream.io, which provides very robust chat feature set.

• Typing indicators: Show when the user is typing
• URL previews: Show an image, text-description or video when adding a URL in a chat message
• User presence: Show who is online
• Reactions & Threads: Support modern messaging best practices such as reactions and threads
• Unread counts: Show the number of unread messages that need attention
• Offline storage: Keep the chat working, even if the network connection is unstable

Additionally, getstream.io service offered generous API call volume limit, while Heroku and Netlify provided free-tier services.

• Web Browser
• Node.js
• NPM
• Webpack
• Create server/.env file with following entries, all can be obtained from https://getstream.io/chat/trial/

STREAM_APP_ID=<your_app_id>
STREAM_API_KEY=<your_api_key>
STREAM_API_SECRET=<your_api_secret>

• https://nodejs.org/en/
• https://reactjs.org/
• https://getstream.io/
• https://app.diagrams.net/
• https://www.svgbackgrounds.com/
• https://www.netlify.com/
• https://heroku.com/

Use a command line/Bash to move to the project directory with cd project-directory-here

1. Clone the repository: $ git clone https://github.com/romankolivashko/chatter.git
2. Navigate to the chatter/server directory on your computer
3. Run npm install in command line/Bash to get all dependencies.
4. Run npm run dev in command line/Bash to start up the Node.js server in your browser.
5. Navigate to the chatter/client directory on your computer
6. Run npm install in command line/Bash to get all dependencies.
7. Run npm run start in command line/Bash to start up the client in your browser.

• Give users an option to reset passwords
• Improve CSS styling
• Currently not responsive, with that either React Native or Flutter seem to be a viable option
• Enable users receive SMS notifications when not online

Link

Issues

MIT

[email protected]