CHAT APP

Algebra Front-end Developer Course 2021 - final project

This is an upgraded version of the final project for the forementioned educational program.

The initial version was made with HTML5, CSS3, "vanilla" JavaScript and connected to Scaledrone.

This version is upgraded with ES6 Modules, SCSS and Babel, bundled with Webpack5.

---

Technologies

• HTML5
• SCSS
• JavaScript
• Scaledrone
• ES6 Modules
• Babel
• Webpack5

---

Features

• Sends messages with autor name
• Recognizes sender from the rest of the chat members by showing the messages on the right (sender) and on the left (others)
• Random nickname generator and random name color picker
• Connected to Scaledrone
• Displays active members and notifications who joined
• Autoexpanding input area with a scrollbar in case of a larger text input
• Responsive design

---

Impovement ideas

• limit number of characters in the form input field + alert message
• add modal window when error while connecting
• add date & time with every message sent
• add small modal window with alert when character limit reached
• add SCSS
• add ES6 Modules
• make version with Webpack5

---

Connect to Scaledrone

You can create your Scaledrone channel for free here. To connect to the channel you need to paste your channel ID in the wall-chat.js.

// Connecting to Scaledrone channel ID
const CLIENT_ID = "9094oijOPIJD3jp8F9";

---

Mockup

---

Try it

Open the chat in two or more different windows/tabs.

Start the chat!. | See the design on Behance

---

Licence

MIT