Frontend Developer Assignment –
Weather Dashboard
⏰ Timeline:
You are required to complete and submit this assignment within 12 hours of receiving it.
🚀 Assignment Overview
You are tasked with building and deploying a Weather Dashboard Web App using [Link].
The app should allow users to search for any city and view its live weather information
using data fetched from the OpenWeatherMap API.
The goal is to evaluate your ability to:
- Write clean and modular React code
- Integrate and display dynamic data from APIs
- Handle loading and error states gracefully
- Build a responsive, user-friendly UI
- Deploy a live web application
🧱 Project Requirements
1. User Interface
Build a clean, modern, and responsive UI with:
- A search bar for users to enter a city name
- A submit button or search-on-enter behavior
- A weather info card showing:
- City Name
- Current Temperature (°C)
- Weather Condition (e.g., Sunny, Rainy, Snow)
- Humidity (%)
- Wind Speed (km/h)
- Weather Icon (use the icon provided by the API)
- Show loading state while data is being fetched
- Show error state if:
- The city name is invalid
- The API fails to respond
🔌 2. API Integration
Use the OpenWeatherMap Current Weather API:
🔗 API URL:
[Link]
q={city}&appid={YOUR_API_KEY}&units=metric
📌 Register for your free API key:
[Link]
You must:
- Make real-time API requests
- Handle success and failure responses
- Use either fetch or axios for HTTP calls
🎯 3. Bonus Features (Optional, but strongly recommended)
- Recent Search History: Save and display the last 5 searched cities
- 5-Day Forecast: Use the 5-Day/3-Hour Forecast API to show weather trends
- Dark/Light Theme Toggle
- Refresh button to re-fetch weather for current city
- Loader animation while data is being fetched
- Basic animations or transitions using Framer Motion or CSS
📦 4. Technical Requirements
- Framework: [Link] (CRA, Vite, or [Link])
- State Management: React Hooks or Context
- Styling: Tailwind CSS / MUI / Chakra UI / Styled Components
- Code Quality: Modular, well-named components and functions
- Error Handling: User-friendly error messages for invalid city or API errors
- Responsiveness: Mobile + Desktop support
- Comments: Add helpful inline comments where necessary
☁️5. Deployment Instructions
You must deploy the app and share a live URL. Use any of the following free platforms:
- Vercel
- Netlify
- GitHub Pages
Make sure:
- The live link is accessible without login
- It opens directly to the Weather Dashboard (no landing page required)
📬 Submission Format
Send us the following in a single email:
✅ Live Deployed App URL
✅ GitHub Repository Link
✅ (Optional) Screenshots or a short Loom video of your app
✅ [Link] file with:
- Tech stack used
- Setup instructions
- API integration details (mention rate limits, keys, etc.)
🚫 Very Important – Read Carefully
❌ Do NOT use ChatGPT or any AI tools to write or suggest code.
We are looking for original thought, real-world skills, and clean code.
Your code will be reviewed manually.
If AI-generated or copied code is found, you will be disqualified.
🧠 Evaluation Criteria
Criteria Weightage
Code Structure & Cleanliness ★★★★☆
API Integration ★★★★☆
UI/UX & Responsiveness ★★★★☆
Edge Case Handling ★★★☆☆
Bonus Features ★★★☆☆
Deployment & README ★★★★☆
Originality (No AI Use) 💯 Must
🔚 Closing Note
We want to see how you approach problem-solving and build real-world features. This
assignment is your chance to stand out and show what you’re capable of. Don’t just build
something that works – build something you’d be proud to show on your portfolio. 🌟
Wishing you all the best!
🚀 Happy Building!
