A revamped version of this project is available in my new application.

Chat App

css

react

socket.io

Create a real-time application that allows users to message each other.

Designed by

Milena Ulman

Difficulty

Adobe XD design is free. You can use this design for your portfolio/website without any limitations. Additionally, you can share the completed project wherever you want.

Note: All new designs will be coming through BigDevSoon with Figma. This one is considered a legacy design but will always be here.

Read me first

The goal of this project is to build a Chat App similar to the design above.

Technologies & tools will be proposed down below but feel free to use different ones if you're more familiar with them. Have fun along the way.

Project requirements

If not using CodeSandbox, boilerplate the application with CRA.
The website looks similar to the design (Desktop and Mobile) and is available for users through a link.
When a new user visits the Chat App, present welcome, Wizard UI to guide him through creating an account including avatar and nickname selection.
When an existing user visits the Chat App, read the account data e.g. from localStorage (compare it with server) and present the Chat App immediately instead of the welcome, Wizard UI.
When a user opens the Chat App, Group Chat should be presented (user shall be added to it automatically), and the people counter will be increased by one.
When a user lefts the Chat App, the people counter will be decreased by one.
Group Chat should show the number of users being online, messages from all the users (note: optionally can skip historical messages for new users or keep all the history as you will), information about new users joining, existing users leaving and an online dot indicator (green - online, gray - offline).
Users should be able to add messages through the input with the ability to select emoji using an emoji picker. Messages should be sent by clicking on a button or/and e.g. by using Enter key.
"My" messages should show on the right, other user's messages should show on the left.

Additional requirements

Show "is typing" UI when a user is typing.
Show "unread" messages indicator.
Add ability to start a direct chat with a user.
Add ability to block a user to prevent seeing his/her messages on Group Chat and prevent him/her from starting a direct chat with you or/and end any started direct chat.
Add sound notification when a new message is received and add mute functionality to mute either group or private (DM) chat.
Add API tests to your code, using e.g. Mocha & Chai.
Add e2e tests to your code, using e.g. cypress.

How to start

In most cases, CodeSandbox will be the best place for starting out rapidly.

You could also use an IDE, VSCode for example, and create e.g. a GitHub repository with custom deployment. More about it in the "Build & Deploy" section.

First steps

Be Agile! Plan your work upfront either with Scrum or Kanban by creating e.g. Trello board for this project.
Open the design by clicking the button under the above image.
Get familiar with design, it contains all the assets (except icons sometimes - use e.g. fontawesome), CSS properties you'll need to use.
After deciding on either CodeSandbox or GitHub repo, set your project with initial files, directory structure (your own preference).
Nothing will stop you now. Don't forget to share a link once you completed the project!

Technologies & Tools

CSS
JavaScript
React
Chakra UI (Recommended components for this project)
Chakra Icons
socket.io (realtime communication between client and server)
Express (host a socket.io server)

Core concepts

Getting Started with React.
Thinking in React.
Lists and Keys in React.
Lifting State Up in React.
Controlled Components in React.
Hooks in React.
Creating socket.io server.
Boilerplate React + socket.io server.
Setting up a proxy server.
Deploying socket.io server to Heroku.

Stuck, can't progress?

Take a break, think about all the pieces you need to build for this project.

You can try out the BigDevSoon platform to maximize your learning effectiveness.

Build & Deploy

If you decided on CodeSandbox, there should be a "Share" button that you can use as a link for your completed project.

Otherwise, for simple, static projects (HTML, CSS, JavaScript) you can try GitHub Pages. For more complex deployments (React, etc.), Netlify or Vercel should be good. If the project has a little bit of Backend, try Heroku for it.

Share your solution

It would be amazing if you can tweet @BigsonDev with the link to the completed project and/or GitHub repo. All the mentees would love to see what you've built (and me too).

spread the word

Do you think this project is cool? Share it with someone! 👀