This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
To run this chat application locally, clone the github repo locally, in terminal run:
npm install npm run dev
The application should open up on http://localhost:5173/
Features built:
- create one or more chats with users
- type, send and receive messages
Features left to implement:
- delete chats
- add timestamps to messages
Design decisions:
Screen.Recording.2024-06-09.at.2.37.37.PM.mov
- used react and js
- used useState hook for maintaining app state
Futher TODOs and improvements:
- I would write cypress tests if time permitted
- I made the application responsive however I could have added @media css tags for multiple screen dimensions
- while enter on submit works for destop, laptop, it may be a better user experience to have a send button for mobile and ipad.
- the scroll implementation on the chat component isn't working, even though I set overflow: auto. If time permitted I would have debugged it.
- would have made further improvements on css, html such as accessibility aria roles/ labels
- I would have also added a highlight on selecting the user to chat with to make it the selection visible.