Skip to content

Latest commit

 

History

History
89 lines (61 loc) · 3.62 KB

README.md

File metadata and controls

89 lines (61 loc) · 3.62 KB
Raw

MVP

  • The user will be able to type a city name into a form and receive current weather information
  • Based on the conditions in that city, they will see a message display which is relevant to the weather
  • Below this, there is a recommendations tab which they click on (probably a hash route) which will display at least one other recommendation or weather relevant information, meme, etc

Stretch (in no particular order)

  • Utilise more APIs in the recommendations tab e.g. a game
  • Display a map?
  • Up our CSS game
  • Create more routes or stateful components (e.g. on click etc)
  • Deploy to Heroku
  • Refactor code

Team

  • Marika
  • Kyle
  • Karishma
  • Michael

General Outline of Tasks

For this project we are mainly working on the client side.

Initial Decisions / Stuff that's not actually coding

  • Components - names, how many
  • What properties we want to get from the weather API JSON (e.g.city name, max temp... ) and how many weather types we will have
  • What messages we are going to display for each weather type
  • Get CSS images for weather

Server Side

  • CSS: General styling rules for the whole page. Also need to get CSS images, store them in public folder, and make sure they display to the correct size/layout.

  • Routes file - may not need anything additional. (Need to check if the post route for the location input form needs to go here or on the client side in API function?)

Client Side

  • Api.js: use superagent to write function for Weather API - we want to take the input information from post route and insert it into the API function get request URL. This will return a JSON object from which we select the properties we would like to display (city name, max and min temperature in celsius, description (e.g. cloudy) etc)

  • Based on the weather conditions, we will display a message in our component file (e.g. if sunny, display x)... One idea is we can have multiple options for each condition and the messages can be selected randomly.

  • Hash route for Recommendations component: E.g. this could just display a specific photo from an API and perhaps a message to go with it. This also displays conditionally based on the weather condition.

  • Components - there will be at least 3-4 (and I suspect that they will all need to be stateful):

    • Location submit input (could be combined with the weather conditions one though)
    • Weather conditions (from API)
    • Message of recommendation (string)
    • Recommendations (hash route) for displaying our other APIs

A starter webpack project for React

This is a starter project that uses webpack to transpile and bundle ES6 React code. To use, consider these steps:

  • Fork this repo
  • Rename your repo according to the app you're building
git clone https://github.com/[your-account]/[your-app].git
cd [your-app] && npm i
npm run dev  - to start the server

To start the development server with a watcher that rebuilds your code, run npm run dev. The assets built by webpack are placed in server/public. This folder is defined as a static folder in an Express.js server that can be started with npm run server.

Additional components should be placed in client/components.

Separate client/server

The boilerplate is also set up to host the client using webpack-dev-server with hot module reloading etc. To use this method, in one terminal run:

npm run client

and in the other:

npm run server

The client will be available on http://localhost:8080 and the server on http://localhost:3000. Note that you will still need to manage CORS between the two, as they are on different ports.

Link to Heroku

https://weather--app-2020.herokuapp.com/