Case Study: Weather Forecasting Web App
Objective:
You are tasked with developing a weather forecasting web application that provides real-time
weather information based on the user's location or a location entered by the user. The app should
be simple, user-friendly, and responsive across different devices.
Project Scope:
Frontend Development:
- Create a web interface that allows users to input a city name or use their current location to fetch
weather data.
- Display current weather conditions, such as temperature, humidity, wind speed, and a brief
weather description.
- Include basic error handling (e.g., invalid city name, API errors).
- Make the interface responsive to different screen sizes (desktop, tablet, mobile).
Backend Development (Optional):
- You can create a simple backend to store user search history or cache results for faster
responses.
- Alternatively, use the provided API directly from the frontend.
API:
- Use the OpenWeatherMap API (free tier) to fetch weather data.
- API Documentation: https://openweathermap.org/api
- API Key: Sign up for a free API key.
(If you choose another API, please include the corresponding documentation link and API key
registration steps in your README file.)
Requirements:
Frontend:
- Use any modern frontend framework/library like React, Vue.js, or Angular.
- Implement a responsive design using CSS or a framework like Bootstrap or Tailwind CSS.
- Display weather details in a user-friendly manner.
- Include a loading indicator while fetching data.
Backend (Optional):
- Use Node.js, Python (Flask/Django), or any backend technology you are comfortable with.
- Implement API endpoints if needed for storing/retrieving user data or caching results.
- Use a simple database (SQLite, MongoDB, etc.) for persistent data if required.
Deliverables:
GitHub Repository:
- Create a public GitHub repository for the project.
- Include a README.md file with:
- Project overview
- Instructions to set up and run the project locally
- API usage details (if backend is implemented)
- Screenshots of the app in different screen sizes
- A brief description of your approach
Deployment (Optional):
- Deploy the app on any free hosting platform (e.g., GitHub Pages, Vercel, Netlify, Heroku).
- Include the deployment link in the README file.
Evaluation Criteria:
- Code Quality: Clean, readable, and well-documented code with meaningful commit messages.
- UI/UX: A simple and intuitive user interface with responsive design.
- Functionality: Properly functioning app with accurate weather data, minimal bugs, and basic error
handling.
- Bonus: Implementation of additional features such as displaying weather forecasts, using
geolocation, or storing user search history.
Timeline:
You have 5 days to complete the project.
