Giters

diegolameira / weather-nearby

See how is the weather around the world or nearby you, Wonderfully!

Home Page:weather-nearby.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

0. Assignment Requirements and notes

diegolameira opened this issue · comments

commented

Assignment Requirements

The assignment involves creating a front end for a weather application using React. This application needs to show weather information of cities around the world. The main functionalities of the application are:

  1. Showing a map. The application must show a map and a button “Search”.
  2. Adding a pin. The user should be able to place a pin on the map and click on the button “Search”.
  3. Consuming an API. The application needs to call API considering the LAT/LON where the user placed the pin and search for the closest 15 cities using openweathermap.org API.
  4. Listing cities. The application needs to show the list of the city names and the user should be able to visualize more information about the city temperature.
  5. Selecting a city. When the user picks a city, the application opens a new window showing more details:
    1. Name of the selected city
    2. Minimum temperature (Celsius)
    3. Maximum temperature (Celsius)

Evaluation

  1. Best practices
  2. Software engineering principles: separation of concerns and architecture
  3. Application usability and performance
  4. The readme file explaining step by step the technologies used and how to run your code

Approach

UX/UI

As I'm a former designer, I will take a step foward and make the greatest ever layout I can so it look gorgeous.

Adobe XD as its simple and fast to prototype and ease to share as document.

Click here to read about my creative process

Development

Choosed Create React App as scaffold tool... with typescript, as it has the minimum needed to start and it provides prop typed components cleaner than flow/prop-types.

KISS Principle
I will look for the very simple solution, keeping it simple... as there is no need to overcomplicate things with Redux, Axios or other stuffs.

Breaking Rules

One of the requirements is to have a button named "Search", for the sake usability I will use a search input with this button and the action of listing will be a list button.

Let`s go!