Welcome to the Introvoke frontend developer interview project! ๐
Your assignment is to implement a chat interface using React and JavaScript. Below is an example mockup of what the chat application may look like:
Desktop | Mobile |
---|---|
![]() |
![]() |
Feel free to use any tools to help aid you in completing this assignment.
- Implement using the following:
- Language: JavaScript
- Framework: React
- Users should be able to do the following:
- View all current chat messages in a scrollable list
- Enter a username to use while chatting
- Enter a message to send to chat
- See your message in the chat after submitting
- The chat interface should be responsive and usable within the following layouts
- Desktop/laptop screen sizes
- Mobile screen sizes
- Keep all active clients within the chat application updated in real-time
- When one user submits their chat message, other users should be updated (hint: checkout the server router file)
- Validate your code and components through testing
- Jest is setup in the app project as the test runner. See the
README.md
for getting started.
- Jest is setup in the app project as the test runner. See the
This project was created and tested with the following NodeJS and NPM versions:
- NodeJS v14.17
- NPM v6.14
If you have any issues installing and/or running, do the following:
- Check your NodeJS and NPM versions, verify that these are not below the versions above.
- If you have a higher version of either NodeJS or NPM, you will need to downgrade to the versions above.
It is highly recommended that you use a Node version manager to allow you to easily switch between different versions of Node. The following tools allow for easily switching between NodeJS versions.
- Windows: https://github.com/coreybutler/nvm-windows
- Mac/Linux: https://github.com/nvm-sh/nvm
If you continue to experience issues, please reach out for help.
This project is setup using Lerna to manage multiple sub-packages. We have provided you with the following project structure:
packages/
app/
server/
To get started, install dependencies at the root of the project:
npm install
To start development, run the following at the root of the project:
npm start
This will run both the API server as well as the development server for your application.
The app/
package was bootstrapped with create-react-app to get you up and running quickly. It has a development server with hot-reloading as well as support for many of the tools and libraries you may want to use while developing your app.
For more information, see the README.md within the app/
package for more information.
The server/
package contains an Express webserver that hosts a REST API that you will use to get chat messages as well as post new messages.
The server exposes the following routes:
URL: localhost:8080
# Returns a list of all messages
GET: /messages
# Returns a single message by ID
GET: /messages/:id
# Creates a new message
POST: /messages
# Updates an existing message by ID
PATCH: /messages/:id
# Deletes a message by ID
DELETE: /messages/:id
Please see the README.md file within the server/
package for more information.