Chatty: Real-Time Chatroom

A responsive, real-time chat web app built with React and Firebase. Chatty goes beyond the "send a message" basics — room invites over email, inline media sharing, unsend, and native browser notifications — all wrapped in a fully responsive layout.

🔗 Live demo

Features

• Authentication & rooms — email/password sign up and sign in, with validation for existing/non-existing accounts and email-format checks; create rooms and invite teammates by email
• Real-time messaging — Firestore-backed chat that syncs instantly across every connected device
• Media sharing — attach and send images or videos directly inline in a conversation
• Unsend — remove a sent message instantly for both sender and recipient
• Browser notifications — uses the native Web Notification API (Notification.requestPermission / new Notification(...)) to alert users of new messages even when the tab isn't focused
• Responsive design — chat panel, side menu, and navbar all collapse into a distinct mobile layout on small screens
• UI polish — animated sign-in page (bouncing chat bubble)

How it works

1. Auth — the user signs in/up through Firebase Authentication; App.js listens for auth state changes and gates the rest of the UI on it.
2. Rooms — AddRoom.js creates a room document and stores invited members' emails; RoomList.js subscribes to the user's rooms in real time.
3. Messaging — Chatroom.js writes each message to a Firebase Realtime Database reference; onValue listeners push new messages to every connected client instantly.
4. Notifications — when a message arrives from someone else, send_notification() fires a native browser Notification (after requesting permission) so users don't have to keep the tab focused.
5. Responsive layout — menu.js and RWD breakpoints collapse the 3-panel desktop layout into a single mobile-friendly view.

Tech Stack

• Frontend: React 18, React-Bootstrap
• Backend / Data: Firebase Authentication, Firebase Realtime Database
• Hosting: Firebase Hosting

Getting Started

Prerequisites

• Node.js 16+

Installation

git clone https://github.com/Selinaliu1030/chatroom.git
cd chatroom/midterm
npm install

Running the app

npm start

Runs at http://localhost:3000 — the Firebase project is already configured in src/App.js, no separate .env setup needed.

Screenshots

Sign in	Chatroom	Responsive layout

Role

Solo project — built end-to-end: auth flow, database schema, real-time sync logic, and responsive UI.