For this code test you will be creating a weather application with React and Redux.
We have provided with you with the app's basic boilerplate and webpack configurations. You should only have to build any necessary components, action creators, reducers, etc. React Hot Loader is enabled as well, so saving a component should update it in the browser.
Make sure you have Node >= v4.0. Then run the following commands:
npm install
npm start
The app will start on localhost:3000.
This app makes use of PostCSS and basic CSS Modules. We have included the following PostCSS plugins:
We have included the React-Toolbox which provides many Material Design components that you may import.
You can override any React Toolbox settings in src/theme/_config.scss.
The landing page should have a header bar that lists the current date. It should also have an edit button that is visible if there are any cities listed. Clicking the edit button turns on edit mode, which allows the user to remove a city. There should be a FAB button at the bottom right of the screen that is fixed. Clicking on it should open a dialog box that lets the user search for a city to add to their favorites list.
The main body of the landing page is the list of the user's favorite cities. For every city the user has added you should pull the forecast from a weather API and display some data. The background of the city card should be dynamically created based on the city's current weather. Clicking on a city card should route the user to a city detail page.
There is an empty state in the case that a user doesn't have any favorite cities.
We recommend utilizing the Google Places Autocomplete API to generate autocompleted search results when a user starts typing in a city name. However, you have freedom to implement this however you like.
The city detail page should display additional weather information for the chosen city. The header on the detail page should change to display the name of the city with a close icon to go back to the main list. The FAB button should not be displayed on the city detail page.
There should be a snapshot of today with information about the current weather, as well as a future six-day forecast.
The background color of the city detail page should be dynamically determined based on the city's current weather, just like on the landing page.
- Forecast.io - This is the weather API we recommend. It provides weather data and allows for up to 1000 API calls per day for free.
- Google Places Autocomplete - React Geosuggest is a great library that implements the Google Places API. You can use this library to more easily implement autocomplete.
- Skycons - The Forecast.io API returns an icon parameter for every forecast. You can use that parameter and this API to easily display animated weather icons.
- React Toolbox - This is a framework that includes a number of Material Designed components. Using this will make it easier for you to follow the provided designs.
We will be reviewing your submission based on the following:
- Does it function as expected?
- Does the layout match the design provided?
- Code style and organization.
- Proper usage of libraries and frameworks.
- We should be able to setup your submission by running
npm install .; npm start.
Please provide adequate instructions to setup and run your submission locally. Please provide your solution zipped via email. Do not host publicly.