Build a real-time, two-way chat application using ReactJS and integrate it with a free account on PubNub.
To demonstrate your skills around front-end development and integration with 3rd party APIs, you are asked to build a fake real-time two-way chat between two clients.
Prerequisites Node.js (v12.x or later) NPM (v6.x or later)
-
from the github link
https://github.com/JupiterLikeThePlanet/yellowbird
there will be a green button that says "Code". Click on it -
A tiny window will open below it and in it will be a url that should look like
https://github.com/JupiterLikeThePlanet/yellowbird.git
. Copy that or just go ahead and copy it from here. -
Open up terminal, and in a desired directory of choice, enter the following command
git clone <URL_OF_REPOSITORY>
-
ensure node and npm are installed and up to date. Check in terminal using 'node -v' and 'npm -v" respectively. If neither is installed or is out of date run:
sudo apt-get install nodejs
npm install npm@latest || npm install -g npm@latest
- Otherwise in terminal, please first run
npm install
-
Ensure to configure PubNub Keys before deploying the app (see the pubnub setup section)
-
Then run
npm start
- This should open a window in a browser of choice and put you at the landing page. If you manually need the url it is:
http://localhost:3000/
Obtain your keys from the PubNub dashboard and set them in your .env file
Here is a link to creating keys
Create an Account:
- Visit PubNub and sign up if you don’t already have an account.
- If you already have an account, just log in.
Create a New App:
- Once logged in, navigate to the PubNub Dashboard.
- Click on the "Create New App" button.
- Enter a name for your app and confirm the creation.
Create a Keyset:
- After creating your app, you’ll be prompted to create a new Keyset.
- Enter a name for your Keyset and create it.
- You’ll be provided with a Publish Key and a Subscribe Key. Note these down.
After creating your keys, create (if not already created) an .env
file and set the keys as such
REACT_APP_SUBSCRIBE_KEY={enter your subscribe key here}
REACT_APP_PUBLISH_KEY={enter your publish key here}
- Upon hitting the landing page you will be asked to enter a screen name.
- once you enter and submit a screen name, the page will change with a greeting using your screen name and give you three options
- Join a room using a room key
if you have a room key please paste it here. Room Keys are obtained from the header of a chat room and start with
BirdNest-
and then a string of numbers. egBirdNest-1719606648016
- Create a Room
Creating a room will bring you to a page with a blank chat. You may use the room code from the header to share with someone to join the chat. You may leave the chat with the leave session button. If no users are in a chat, a room has ceased to exist.
You may enter text at the bottom. Shift+Enter goes to a new line. Enter key alone will submit text. Send will also send text. And you have the option to use emojis (emojis may need a second to load, be patient!) - Update Name
This will bring you back to the landing page in which you can change your name.
- Join a room using a room key
To run unit tests, open console and enter the following command:
npm test
or for more specific tests, choose a test file like so:
npm test -- ChatRoom.test.tsx
-
Created a landing page for creating a screen name
-
Created a Join / Create session page with the ability to either join a chat room in session or create a new one. Also has the option to go back create a screen name
-
Created a Chat Room page to chat back and forth with
- Incorporates Pubnub to create chat rooms, fetch message history, and send messages
- Uses Emoji Picker to allow use of emojis in chat and select from a library of emojis
- Has a header to display room key and the ability to leave session. If no users are in a session the channel is nixed
- Small animations on messages as they pop up
-
Persistence upon refresh or closed window for the following:
- Screen names
- room session
- up to 100 messages
-
Hit the requirements for the following:
- Text balloons for each participant
- Support single-line, multi-line (using a modifier like alt+enter or shift+enter), and emojis in the content
- Design should be responsive
- Code is in Typescript
-
Tests written to cover components, run
npm test
- give submit name stuff their own classes
- create a file for interface types
- organize documentation with more markup code