Chat

Web application for real-time chat between authenticated users.

---

DeepWiki Documentation

You can see the DeepWiki oficial documentacion here:

DeepWiki

---

Live Demo

You can see the chat app running in production here:

Chat

---

Features

• Sign up and sign in with Firebase Auth.
• User profile creation in Firestore on registration.
• User list to start conversations.
• Direct messages between users stored in Firestore.
• Profile updates (name and avatar).
• Password change.
• Light/dark theme.
• Toast notifications.

Requirements

• Node.js 20+
• npm 10+
• Configured Firebase account/project

Local Setup

1. Clone the repository

git clone https://github.com/AndresOrozcoDev/chat.git
cd chat

2. Install dependencies

npm install

3. Create a .env file with Firebase variables

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
VITE_FIREBASE_MEASUREMENT_ID=...

4. Start the development environment

npm run dev

Scripts

• npm run dev: starts Vite in development mode.
• npm run build: compiles TypeScript and generates a production build.
• npm run preview: serves the build locally.
• npm run lint: runs ESLint.
• npm run test: runs Vitest in watch mode.
• npm run test:coverage: runs tests with coverage.

App Routes

• /: login
• /register: registration
• /dashboard: main chat
• /account: account and profile settings

Project Structure

.
|- functions/
|  \- src/
|     \- index.ts
|- public/
|- src/
|  |- context/
|  |  |- auth.context.tsx
|  |  |- notify.context.tsx
|  |  \- theme.context.tsx
|  |- features/
|  |  |- auth/
|  |  |- chat/
|  |  \- profile/
|  |- shared/
|  |  |- components/
|  |  \- pages/
|  |- App.tsx
|  |- firebase-config.ts
|  \- main.tsx
|- vercel.json
\- package.json

---

Data Model (Firestore)

Main collections:

• users/{uid}: basic public user data.
• users/{uid}/chats/{otherUid}: conversation reference with another user.
• users/{uid}/chats/{otherUid}/messages/{messageId}: chat messages.

Each message stores:

• text
• senderId
• createdAt (server timestamp)

Deployment

The project is prepared for Vercel:

• vercel.json rewrites all routes to index.html to support SPA routing.

Current Status

• Functional app for authentication, messaging, and profile management.
• Test coverage is focused on main routing (src/App.test.tsx).
• There is a Cloud Function scaffold in functions/src/index.ts, currently commented out.

Tests

Run tests in watch mode with fast feedback (development mode):

npm run test

Run tests with coverage:

npm run test:coverage

Run tests with UI:

npm run test:ui

Maintenance Checklist

Review production package vulnerabilities:

npm audit fix

Builds

Generate a production build:

npm run build

---

License

MIT (LICENSE).

Author

Developed by Andres Orozco

• andres.orozco.dev@gmail.com
• LinkedIn

---