Real-time serverless chat application frontend built with Next.js 14, TypeScript, and Tailwind CSS for CPSC 465.

Team: Muhammad Shahwar Shamim, Daniel Wright, Ansh Tomar, John-Leon Rivera

Live Application: https://d57e9mww85f95.cloudfront.net

• User Authentication - Sign up, sign in, forgot password with email verification via AWS Cognito
• Real-Time Messaging - Instant message delivery via WebSocket connections
• Friend System - Search users, send/accept/reject friend requests
• AI Content Moderation - Messages flagged for inappropriate content shown with visual indicators
• Message History - Persistent chat history loaded on conversation open
• Multi-Tab Sync - Messages sync across multiple browser tabs
• Responsive UI - Mobile-friendly design delivered globally via CloudFront CDN

serverless-chat-frontend/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── layout.tsx
│   │   ├── page.tsx            # Redirect to login
│   │   ├── login/page.tsx      # Login page
│   │   ├── signup/page.tsx     # Sign up page
│   │   ├── forgot-password/    # Password reset flow
│   │   └── chat/page.tsx       # Main chat interface
│   ├── components/
│   │   ├── ChatWindow.tsx      # Message display
│   │   ├── MessageInput.tsx    # Message composer
│   │   ├── Sidebar.tsx         # Friends list
│   │   └── ConnectionStatus.tsx
│   ├── lib/
│   │   ├── ws.ts               # WebSocket manager
│   │   ├── store.ts            # Zustand store
│   │   └── auth.ts             # Cognito auth helpers
│   └── types/
│       └── message.ts          # TypeScript types
├── .github/workflows/
│   ├── ci.yml                  # CI: typecheck, lint, build
│   └── deploy.yml              # CD: S3 sync, CloudFront invalidation
└── public/

• Node.js 18+
• npm or yarn
• AWS account (for deployment)

1. Clone and install:

git clone https://github.com/johnleonrive/serverless-chat-frontend.git
cd serverless-chat-frontend
npm install

2. Configure environment:

cp .env.example .env

Edit .env:

NEXT_PUBLIC_WS_URL=wss://rnf7vtl93i.execute-api.us-east-1.amazonaws.com/prod
NEXT_PUBLIC_API_URL=https://gbctzghf5d.execute-api.us-east-1.amazonaws.com/prod
NEXT_PUBLIC_COGNITO_USER_POOL_ID=us-east-1_OncfX435Y
NEXT_PUBLIC_COGNITO_CLIENT_ID=<your-client-id>

3. Run development server:

npm run dev

Open http://localhost:3000

Push to main triggers:

1. CI workflow - typecheck, lint, build
2. Deploy workflow - build, S3 sync, CloudFront cache invalidation

npm run export
aws s3 sync out/ s3://serverless-chat-frontend-676206934447 --delete
aws cloudfront create-invalidation --distribution-id E3OPTSYB9E4RWP --paths "/*"

• Backend: https://github.com/johnleonrive/serverless-chat-backend

MIT