thangtran3112 / chatter-ui

Frontend for AWS Chat with React, MaterialUI, Apollo Client, GraphQL, Redis PubSub. Deployment with Cloudfront and AWS Amplify

Install required Material UI libraries

NodeJS v20X npm i --save @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-materi al

Install eslint for typescript

https://andrebnassis.medium.com/setting-eslint-on-a-react-typescript-project-2021-1190a43ffba https://dev.to/quizzes4u/how-to-set-up-eslint-and-prettier-in-react-typescript-5-project-2023-hd6

npx eslint --init

Install NestJs CLI:

npm i -g @nestjs/cli@latest nest new chatter-backend

Material UI libraries

• Snackbar
• AppBar
• List
• Divider
• Grid
• Toolbar Api
• Typography
• Modal
• Switch with FormGroup
• Stack
• CSSBaseline
• Material Icons
• Container
• Box
• IconButton
• TextField and InputBase
• Paper

Install GraphQL Codegen libraries

• @graphql-codegen/cli and @parcel/watcher. Instructions

npm i -D @graphql-codegen/cli @parcel/watcher npx run graphql-code-generator init npm run codegen

• Using concurrently in package.json to start web server along with watching codegen together:

npm i -D concurrently

"scripts": {
    "start": "concurrently \"react-scripts start\" \"npm run codegen --watch\"",
}

• GraphQL Syntax Highlight VS Code

Apollo Client Usages

• useReactiveVar() hook and makeVar()
• Mutation will not trigger cache update on non-primitive response. We can either use refetchQueries or update cache on successful mutation. Instructions

React infinite scroller

• npm i react-infinite-scroller to help scrolling for Chat component
• npm i -save-dev @types/react-infinite-scroller