• User login
• Displays all existing messages in the chatroom
• Add new message(s) by typing in the message box and hitting "enter" or the submit button
• Visualize other users' info by clicking on the info icon on the top right corner
• Return to chat screen from info screen by hitting the back button on the top left
• Localization between English and Chinese

• Hover-over other users' icons to see expanded view of icons
• Immediately upon adding a new message, a small loading icon will appear on the right side of the new message
• Loading icon will disappear once message is added successfully (simulated) on the server side
• Hitting the play button will add multiple messages from other users
• Use the English/Chinese buttons on the login screen to toggle languages
• Use the <> button on the top right side of the chat screen to toggle languages

• Given the time constaint, uikit design system was adopted to provide basic icons and styling
• API error handling was not implemented (see comments in messageApi, userInfoApi, or authenticationApi)
• State is maintained in local storage via redux-persist library, mainly to persist logged in user info

• Testing
• Unit testing of React components as well as redux actions/reducers etc
• UI automation tests with Selenium
• UI/UX Features
• Improve transition between chat and info screens, potentially with TransitionGroup
• Implement retry mechanism for unsuccessful attempts to add new messages (ex. no connection)
• Visual indicator (ex. "..." in iMessage) while user is typing in the message box
• Tech Improvements
• Refactor language localeUtilities to be more configurable and scalable to accomodate more languages
• Implement error handling for both globally (ex. default popup) and locally within components (ex. error banner)

Clone this repo with

git clone git clone git clone https://github.com/bcfchen/pigeon.git

cd into the pigeon/client folder and install npm packages by:

npm install

Check that you're in the pigeon/client folder and run the project by

npm start

The page should automatically open up in your browser at

localhost:3000/chat

• React/Redux
• uikit for design system and icons
• PropTypes for component property type checking
• react-i18next for localization