MLH Prep Project

Over the next 2 weeks, you'll be building a React App that works with various APIs (Application Programming Interfaces) that talk to different data sources to do cool stuff.

We're using the OpenWeather API to get weather data on different cities. Your challenge over the next 2 weeks is to build out this website and add even more functionality to it. At the moment, it displays basic information about a location when you type it in. Check out Issues for some more ideas!

You'll need to get your own API Key from their website (for free) and add it as an environment variable in a .env file. We have a template available as example.env.

You'll be using React initially to build this. If you're new to React, check out the website for some information on getting started!

Contributing Guidelines

Commit Convention

Before you create a Pull Request, please check whether your commits comply with the commit conventions used in this repository.

When you create a commit we kindly ask you to follow the convention category(scope or module): message in your commit message while using one of the following categories:

• feat / feature: all changes that introduce completely new code or new features
• fix: changes that fix a bug (ideally you will additionally reference an issue if present)
• refactor: any code related change that is not a fix nor a feature
• docs: changing existing or creating new documentation (i.e. README, docs for usage of a lib or cli usage)
• build: all changes regarding the build of the software, changes to dependencies or the addition of new dependencies
• test: all changes regarding tests (adding new tests or changing existing ones)
• ci: all changes regarding the configuration of continuous integration (i.e. github actions, ci system)
• chore: all changes to the repository that do not fit into any of the above categories

If you are interested in the detailed specification you can visit https://www.conventionalcommits.org/ or check out the Angular Commit Message Guidelines.

IMPORTANT To commit the code, we have commitlint and commitizen configured in the project along with husky precommit hook.

To commit, simply run:

yarn commit

Creating a Pull Request

• Create a new branch out of the main branch. We follow the convention [type/scope]. For example fix/storybook-addon or docs/component-api. type can be either docs, fix, feat, build, or any other conventional commit type. scope is just a short id that describes the scope of work.

• Make and commit your changes following the commit conventions by using yarn commit command.

• Always Squash and Merge the PR after it is reviewed to the staging branch i.e. develop branch.

• Never merge your code or the PR directly to main

Creating API key for Food Recommendations:

Spoonacular API can be used for food recommendations

• Click on 'Start Now' button to go to the signup page.

  

• Sign Up with email. Confirm your account by following the steps in the email sent by spoonacular

  

• After confirming, log in to your account. You will automatically be subscribed to the free plan.

• Go to the profile section on the dashboard, and click on 'Show/Hide API key' button

  

• Copy this API key. Create a .env file in the root of your local repository, and add the API key inside it as:
  REACT_APP_FOOD_API_KEY=

You'll be using React initially to build this. If you're new to React, check out the website for some information on getting started!

Creating API key to enable Auto-Complete Feature for Cities:

• Go to the Manage resources page in the Cloud Console.

• Click Create Project.

• In the New Project window that appears, enter a project name. A project name can contain only letters, numbers, single quotes, hyphens, spaces, or exclamation points, and must be between 4 and 30 characters.

• When you're finished entering new project details, click Create.

• Go to the Google Maps Platform > Credentials page and make sure you have selected the appropriate Project.

• On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.

• Copy this API key. Create a .env file in the root of your local repository, and add the API key inside it as:
  REACT_APP_GOOGLE_MAPS_PLACES_API_KEY=

• Now go to API.

• Click on Places API and enable it.

• Similarly Click on Maps JavaScript API and enable it.

• Now go to billing Section and link a billing account, do not worry it is free of cost.

• Restart the terminal and run the app.

Creating API key to enable Spotify Feature for weather:

• Go to the spotify website.

• Click on developers in the footer

• Click on dashboard in the header.

• Click on create a new app and fill in your apps details

• Once created you'll receive a SPOTIFY CLIENT ID and SPOTIFY_SECRET

• Add these to your .env to start making requests and remember to restart the server and run the app