stage88/react-weather

README

React Weather

A simple weather app built with React Native

Inspiration

I wanted to learn how to make apps using React Native. Instead of inventing an app, I wanted to try and see how hard would it be to implement one of my favourite weather apps: Pocket Weather Australia. Full credits for user experience goes to them.

The app architecture/structure is mostly based on ideas I've seen in the Facebook's F8 app. You can read more about it on their web site: http://makeitopen.com/.

Development stack

Flow was enabled to catch typing errors in React Native JavaScript code
Realm for React Native is used to persist data
I used Nuclide and Visual Studio Code on OSX, both have great support for React Native app development
I used git for version control, and stored progress on GitHub.
Currently only tested on an iOS device

APIs

Weather data is retrieved from http://openweathermap.org/
Australia postcode and suburb data is retrieved from http://postcodeapi.com.au/
You can see examples of API data in react-weather/api

Note about API data

The weather data retrived from Open Weather is not very accurate. Most of the time, the weather forecast is not correct. The most reliable Australian weather data is hosted by Australian Bureau of Meteorology, however it is not very API friendly.

External packages

react-native-parallax-scroll-view: A ScrollView-like component with parallax and sticky header support. I use a customised version of the component to modify behaviour of animations.
react-swipeable-views: A React component for swipeable views

Weather images

Images are used without permission from Google Weather, for example: Canberra Weather.

Current progress

App skeleton
Basic UI prototype
Call weather APIs for data
Add React Redux, implement store
Create first actions, reducers
Implement weather service
Add scroll view animations
Add pull to refresh
Implement basic settings UI prototype with navigation
Create location and weather repositories backed by Realm
Create settings repositories backed by Realm
Call Australian postcode APIs when adding locations
Add support for Android devices

Pocket Weather	React Weather

Running

Clone & install

Clone this repo git clone git@github.com:stage88/react-weather.git
cd react-weather
run npm install

API keys

Get your API key from http://openweathermap.org/
No key is required to use http://postcodeapi.com.au/
Create a new file release/keys.js:

module.exports = {
	weatherApiKey: 'YOUR_KEY_HERE'
};

iOS

Open ReactWeather.xcodeproj in XCode
Press cmd+r to build it

Android

Run android avd and start an emulator
Run react-native run-android

License

Released under the MIT License.

Feedback

Feedback is always welcome. Feel free to contact me, I would love to know if you notice something that can be done better. Please be nice, this is my first React Native app.