React Cognite Chat App

Demo Site: https://react-chat-app-79254.web.app/

Development

$ yarn
$ yarn start
# Listening at http://localhost:3000 with the default

Production

$ yarn build
# All files were built in the `build` folder

Run Tests

$ yarn build
# Run all tests in the `__tests__` folder

Styleguidist

Styleguidist will help you explore the usage of shared components

$ yarn run styleguide
# Listening at http://localhost:6060 with the default

Flow Chart

Data Flow Diagram

Set up list

• styling
  • normalize.css
  • styled-components (can easily inject props to modify CSS properties)
• prettier (formatting codes)
• redux (global state managemenet)
  • redux-toolkit (easily writing redux codes without cumbersome boilerplate codes)
• testing
  • react-testing-library (can easily get component node to test)
  • testing-library/jest-dom/extend-expect
  • jest-styled-components (to have more assertions of styled-components)
• CI
  • Firebase build-deploy yml setting (automatically deploy the app when pushing a new commit)

Improvements

• Lazy loading messagese in chatrooms
• Add an API middleware layer between database and client-side to make the codebase cleaner
• Add theme changing feature