Prompt

# Project Prompt: Community Chat Application

## 1. Project Overview & Purpose
Build a **real-time community chat application** as a fast MVP. The core purpose is to enable seamless, secure communication within defined community groups. The MVP must launch quickly with a polished, responsive UI/UX, focusing on core messaging functionality and community management. Iterative refinement of the user experience is a primary requirement.

## 2. Target Users & Use Cases
*   **Primary Users:** Members of online communities (e.g., project teams, hobby groups, support circles).
*   **Secondary Users:** Community moderators/administrators.
*   **Key Use Cases:**
    *   User joins a community via invite link or code.
    *   User sends and receives text messages in real-time within a community channel.
    *   User sees a list of communities they belong to and the active participants.
    *   Moderator can create new communities and manage member lists (add/remove).

## 3. Tech Stack Requirements
*   **Frontend Framework:** React (with Next.js recommended for Vercel deployment).
*   **Real-time Protocol:** WebSockets (using a library like `socket.io` or native WebSocket API).
*   **Database:** PostgreSQL (use a managed service compatible with Vercel, e.g., Neon, Supabase, or Vercel Postgres).
*   **Backend/Deployment:** Vercel (Serverless Functions / Edge Functions). **Constraint:** Use Vercel's managed backend infrastructure; do not self-host a separate Node.js server.
*   **Authentication:** Email/password-based authentication.
*   **Styling:** Utility-first CSS framework (e.g., Tailwind CSS) for rapid, consistent UI development.
*   **State Management:** Lightweight solution (React Context, Zustand) suitable for MVP scale.

## 4. Architecture & Design Patterns
*   **Pattern:** Client-Server with real-time WebSocket layer.
*   **Frontend:** Next.js App Router (or Pages Router) for SSR/SSG where beneficial. Component-based architecture with clear separation of UI, logic, and data fetching.
*   **Backend:** Vercel Serverless/Edge Functions as API routes (`/api/*`) for REST operations (auth, community CRUD). A dedicated WebSocket handler (using Vercel's `@vercel/ai` SDK pattern or a compatible service) for real-time events.
*   **Database Schema:** Normalized PostgreSQL schema with tables for `users`, `communities`, `memberships` (join table), `messages`. Include indexes on foreign keys and `community_id`/`created_at` for performance.
*   **State Sync:** Client-side state for UI; server is source of truth for messages and membership. Use optimistic UI updates for sending messages.

## 5. Core Features With Requirements
*   **Authentication & User Management:**
    *   User sign-up & login with email/password.
    *   Password hashing (bcrypt) on the server.
    *   Session management using secure HTTP-only cookies or JWT stored in httpOnly cookie.
    *   User profile (minimal: display name, avatar URL).
*   **Community Management:**
    *   Create a new community (name, description, optional invite code).
    *   List communities the user is a member of.
    *   View community details and member list.
    *   Moderator-only: Add/remove members (by email or user ID).
*   **Real-time Messaging:**
    *   Send and receive text messages instantly within a selected community.
    *   Messages must display: sender name/avatar, timestamp, content.
    *   Auto-scroll to latest message.
    *   Message history loading (pagination) on initial channel load.
*   **Responsive UI/UX (Critical):**
    *   Fully responsive design (mobile-first approach) for both web and mobile browsers.
    *   Clean, intuitive interface with clear visual hierarchy.
    *   Loading states, error boundaries, and empty states.
    *   Accessible (WCAG 2.1 AA): proper ARIA labels, keyboard navigation, focus management, sufficient color contrast.

## 6. Additional Features (from feature branches)
*   **None.** The scope is strictly the core MVP features listed above. No additional feature branches are to be implemented.

## 7. Integration & API Requirements
*   **REST API Endpoints (Vercel Serverless Functions):**
    *   `POST /api/auth/register`, `POST /api/auth/login`, `POST /api/auth/logout`
    *   `GET /api/communities`, `POST /api/communities`
    *   `GET /api/communities/[id]`, `POST /api/communities/[id]/members`, `DELETE /api/communities/[id]/members/[userId]`
    *   `GET /api/communities/[id]/messages` (for initial history)
*   **WebSocket Events:**
    *   `join_community(communityId)`
    *   `send_message(communityId, content)`
    *   `receive_message(messageObject)`
    *   `user_typing(communityId, userId)` (optional but recommended for UX)
    *   `user_joined(communityId, user)` / `user_left(communityId, userId)`
*   **Database:** All API routes must perform parameterized queries to prevent SQL injection. Use a connection pool (e.g., `pg` library with Vercel's serverless environment considerations).

## 8. Authentication & Security Considerations
*   **Password Security:** Hash all passwords with bcrypt (salt rounds ~10).
*   **Session Security:** Use secure, HTTP-only cookies for session tokens. Set `SameSite=Strict` or `Lax`. Implement CSRF protection if using cookies.
*   **Data Validation:** Validate and sanitize all user inputs on the server (email format, message content length, community name).
*   **Authorization:** All API/WebSocket endpoints must verify the user's session and check membership/ownership before allowing actions (e.g., posting to a community, managing members).
*   **HTTPS:** Enforced by Vercel.
*   **Secrets:** Store all secrets (DB connection string, JWT secret) in Vercel Environment Variables.

## 9. Performance & Scalability Needs
*   **WebSocket Connections:** Efficiently manage connection lifecycle. Implement proper cleanup on disconnect. Consider connection limits per user.
*   **Database:** Create indexes on `messages(community_id, created_at DESC)` and `memberships(user_id, community_id)`. Use connection pooling.
*   **Frontend:** Code-splitting (Next.js default), image optimization, lazy loading for community/message lists.
*   **Caching:** Cache public community metadata and user profiles where appropriate (e.g., using Redis is out of scope for MVP; rely on DB queries with good indexes).
*   **Vercel:** Leverage Edge Functions for low-latency API routes where possible.

## 10. Testing & Deployment Strategy
*   **Testing:**
    *   **Unit Tests:** Jest/React Testing Library for React components and utility functions.
    *   **Integration Tests:** Test API routes and WebSocket handlers in isolation (mock DB).
    *   **E2E Tests:** Cypress or Playwright to simulate user flows: signup, create community, send/receive message.
*   **Deployment (Vercel):**
    *   Connect Git repository (GitHub/GitLab) to Vercel.
    *   Configure Environment Variables in Vercel dashboard.
    *   Set up automatic deployments on push to `main` branch.
    *   Use Vercel's Preview Deployments for every Pull Request.
    *   Database migrations: Use a simple migration tool (e.g., `node-pg-migrate`) run manually or via CI script.

## 11. Success Metrics (MVP Launch)
*   **Functional:** All core features work reliably. WebSocket connection stable. No critical security vulnerabilities.
*   **Performance:** Initial page load < 2s on 3G (Lighthouse). WebSocket message latency < 200ms.
*   **Usability:** Successful completion of core user flows (signup -> join -> chat) without guidance. No UI breaking on mobile viewports.
*   **Code Quality:** Test coverage > 70% for critical paths. Clean, modular code with basic documentation (README with setup instructions).
*   **Deployment:** Successfully deployed on Vercel with connected managed PostgreSQL.