Code Monkey home page Code Monkey logo

iweather's Introduction

This application was developed for internship assignment.
You can use the links below to see the UI design at Figma and related GitHub repository.

Figma GitHub

Environment Variables

Environment variables must be set for the application to run properly. First, copy the .env.example file and paste it as .env.local. Then, obtain API keys from the following websites:

  • VITE_WEATHER_API_KEY: You can obtain your api key from Weatherapi. This api provides weather forecasts and current conditions based on the given latitude and longitude coordinates.
  • VITE_OPENWEATHER_API_KEY: You can obtain your api key from Openweathermap. Use this api to accurately locate the given location from the user with their Geocoding API.

Note: If the user chooses a suggestion, the Geocoding API won't be utilized because suggestions already contain latitude and longitude information in the places.json file.

Installation

git clone emirhansirkeci/iWeather
cd iWeather
npm install

Available Commands

Run the application in development mode.

npm run dev

Preview command can be used to run the application in production mode. Before running the preview command, it is necessary to build the project. Once the build process is complete, you can run the preview command.

npm run build
npm run preview

Adding New Locations

You can add new locations to src/utils/places.json to work with the autocomplete feature.

  • name (required): The name of the city.
  • country (required): The name of the country.
  • lat (required): The latitude coordinate.
  • lon (required): The longitude coordinate.

For example, let's add Berlin to the list.

[
  {
    "name": "osmaniye",
    "country": "turkey",
    "lat": 37.06805,
    "lon": 36.261589
  },
  {
    "name": "berlin",
    "country": "germany",
    "lat": 52.520008,
    "lon": 13.404954
  }
]

Now, Berlin will appear as a suggestion like Berlin - Germany.

iweather's People

Contributors

emirhansirkeci avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.