Live Frontend: 👉 https://project-trao.vercel.app/
Live Backend API: 👉 https://project-trao-backend.onrender.com/
Project Trao is a full-stack, AI-powered Weather Intelligence Dashboard that enables users to:
- Securely register and log in
- Add and manage multiple cities
- View real-time weather data
- Mark cities as favorites
- Search and filter cities
- Interact with an AI agent for contextual weather insights
Unlike a simple weather application, this system integrates a context-aware AI assistant that analyzes user-specific weather data and provides intelligent recommendations, comparisons, and summaries.
The project demonstrates:
- Secure authentication & authorization
- Multi-user data isolation
- Clean architecture and separation of concerns
- Real-time API integration
- Optimistic UI updates
- AI agent integration using LangChain + Gemini
- Modern responsive UI/UX
- React (with Vite)
- Tailwind CSS
- React Router
- Axios
- Framer Motion
- React Hot Toast
- Fast development experience
- Lightweight and modern build tooling
- Excellent ecosystem support
- Utility-first styling
- Rapid UI development
- Consistent responsive design
- Clean, maintainable styling system
- Node.js
- Express.js
- MongoDB (Mongoose)
- JWT (Authentication)
- Bcrypt (Password hashing)
- Axios (OpenWeather API)
- LangChain
- Google Gemini (AI Model)
- Minimal and flexible
- Clean middleware architecture
- Excellent for REST APIs
- Flexible schema
- Natural fit for user-specific data
- Easy document association between users and cities
- Structured AI integration
- Ability to reason over real user data
- Free-tier friendly (Gemini 2.5 Flash)
- Production-grade AI architecture
git clone https://github.com/deepzsenu/Project_Trao.git
cd Project_Traocd weather-dashboard-backend
npm installCreate .env file:
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret
OPENWEATHER_API_KEY=your_openweather_key
GEMINI_API_KEY=your_gemini_key
Start backend:
npm startServer runs on:
http://localhost:5000
cd weather-dashboard-frontend
npm install
npm run devCreate .env file:
VITE_API_BASE_URL=your_base_url
Runs on:
http://localhost:5173
- Hosted on Vercel
- URL: https://project-trao.vercel.app/
- Hosted on Render
- URL: https://project-trao-backend.onrender.com/
- MongoDB hosted on Railway
Frontend (React + Vite)
↓
Backend (Express API)
↓
MongoDB (User Data)
↓
OpenWeather API (Weather Data)
↓
Gemini AI (LangChain Agent)
-
User authenticates via JWT.
-
Cities are stored in MongoDB with user association.
-
Weather data fetched dynamically from OpenWeather API.
-
AI agent receives:
- User question
- Real-time user weather data
-
AI generates contextual response.
-
Response returned to frontend chatbot.
Authentication is implemented using:
- JWT (JSON Web Token)
- Bcrypt password hashing
- Protected routes middleware
- User registers → password hashed.
- User logs in → JWT issued.
- JWT stored on frontend.
- All protected routes require Bearer token.
- Middleware verifies token and attaches
req.user.
Example:
City.find({ user: req.user.id })This ensures:
- Complete data isolation
- Users cannot access other users' cities
- Favorites remain user-specific
- AI queries only analyze authenticated user data
The AI Agent transforms the dashboard from a weather viewer into a weather intelligence system.
It allows users to:
- Ask natural language questions
- Compare cities
- Get weather-based recommendations
- Receive contextual advice
Examples:
- “Which city is hottest right now?”
- “Should I carry an umbrella?”
- “Which city is best for outdoor activities?”
- “Summarize my favorite cities weather.”
Backend AI route:
POST /api/ai
Process:
- Fetch authenticated user's cities
- Fetch real-time weather for each city
- Structure weather data
- Send structured data + user question to Gemini
- Return concise, contextual answer
- Gemini 2.5 Flash
- Integrated via LangChain
Why Gemini?
- Free-tier availability
- Strong reasoning
- Fast responses
- Suitable for job assignment constraints
This is NOT a generic chatbot.
It:
- Uses real-time structured app data
- Respects user isolation
- Provides contextual reasoning
- Is integrated into backend architecture
- Avoids hallucination by constraining data
- Floating chatbot UI
- Context-aware AI assistant
- Animated popup
- Secure backend integration
- Favorite cities visually distinct
- Persistent across sessions
- User-specific state
- Background adapts based on weather condition
- Smooth transitions
- Instant city addition
- Instant favorite toggle
- Instant deletion
- Rollback on failure
- Real-time search
- Favorite-priority sorting
- Framer Motion animations
- Smooth card transitions
- Hover effects
- Chat popup animation
- Improved perceived performance
- Smooth loading experience
Reason:
- API key security
- Prevent key exposure
- Controlled AI context
- User isolation
Trade-off:
- Slightly increased backend load
Reason:
- Always fresh data
- Avoid stale weather
Trade-off:
- More API calls
Reason:
- Better UX
- Feels instant
Trade-off:
- Requires rollback handling
Reason:
- Simpler architecture
- Lower token usage
- Faster responses
Trade-off:
- Stateless responses
- No long-term AI memory (stateless agent)
- Weather API rate limits possible
- Gemini free tier limits (RPM/TPM constraints)
- No offline caching
- No pagination for very large city lists
- Streaming AI responses
- Tool-based AI agent
- AI auto-weather summary button
- Hourly forecast visualization
- Weather trend analytics
- Caching layer for weather data
- Role-based user management
Project Trao demonstrates:
- Secure full-stack development
- Clean architecture
- Modern UI/UX design
- AI agent integration
- Context-aware reasoning
- User data isolation
- Production-ready deployment