💻 FuzeChat

FuzeChat is a web application for online chatters who want to chat in a one time chat room.

The inspiration for this project was WhatsApp, with the dark background and green buttons. I've wanted to create my own messaging app, and was able to accomplish this with FuzeChat! The highlight of this application is its live messaging system. All users that are connected to a chat room will receive a message that is emitted from a sender. Feel free to try the app with the steps below!

Give it a try!

Click here to try this app! 👈 or go to https://fuzechat.page/

Tutorial:

1. Go to https://fuzechat.page/.
2. Click on the dropdown menu to select a room.
3. Click Next after selecting from the dropdown.
4. Click on the input and type in a username with at least 7 characters.
5. Click on Next after entering a valid username.
6. Ask a buddy to repeat the steps above and start chatting! 😊

Features

• Select a room to enter
• Create a username
• Hear a chime when entering room
• Send messages to other users
• See timestamps for each message
• Receive notifications
• Hear a chime for incoming messages
• Scrollable chatbox

Technologies used

📚 Stack: PostgreSQL, Express, React, Node.js

🗼 API: Socket.io

📝 Designs: Figma, DBDesigner

🖼️ Frameworks: React, React Hooks, Bootstrap

Stretch features

• Editing a message
• Creating separate chat rooms that a user may leave and enter
• Allow user to create an account & sign in

Getting started

You may clone this repo with the following steps:

1. Go to https://github.com/MattChau01/FuzeChat.
2. Click on code.
3. Click on SSH (If you are using the latest Windows update, you may need to use HTTPS instead).
4. Click on the clipboard to copy the URL.
5. Go to VS Code and clone the repository.
6. Use npm i or npm install to install all dependencies.