Talker — Frontend

React (Vite) frontend for the Talker chat app, built against your existing Express backend.

Setup

npm install
cp .env.example .env   # then edit VITE_API_URL if your backend isn't on localhost:3000
npm run dev

Runs at http://localhost:5173 by default.

Before running this against your backend

Your backend needs a few small additions to support this frontend — a users list, recent chats, CORS, a /me session-check endpoint, and basic socket relay logic. None of your existing logic changes. See BACKEND_PATCH.md (in the separate backend-patch folder you received) for exact diffs.

Without that patch:

• Login/register will work, but the app won't know you're logged in after a refresh (no /me)
• The sidebar will fail to load (no /api/users or /api/users/recent-chats)
• Messages sent via REST will save, but won't arrive live for the other person (no socket relay)
• Cross-origin requests will be blocked by the browser (no CORS)

Structure

src/
  api/          axios instance + one file per resource (auth, users, messages)
  context/      AuthContext (session state), SocketContext (live connection)
  components/   reusable UI: Sidebar, ChatWindow, MessageBubble, Avatar, forms
  pages/        LoginPage, RegisterPage, HomePage

Notes on backend assumptions baked into the API layer

• POST /api/auth/register is sent as multipart/form-data (your backend requires a propic file via multer).
• POST /api/auth/login sends both username and email set to whatever the person typed, since your backend's $or query checks both fields — this lets people log in with either.
• All requests use withCredentials: true since your auth is cookie-based.
• sendMessage calls POST /api/chats/sendMessage/:id — note this requires the one-line route fix in BACKEND_PATCH.md (the original route was missing :id, which would silently fail every send).

Features implemented

• Register (with required profile photo) / Login / Logout
• Recent chats list + "People" list to start new conversations
• Send messages, delete an individual message, delete an entire chat
• Live message delivery via Socket.io (after the backend patch)
• Session persistence across page refresh