Create a web application that allows users to explore any city by providing:
- Current Weather Information: Temperature, humidity, and weather conditions using the OpenWeatherMap API.
- Interactive Map: A map centered on the searched city using the Mapbox API or Google Maps API.
- City Images: A gallery of photos related to the city using the Unsplash API.
- Search Functionality
- Implement a search bar where users can input the name of a city.
- Provide suggestions or autocomplete features to enhance user experience (optional).
- Display Information
- Weather Details:
- Show current temperature, humidity, and a brief description of the weather.
- Include weather icons representing the current conditions.
- Map Integration:
- Display an interactive map centered on the city.
- Allow users to zoom in and out.
- Image Gallery:
- Present a collection of photos related to the city.
- Implement a carousel or grid layout for displaying images.
- User Interface
- Design a responsive and intuitive UI that works on both desktop and mobile devices.
- Use modern design principles and consider accessibility.
- Technology Stack
-
Front- End Developers: Use HTML, CSS, and JavaScript frameworks/libraries like React, Angular, or Vue.js.
-
Back- End Developers: Use PHP with any framework you’re comfortable with.
-
Implement server- side rendering or APIs to handle data fetching.
- API Integration
- Properly handle API keys and secure them (do not expose them in the client- side code).
- Manage asynchronous requests and handle loading states and errors gracefully.
- Documentation
- Include a README.md file with instructions on how to set up and run the application.
- Briefly explain your architectural choices and any trade- offs you made.
- Implement additional features like local time, currency information, or points of interest using other public APIs.
- Add user authentication to save favorite cities.
- Use TypeScript for type safety.
- Write unit tests for your code.
- Dockerize it
- Host your code in a public GitHub repository.
- Ensure the repository includes all the necessary files to run the application.
- Do not commit any sensitive information (API keys should be secured).