weather-app
The attached document is an interview assignment from one of the larger tech firms in Israel.
It is slightly different the the objective I said but still a very good practice on FE.
- Get the core functionality working!
- Use a mocks where possible to limit api calls during development.
- There is a LIMIT of 50 api calls per day (!) (if you run out you will need to make a new key)
- I recommend teamwork (if you do team up let me know who is on your team up to 4 members per team)
Getting started
Frontend
-
Install dependencies
npm install
-
Build app in development mode and run in watch mode
npm run dev
-
Build app in production mode
npm run build
-
Run the tests (using Jest)
# Runs the tests and watches for changes, requires git init first
npm run test
Review and implement according to specs provided.
OVERVIEW
write a simple, responsive, web app that shows the weather of some city. The user should be
able to search for a city and save it to favorites (locally, a server is not required).
We expect to see 2 pages in this app. (weather page and favorites page).
API
The API that you’ll use for this app is AccuWeather API. Please sign up and create a new app to
get an API key.
You will use 3 endpoints: location autocomplete for the search field, get current weather and
5-day daily forecast. Please read those API docs.
NOTE: this API is limited to 50 requests per day. our recommendation is to save the responses
and use them locally during development.
GOALS
- Show us your coding skills - We want to see your strengths, don’t be afraid to go wild, add
features and customize the design.
- Readability - Your code should be readable and self-explanatory with minimum comments.
Remove any unused code, console logs, and files. Use logical project structure and code
separation.
HOW TO SUBMIT
- Push your code to your git repository and make it public (we recommend GitHub to use
GitHub Pages with ease), name the repo as firstName-lastName-dateOfStart
(John-Doe-01-12-2018).
- Deploy the compiled app to your server or GitHub pages/Heroku/etc - MUST
Send us the git repository link and a link to the deployed app (2 links)
abra Web & Mobile Home Assignment
SPECS
- Create a header with navigation icons/links/buttons for main and favorites screen.
- The main screen (weather details) will be composed of a search field to search a location’s
weather by city name. And below it, the current weather and a 5-day forecast of the searched
location. A location should have an indication if it’s already saved in favorites, and a button to
add/remove from favorites (it can be the same button).
- Display Tel Aviv weather by default.
- Favorites screen will be composed of a list of favorite locations. Each location should have an
ID, name, and current weather. Clicking on a favorite will navigate to the main screen showing
the details of that location.
- Searching should be done in English letters only
- State management is a must!
- Responsive design is a must! (flexbox/grid will give you extra points 😉).
- Error handling is a must! (Can be done with toast, modal).
BONUSES
- Set the default location by using the Geolocation API. you will need another API endpoint for
this: get location key by lat/lon.
- Add dark/light theme support (add toggle button in the header).
- Add Celsius/Fahrenheit toggle button.
- Add animations (with good taste).
EXAMPLE
We’ve created a UI mockup, so you’ll have a basic idea of what we expect to see.
Good luck,