This is a clone of a messenger app. I built it as a code sample for some really cool humans.
- Write messages in the chat window and see them appear
- Select a friend in the chat list to see the chat
There are 3 components.
App.js is responsible for keeping track of the overall state, and contains:
ChatList.js which keeps track of the list of chats on the left hand side
ChatWindow.js which displays the chat for the currently active friend
Most of the styling is inspired by messenger.com
Stuff I wanted to do but didn't get around to:
- Unit tests. Not super familiar with the best practices around what and how to test in React specifically, started to read a bit on it and realised it was too complicated for 1 day. I got a setup and 1 test though, so I'm on the right track
- messenger.com has a responsive breakpoint at 700px where things look a bit different, I wanted to do it because I really enjoy testing different screen sizes etc
- Giving each friend an image - looks nice + is related to ^
This project uses create-react-app-sass - the setup I am presently most familiar with.
- Clone this project
yarn install- Run
yarn watch-cssduring development, in addition to the standardyarn start - Go to http://localhost:3000/