AhyoungRyu / react-redux-realtime-chatting-app

Realtime chatting app with #react #redux #firebase #hooks

React Redux Realtime Chatting App 🗣

1. User Flow

1. A user can login once the user registers a new account
2. Once the user is logged-in, the user can create a new chat room or, can be also invited from other users. In the left side panel, only authorized chatting rooms will be displayed
3. A user can modify the member list of the chatting room by clicking +👤icon and opening a user invitation modal
4. In the chatting room, the user can send a text or image message

2. Development

Tech stack:

• npm for package management
• ES6 via babel as programming language
• react, react-redux, and redux-thunk as core stack
• firebase as backend Auth Service / Realtime Database / Storage / Deployment management
• styled-components for React component styling
• semantic-ui for building-up wireframe + overall interface
• jest for unit tests
• enzyme for testing React components

To run dev mode locally:

  $ git clone https://github.com/AhyoungRyu/react-redux-realtime-chatting-app.git
  $ cd react-redux-realtime-chatting-app
  $ npm install
  # After successfull pkg installtion
  $ npm start

Now, it will automatically open http://localhost:3000 and show you the login / register page. Or visit the demo website https://react-realtime-chatting-app.firebaseapp.com/ for overall functionality test.

You might encounter a firebase related errors on initial loading. You need to modify example.env file first and and rename it to .env and then put it under src/ folder. Then the error should be gone.

To run unit test:

  $ npm test

It will find all files that end on *.spec.js under __tests__ dir and run them