Emotion Reflector is a modern full-stack AI-powered web app that analyzes user-written reflections or thoughts and predicts the underlying emotion, confidence score, and emoji in real time.
It combines the power of FastAPI (Python) for fast backend processing with a Next.js (React + TypeScript) frontend, designed with elegant modern UI (Tailwind CSS & gradient transitions) and deployed seamlessly in the cloud.
Frontend: https://response-frontend.vercel.app
Backend (API): https://response-app-backend.onrender.com/analyze
- 🧠 Predict emotion from free text (using keyword-based NLP logic)
- 📊 Show confidence score & matching emoji
- 💻 Beautiful, responsive frontend with glassmorphism & gradient UI
- ⚡ Real-time interaction with backend API
- 🌐 Deployed on Render (Python) & Vercel (Next.js)
"anxious", "nervous", "happy", "excited", "sad", "proud", "loved", "lonely", "angry", "stressed", "calm", "surprised", "adventurous", "exhausted", "disappointed", "fearful", "hopeful", "joyful", "confused", "grateful", "relieved", "frustrated", "bored", "jealous", "guilty", "motivated", "inspired", "curious", "peaceful", "embarrassed", "determined", "confident", "scared", "shy", "regretful", "disgusted", "hope", "music", "success", "failure", "relax", "win", "family", "alone", "exam", "interview", "travel", "surprise", "tired"
- Next.js (React + TypeScript)
- Tailwind CSS – modern utility-first styling
- Axios – for HTTP requests
- Vercel – frontend deployment
- FastAPI – high-performance Python framework
- Pydantic – request validation
- Uvicorn – ASGI server
- Render – backend deployment
- CORS middleware – to enable frontend-backend communication
/response-frontend ← Next.js app
/components
EmotionForm.tsx ← UI & API integration
/pages
index.tsx ← Home page
/response-backend ← FastAPI app
main.py ← API & emotion analysis logic
📌 Prerequisites: Node.js ≥ 18
Python ≥ 3.8
pip
(Optional) virtualenv
bash Copy Edit
cd response-backend
python -m venv env source env/bin/activate # On Windows: env\Scripts\activate
pip install fastapi uvicorn
uvicorn main:app --host=0.0.0.0 --port=8000
🌐 Deployment Frontend: Deploy to Vercel
Backend: Deploy to Render (free web service) with main.py entry and uvicorn main:app --host=0.0.0.0 --port=8000
Ensure correct CORS setup in FastAPI:
python Copy Edit origins = [ "http://localhost:3000", "https://response-frontend.vercel.app" ] ✅ Why this project matters
This project demonstrates:
Building & deploying modern, full-stack AI tools
Writing clean, modular code (TypeScript & Python)
Connecting frontend & backend securely (CORS, environment variables)
Designing beautiful, user-friendly interfaces with advanced CSS & transitions
Cloud deployment with real URLs – ready to show in your portfolio or resume
Built with by me Surya Pratap Singh