Skip to content

MLH-Fellowship/prep-project-22.AUG.PREP.1

Repository files navigation

Major Weather Hacking

Major Weather Hacking is an app built using React and fetches weather of your current location. It also suggests you with Food, Hotels recommendations and more in your city as well. There is also a search bar that lets you search for other cities too.

Installation

  1. Fork & Clone the Repository
  2. Check whether you have Node installed on your system node -v
  3. Steps for setting up the API key for openweathermap
  4. To generate an API key for openweathermap, you have to register on openweathermap: https://home.openweathermap.org/api_keys
  5. Rename example.env to .env and put your API key in REACT_APP_APIKEY variable
  6. To generate an API key for lastfm, you have to register on last.fm: https://www.last.fm/api
  7. Add another variable with the name REACT_APP_MUSIC_APIKEY and assign it the API key you generated
  8. Install the dependencies with npm install
  9. Run the project with npm start

Folder Structure

    └───src
    ├───App.js
    ├───index.js
    ├───assets
    │   └───images
            └───mlh-prep.png
    ├───components
    │   ├───MainNavbar
    │   ├───SecNavbar
    ├───containers
    │   ├───Footer
    │   ├───Header
    │   ├───Hotels
    │   ├───Main
    │   ├───RandomQuote
    │   └───WeatherAPI

As per the figma design, this is the layout of the React app which we will be working on.

  • index.js is the entry point of the app that handles the all the rendering methods.

  • App.js contains all the components and containers of the app

  • components and containers contain the code for different sections of the app

  • We are using Tailwind CSS to handle all the stylings and React-Icons for the icons as of now.

  • Create a branch with the issue you're assigned to and remember to pull before push