Build a weather application that allows users to search for the current weather conditions of a city, utilizing WeatherAPI service. The project was developed using Next.js, TypeScript, Zustand for state management, Tailwind for styling, and tested with Jest and React Testing Library.
GOOGLE_API_KEY
: For getting the autocomplete locations.WEATHER_API_KEY
: For fetching weather data.
-
Clone the repository:
git clone https://github.com/Tooluloope/weather-app.git
-
Navigate to the project directory:
cd weather-app
-
Install dependencies:
yarn
-
Add environment variables: Create a
.env
file at the root of the project and add your API keys:GOOGLE_API_KEY=your_google_api_key WEATHER_API_KEY=your_weather_api_key
-
Start the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
Run the tests using the following command:
yarn test
- Next.js & TypeScript: For development.
- Zustand: State management.
- Tailwind: Styling.
- Jest & React Testing Library: Testing.
The app is deployed on Vercel.
Here are some potential improvements:
-
Unit Control:
- Allow users to select their preferred units for temperature (e.g., Celsius, Fahrenheit), wind speed, and time format (e.g., AM/PM or 24-hour clock).
- This customization would make the application more user-friendly across different regions and personal preferences.
-
Customizable Data Display:
- Provide an option for users to choose the specific weather data they want to view from the available API response.
- This feature would enable a more personalized and relevant user experience, as they can focus on the information that matters most to them.
-
Weather Forecast:
- Extend the application to include well detailed future weather forecasts, providing more comprehensive information for the user.
- Different views could be implemented, such as hourly or weekly forecasts.
-
Localization and Internationalization:
- Implementing localization to support different languages and regions could broaden the application's reach and accessibility.
-
Enhanced Error Handling and User Feedback:
- While basic error handling is in place, there could be more robust solutions, providing clear and helpful feedback to the user in various scenarios.
-
Cypress Integration Testing:
- Implementing end-to-end testing using Cypress would further ensure the reliability and integrity of the application.
- These tests would cover entire user journeys and validate that the application behaves as expected in real-world scenarios.