A modern React application that delivers a 5-day weather forecast along with interactive and experimental features like AI chat, voice interaction, face detection, and more — built to demonstrate real-world API integration and advanced browser capabilities.
Open in your browser:
--
Clone or download the project, then navigate into the project folder:
- cd Weather-app-3-main
- npm install
- npm run dev
--
- Fetches real-time weather data from OpenWeatherMap API
- Displays a 5-day forecast
- Shows:
- Day of the week
- Temperature (°C)
- Weather icons
- Descriptions
- Data is transformed for clean UI rendering
- Currently set to display weather for London:
const city = 'London'; --
- Chat with an AI inside the app
- Powered by OpenRouter API
- Features:
- Real-time responses
- Typing indicator
- Controlled input
- Dynamic messages
- Requires an API key stored in your
.envfile:
VITE_CHAT_BOT_KEY=your_openrouter_api_key_here--
Speak into your microphone and hear your voice repeated back using AI-generated speech in different voices.
- Speak into your microphone
- AI responds with generated voice audio
- Repeats what you say using AI-generated voices
- Fully client-side (no backend required)
- Browser SpeechRecognition API
- Speechify API (text-to-speech)
- Audio streaming with Blob
- React state & refs
- Click “Talk” to start recording
- Click “Hang Up” to stop
- The AI listens and repeats your speech back to you
You can change the voice directly in the component:
const botAudioBlob = await getVoiceBotResponse(text, "rob");
Available voices include: "rob", "lisa", "emily", "oliver", "jesse", "ken", "grady", "lela" and more
To explore all voices:
Run the test.js script in your browser console It will log all available voice names and IDs
- Requires microphone permissions
- Works only in browsers that support SpeechRecognition
🔑 Setup (Voice Bot)
- Create an account with Speechify
- Generate an API key
- Add it to your .env file:
VITE_VOICE_BOT_KEY=your_speechify_api_key_here
--
- Say a secret phrase to unlock a hidden route
- Currently, the secret phrase is hardcoded as:
const secretPhrase = "unlock"; // “voice password”
- If the correct phrase is spoken, the app redirects to
/paypal - Demonstrates speech-based authentication using the browser’s SpeechRecognition API
- Future improvement: Allow users to set their own secret phrase instead of using the hardcoded default
--
- Embedded PayPal donation button on the app
- Built using the PayPal SDK (sandbox environment)
- Click the button to be redirected to the PayPal donation page
- Note: This is currently a demo; the hosted button ID needs to be replaced with your own PayPal sandbox or live ID for full functionality
- Demonstrates integration of third-party payment buttons in React
--
- Uses the webcam to detect a user’s face
- Redirects to
/memeson successful detection - Demonstrates:
- Face detection using face-api.js (GitHub)
- Browser Camera API (
navigator.mediaDevices.getUserMedia) - AI model usage for real-time face recognition
- Loads pre-trained face detection models from
face-api.js - Accesses the user’s webcam and streams video to a
<video>element - Detects the face in real-time when the user clicks “Scan Face”
- If a face is detected, the app navigates to the hidden
/memesroute
- Requires camera permissions
- Works only in browsers that support
getUserMedia - Depends on
face-api.jsmodels being successfully loaded
- Add multiple user profiles with custom face recognition
- Improve detection accuracy and speed
- Combine with voice authentication for multi-factor security
--
The app fetches and displays a random meme to make the user experience more fun and engaging.
- Fetches a random meme from the Meme API
- Displays the meme image dynamically in the app
- A new meme is loaded every time the page is refreshed
- React
useEffectanduseState - Async/Await for API calls
- Dynamic image rendering in JSX
- Official API documentation: Meme API GitHub
--
The app displays a randomly generated motivational quote to brighten the user’s day.
- Quotes are stored locally in the app
- Click the “Reveal My Quote for Today” button to display a random quote
- The button hides after clicking
- Refreshing the page allows the button to be clicked again to generate a new quote
--
The app displays random fun facts alongside the forecast.
A new fun fact is shown each time the page is refreshed.
--
- React – Component-based UI development
- React Router – Client-side routing and navigation
- Vite – Fast development server and build tool
- JavaScript (ES6+) – Application logic and API handling
- CSS – Styling and layout
- OpenWeatherMap API – Fetches real-time 5-day weather forecast data
- Meme API – Retrieves random memes displayed in the app
- OpenRouter API – Powers the AI chatbot responses
- Speechify API – Converts text responses into AI-generated speech
- SpeechRecognition API – Converts user speech into text for voice features
- face-api.js – Detects faces using the webcam for Face Login
- Webcam / Camera API (
getUserMedia) – Accesses the user's camera - Audio Streaming (Blob + URL.createObjectURL) – Plays generated AI voice responses
- Environment Variables (.env) – Secure storage for API keys
Example:
VITE_WEATHER_KEY=your_openweather_api_key_here
VITE_CHAT_BOT_KEY=your_openrouter_api_key_here
VITE_VOICE_BOT_KEY=your_speechify_api_key_here
- React Hooks (
useState,useEffect,useRef) - API data fetching with
fetch - Async / Await handling
- Conditional rendering
- Component modularization
- State management
- Interactive React quizzes that let users test their knowledge across different categories. The app includes two quiz types:
1️⃣ Geography Quiz
- Fetches 10 geography questions from the Trivia API
- Displays questions and answer options as clickable buttons
- Users select answers and click Submit to see their score
- Refreshing the page loads 10 new random questions
2️⃣ Mixed Categories Quiz
- Fetches 10 medium-difficulty questions from multiple categories: general_knowledge, history, music, science, food_and_drink, film_and_tv
- Options for each question are shuffled randomly
- Users select answers and click Submit to see their score
- Refreshing the page loads 10 new random questions
🔑 How It Works
- User clicks a quiz type button on the main page
- Questions are fetched from the Trivia API https://the-trivia-api.com
- Options are displayed as clickable buttons
- Users select answers and submit
- Score is calculated and displayed
- Refreshing the page reloads new random questions