Chatbox

• Please Ensure that that you Fork and clone this repo.
• There is a Signup branch that is available so please fork more than the main.

📱 Messenger App 📱

Welcome to our chat application, a real-time communication platform. This application was created to allow users to stay connected through instant messaging.

For Users

This Messenger App allows you to:

• 💬 Send and recieve messages in real-time
• ⚡ Fast updates with no need to refresh the page
• 📱Simple, clean and responsive messaging

For Future Developers

This project was built on a full-stack Javascript evironment.Below is an overview of the used technologies:

Frontend

• Vite
• React
• TypeScript
• Nodemon

Backend

• Express
• MongoDB Atlas
• MongoDB + Mongoose
• Socket.io
• Dotenv
• Cors
• Nodemon
• Typescript

Please be sure to setup your own .env file with :

• PORT =
• MONGO_URI =

Usage

FrontEnd/BackEnd

• npm run dev

Stretch Goals

• Create a user sign up/ sign in( Began working on this in a SignUp Component Branch)
• Functionality for clearing message database (end chat, start new chat)
• Darkmode/Lightmode
• After user creation align text bubbles to who is the sender(Current user: Align right, Other: Align Left)
• Chat Forums for diverse chatroom environments

Contributions

• 🍀 Manny
• ⛈️ Stormi
• ⚡ Edward
• 🐾 Delilah

Quick Pitch

Problem and Solution

• The Problem : Shared information gets lost in the void.

• The Solution : A forum-style chatroom that creates a digital hangout where people can connect, share, and stay in the loop.

Completed Features

• Message List

  • Scroll Box
  • Auto Scroll
  • Time Stamp
  • Username, Time, and Message Display

• ChatBox

  • Functional Send Button

• Websocket

  • Connected front end and back end to update client rendering to show messages when new message is sent

Incomplete Features

• Sign in and Sign up Features
• Multiple Chatrooms
• Dark and Light Mode
• Allowing chat bubbles to align to the designated sender side ( User bubble to the right and incoming message to the left)

Allure for Iterating on this Project

• A chat feature is a flexible application that can be used and embeded in many applications