A real-time social feed application that allows users to share their current mood and instantly receive updates from others using AWS AppSync GraphQL Subscriptions (WebSocket-based).
MoodStream demonstrates how modern frontend applications can integrate with cloud-native real-time APIs while maintaining local UI responsiveness through optimistic updates and client-side state management.
- ⚡ Real-time post updates via AWS AppSync GraphQL Subscriptions
- 🔄 Optimistic UI updates for immediate feedback
- 🧠 Client-side rate limiting (5s cooldown per user)
- 📦 Centralized state management using Zustand
- 🛡️ Schema-driven validation with Zod
- 🌐 WebSocket-based event delivery across browser tabs
- 🔐 Secure cloud API credential isolation using .env
| Layer | Technology |
|---|---|
| Frontend | React + TypeScript + Vite |
| State Management | Zustand |
| Validation | Zod |
| GraphQL Client | Apollo Client |
| Realtime API | AWS AppSync |
| Transport | WebSocket |
| Styling | TailwindCSS |
| Database | DynamoDB |
MoodStream leverages AWS AppSync’s publish–subscribe model to deliver real-time updates to all connected clients.
User Action (Create Post)
↓
GraphQL Mutation
↓
AppSync Resolver
↓
DynamoDB Write
↓
Subscription Trigger
↓
WebSocket Broadcast
↓
All Connected Clients
New posts are instantly propagated to all active browser tabs without polling.
- Install Dependencies
npm install- Configure Environment Variables Create a .env file in the project root:
VITE_APPSYNC_URL=
VITE_APPSYNC_REGION=
VITE_APPSYNC_API_KEY=
- Start Development Server
npm run dev
Open two browser tabs and create a post in one tab.
The other tab will receive real-time updates via WebSocket subscription.
- Authentication via AWS Cognito
- Pagination & infinite scroll
- Message filtering by mood
- Deployment via Vercel