Weatherpedia ⛅

Tech Stack 📚

Built on ReactJS using create-react-app .

Demo 🎥

Project Structure 🔌

Weatherpedia
|
|__________public                 # contains static files
|          |
|          |_____index.html       # contains root div, meta tags, style links, cdn's, etc.
|          |
|          |_____style.css        # contains all the css styles used any where in the project
|          |
|          *Other static files*
|
|
|__________src                    # contains source files / components
|          |
|          |_____App.js           # handles react router and routes
|          |
|          |_____HomePage.js      # homepage component, handles theme and theme change on homepage
|          |
|          |_____Index.js         # react-dom, renders App component to root div in index.html
|          |
|          |_____Navbar.js        # Navbar component
|          |
|          |_____Navigate.js      # contains navigate button which on click changes the route to "/weather"
|          |
|          |_____SearchBar.js     # SearchBar component, form with a input field to accept a city name
|          |
|          |_____Title.js         # for displaying titles and/or temperature, city name & country code
|          |
|          |_____Weather.js       # handles major functions of the app - api fetching and displaying the weather data
|          |
|          |_____WeatherCard.js   # generates a card for different values of weather data passed as props from Weather.js
|
|
|__________.env                   # for storing environment variables
|
|__________.gitignore             # specifies intentionally untracked files that Git should ignore
|
|__________README.md              # github readme file
|
|
*other project files*

Setup 🛠

Prerequisites :

npm is required for installing dependencies. npm usually comes blundled with node.

Install Node, if it is not installed already.

To check whether node is present or not, go to your command line / terminal and type in node --version .
If a version shows up, means node is installed. If not, install the LTS version of Node. Check for npm using npm --version.
install git for version control and for cloning the repository. Verify using git --version.
This app takes weather data from OpenWeather. Which requires an API key. Sign up and generate your own free API key which will be required during installation process.

Installation :

Step 1: Fork this repo

Step 2: Clone your forked version of this repo locally. To clone, go to your command line / terminal, cd over to an appropriate directory and type in git clone https://github.com/<your username>/weatherpedia.git

Step 3: cd weatherpedia

Step 4: Open the project in your favourite text editor

Step 5: Create a .env file in the root of the project and type in REACT_APP_API_URL=https://api.openweathermap.org/data/2.5/weather?appid=<YOUR API KEY HERE>&units=metric&q=. Strictly maintian the structure of the url and make sure it ends with &q=. Take a look at .env.example file for reference. Put your API Key in place of <YOUR API KEY HERE> and save the .env file. (Also note that environment variables in React should start with REACT_APP_)

Step 6: On the command line / terminal type in npm install to install dependencies

Step 7: Finally run the app using npm start

The server will start on port 3000 which can be accessed through http://localhost:3000/ .

API 📊

This React app fetches current weather data from OpenWeather using OpenWeatherMap API.

Developer 😎

Made with ❤ by SandeepKrSuman.

Credits for using the pictures

The pictures used in this app are royalty free pictures. Proper credits are given to the creators below.

Shout-out to these amazing people :

Pictures used in the app	Credits
homepage-day	ela23
homepage-night	Alexei Novikov
snowfall	Josh Hild
clear-day	Matthew Bowden
drizzle	Philippe Tarbouriech
rainfall	Jack Finnigan
thunder	Michael D
Haze	Luca Cinacchio
fog	Sebin Thomas
squall	Andrea Fabry
tornado	Ralph W. lambrecht
scattered-cloud	Adriel Kloppenburg
overcast-clouds	Nathan Anderson
clear-night	Raimond Klavins

shubhamjha25/weatherpedia