Pixel Weather

Pixel Weather is a minimal, simplistic and nostalgic weather app, built with Expo and React Native.

On start, the app asks for user's current location. If granted, the app will fetch and display weather data for that location. Users can tap each stat to see corresponding weather forecasts.

       

Features

• 📱Big component sizes, designed for simplicity and accessibility.
• 🌙Dark theme support.
• 🍭Varying colors for different weather stat levels.
• 🕓Display local time for cities around the world.
• 📈Provide daily forecast for up to 8 days, hourly forecast for up to 48 hours.
• 🌫Provide air quality info.

Dependencies

This project uses the following packages and libraries:

• React Navigation, for navigating different screens.
• expo-location, for getting user's current location.
• axios, for making API requests.
• AsyncStorage, for saving locations locally on user's phone.
• lottie-react-native, for loading animation during data fetching.
• react-native-flash-message, for displaying messages.
• Sentry, for error logging in production.

API Providers

This weather app uses data from the following two sources:

• OpenWeather, for weather data;
• World Air Quality Index Project, for air quality data.

How to Build

1. git clone this repo to your local machine.

2. cd to the folder. Run

   npm install

   to install all dependencies.

3. Apply for API keys from the two data source providers mentioned above. You may need to provide your credit card info for weather data subscription. Create .env in the root folder, and put your API keys into this file, like

   WEATHER_KEY=your-key-string
   AIR_KEY=your-key-string
   

4. Run

   npm start

   or

   expo start

   You will then see a QR code in the terminal. Open the Expo Go app on your phone, scan the QR code to run this project on your phone.

More Screenshots

Hourly Forecast	Wind Forecast	Humidity Forecast

Add City	Delete City	AQI Info

Light theme - home	Light theme - humidity forecast	Light theme - location panel

TODO

• Improve air quality info page.
• Add sunrise and sunset time page.
• Add support for unit and format conversion.
• Implement drag-and-sort for saved locations.