You are a senior full-stack engineer experienced in WebRTC and real-time systems.
Help me build a Google Meet–like video conferencing web application.

## 1. Goal
A web app where a user creates a meeting, gets a shareable link, and other
people join via that link for a multi-party video/audio call, with chat and
screen sharing.

## 2. Tech Stack
- Frontend: ReactJS (Vite), React Router, Tailwind CSS, Zustand or Redux Toolkit
- Backend: Node.js + Express
- Real-time signaling: Socket.IO (WebSocket)
- Media: WebRTC. Start with Mesh (P2P) for up to ~4 users, and design the
  code so it can later move to an SFU (mediasoup or LiveKit) for 10+ users
- Database: MongoDB with Mongoose
- Auth: JWT (access + refresh tokens), plus Google OAuth login (optional)
- STUN/TURN: Google public STUN for dev, coturn (TURN) for production
- Deployment: Docker, Nginx, HTTPS (WebRTC requires HTTPS)

## 3. Core Features (MVP)
1. Sign up / login (and guest join with just a name)
2. "New meeting" button that generates a unique meeting code/link
   (e.g. /meet/abc-defg-hij)
3. Join meeting via link or code
4. Pre-join lobby: camera/mic preview, device selection, mic/camera on/off
5. In-call: multi-user video grid (auto-adjusting layout), mute/unmute,
   camera on/off, leave call
6. Screen sharing
7. In-meeting live chat (stored in MongoDB)
8. Participant list with host controls (mute participant, remove participant)
9. Host "admit/deny" waiting room
10. Active speaker detection (highlight tile)
11. Copy meeting link / invite button

## 4. Advanced Features (Phase 2)
- Raise hand and emoji reactions
- Meeting recording (MediaRecorder or server-side) with storage in S3
- Scheduled meetings with a calendar view and email invites (Nodemailer)
- Meeting history
- Virtual backgrounds / blur (MediaPipe or TensorFlow.js)
- Noise suppression
- Live captions (Web Speech API)
- Pin / spotlight a participant
- Mobile responsive UI, then PWA

## 5. MongoDB Schemas
Design and explain schemas for:
- User (name, email, passwordHash, avatar, createdAt)
- Meeting (meetingCode, hostId, title, scheduledAt, status, settings
  {waitingRoom, allowChat, allowScreenShare}, participants[], createdAt)
- Participant/Session (meetingId, userId or guestName, joinedAt, leftAt, role)
- ChatMessage (meetingId, senderId, message, timestamp)
Add proper indexes (e.g. a unique index on meetingCode).

## 6. Signaling Flow (explain and implement)
join-room, user-joined, offer, answer, ice-candidate, user-left,
toggle-audio, toggle-video, screen-share-start/stop, chat-message,
host-mute, host-remove.

## 7. Non-Functional Requirements
- Low latency, handle network drops and reconnection
- Secure: rate limiting, input validation, CORS, helmet, room access checks
- Clean folder structure (client/ and server/), environment variables,
  ESLint + Prettier
- Error handling for denied camera/mic permissions and unsupported browsers

## 8. What I Want From You
1. First, give the architecture diagram (text), the folder structure, and the
   WebRTC + Socket.IO flow explained simply.
2. Then build in phases: Phase 1 = backend setup + auth + meeting APIs,
   Phase 2 = signaling server, Phase 3 = React UI (lobby + call room),
   Phase 4 = chat + screen share + host controls.
3. Give complete, working code per phase with file names, and the commands
   to run it.
4. After each phase, wait for my confirmation before moving on.
5. Explain the key WebRTC concepts (offer/answer, ICE, STUN/TURN, mesh vs
   SFU) briefly as you go.

Start with Step 1 (architecture + folder structure + schemas).