Note: when searching; the WeatherAPI doesn't have ALL the cities in the world, and seems to only have major populated ones. Be sure to use a Zip Code if your City doesn't show up.

1. Quick Start
2. File Structure
3. Front-End Architecture
4. Back-End Architecture
5. Trade-Offs
6. Testing
7. To-Do

git clone https://github.com/bar0191/wapp
cd wapp

.
├── README.md
├── package.json
├── public
├── src
│   ├── App.js
│   ├── assets
│   ├── components
│   ├── index.js
│   ├── server
│   ├── styles
│   └── vendor
└── yarn.lock

Since this project was spun up using Create-React-App, it's purely client side rendered.

Styles in this project are written in SASS using SCSS syntax. Implementation is handled by node-sass, and webpack. BEM model is used.

All Animations and transitions are done through react-pose and pure SCSS.

I followed I very minimalist design approach. The site was styled mobile first, meaning media queries are done for desktop.

This project uses an express back-end to render build in production and is used to consume weather micro-services. Following a model/controller stucture where routes are calling a controller to manage the micro service.

Currently the project is using a static (Non-secret) Token to authorize API calls, purely as an example of how one would authorize an API call in Express. I added Helmet just to show how easy it is to add a little extra protection to a nodeJS application.

Due to time constraints, this projects doesn't have much error handling if the user enters a zip or city that doesn't exist. Right now if a city or zip doesn't exists the form just doesn't submit. That isn't ideal for UX in the real world.

Due to time constraints, I only really designed the project with mobile in mind, so there isn't a very unique desktop design or change from the mobile version. Font's and icon sizes are increased. I would have also liked the change to make the search field more interactive, with autofill/autocomplete functionality.

Due to time constraints, I didn't get to implement a kind of autofill/auto complete feature on the search bar, where if the user types "San" it would display search results for "San Fran", "San Diego", etc. Right now the search functionality will go to the closest matching value. Not ideal for UX either.