Weather-Forecast is a React-based weather forecasting project that provides users with detailed information about countries in a chosen region, including capital, population, area, and current weather conditions such as temperature, humidity, wind speed, and atmospheric pressure. It offers an easy-to-use interface and accurate weather data.

Overview

Weather Forecast

πŸ“— Table of Contents

πŸ’» Weather Forecast

Weather-Forecast is a Microverce React capstone project. Using this project users can see a list of countries in a particularl region with country details and also see the weather of that country.

πŸ›  Built With

Tech Stack

I used React, Redux, Javascript and css to build this project.

Client
  • React
  • Redux
  • JAVASCRIPT
  • Html
  • CSS

Key Features

Some key feature of this project Features

  • User can see list of countries by selecting the region
  • User can see a the weather of a country

(back to top)

πŸš€ Project Demo

Live Project Demo

Project demo picture

Capture

(back to top)

πŸ’» Getting Started

Please follow the instructions to clone the repo To get a local copy, follow these simple example steps. Clone this repository or download the Zip folder:

Prerequisites

In order to check the linters errors and also see the project in your local machine make sure you have installed the nodejs

Setup

Clone this repository to your desired folder: cd [folder] to navigate and run the below comand to clone the project

git clone https://github.com/raihan2bd/weather-forecast.git

Install

Install this project with:

download npm the packages

npm install

To download the dev dependency you have to type this command:

npm i --save-dev

Usage

To see the project in your local browser first of all, go to project file and navigate the directory on your terminal and type below command:

npm start

After start the dev server a new tab will be open your browser.

To build this project you have to run the below command:

npm run build

To see the test result you have to run the below command:

npm test

(back to top)

πŸ‘₯ Author

πŸ‘€ Abu Raihan

(back to top)

πŸ”­ Future Features

  • I will refactor this project with TypeScript Language
  • I will add voice and setting functionality in this project

(back to top)

🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project!

(back to top)

πŸ™ Acknowledgments

Without Microverse Help this project not compleated at all so thanks a lot Microverse for giving us this kind of opertunity. Also I would like to thanks Nelson Sakva for Original Design Official Behance Page πŸ‘‰ @NelsonSakva, Api Provider πŸ‘‰ REST COUNTRIES πŸ‘‰ Open Weather

(back to top)

πŸ“ License

This project is MIT licensed.

(back to top)

You might also like...
The Country-stats is a a React, Redux application based on the Countries details

This web application is build with react and provides statistical insights on Countries around the world and there continents. The application allows users to filter through the information by different continents and countries..

Solvent Connect Wallet - A react web app that help its users to see information about the connected wallet and make airdrop or send solana
Solvent Connect Wallet - A react web app that help its users to see information about the connected wallet and make airdrop or send solana

Solvent Connect Wallet - A react web app that help its users to see information about the connected wallet and make airdrop or send solana

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Weather-app - Build a weather app in react js using Open Weather API

React JS Weather App Build a weather app in react js using Open Weather API. Fol

Uniswap Clone Interface - a Dapp application that replicates the Uniswap web application interface
Uniswap Clone Interface - a Dapp application that replicates the Uniswap web application interface

This project was developed with ReactJS, being a Dapp application (decentralized application) that replicates the Uniswap web application interface. With this interface it is possible to perform the real login connection with your MetaMask digital wallet previously installed in your browser.

Readme.md generator is a React application that takes basic information about the user's project as an input and generates a README file which the user can upload directly in their project's repository.
Readme.md generator is a React application that takes basic information about the user's project as an input and generates a README file which the user can upload directly in their project's repository.

An application that takes basic information about the user's project as an input and generates a README.md file which the user can upload directly in their project's repository.

Edgy - is a social media marketing agency that offers Instagram growth services and is built with React and Tailwind
Edgy - is a social media marketing agency that offers Instagram growth services and is built with React and Tailwind

Edgy - is a social media marketing agency that offers Instagram growth services and is built with React and Tailwind

Currency converter made with React, XE API and REST Countries API.

Currency Converter HOW TO RUN THE APP To run the app from the terminal, navigate to the root folder and first run 'npm i' to install the node modules.

Covid19-Tracker 🦠 - showcases react projects of covid cases from all countries

This is My react capstone project, This project is talking about covid cases in all countries in the world and also displays all the information details to each country with all covid cases or recovered cases.

Comments
  • Weather Forecast Capstone Project Final Review

    Weather Forecast Capstone Project Final Review

    Weather Forecast

    Hi there πŸ‘‹ , In this PR:

    • Use React documentation.
    • Use React components.
    • Use React props.
    • Use React Router.
    • Connect React and Redux.
    • Handle events in a React app.
    • Write integration tests with a React testing library.
    • Use styles in a React app.
    • Use React life cycle methods.
    • Apply React best practices and language style guides in code.
    • Use store, actions, and reducers in React.
    • Fix the Linter's errors
    • Add necessary styles and also add a professional readme file.

    πŸš€Useful links:

    Project Demo

    Loom Video

    Api Links

    REST COUNTRIES Open Weather

    Design guideline link

    Nelson Sakwa

    If you have any questions about my PR feel free to ask. πŸ‘ Thanks for visiting my PR πŸ™ .

    opened by raihan2bd 1
Owner
Abu Raihan
Hi!, I'm Abu Raihan. I am a professional full-stack web developer. I have 4 years of experience in this field. Currently, I am looking for a new opportunity.
Abu Raihan
React Weather App - A simple weather app that allows you to get current weather information

React Weather App - A simple weather app that allows you to get current weather information

Kirill Bukovski 1 Apr 9, 2022
Mapsy is an interactive web app that analyzes CCTV imagery and weather data to determine realtime road conditions in Lawrence, KS.

Analyzing images from CCTV to determine road status Explore the docs Β» View Demo Β· Report Bug Β· Request Feature Table of Contents About The Project Bu

Cody Duong 1 Apr 12, 2022
Website built using react to check the weather of the city chosen by the user

Website built using react to check the weather of the city chosen by the user. The Shown data are temperature in celsius, humidity percentage, wind Speed, and Description of the weather state

Basma Elhoseny 3 Sep 26, 2022
Medjahdi Islem 12 Nov 18, 2022
This is an app that collects users typing speed data with time and words per minute

About ❔ This is an app that collects users typing speed data with time and words per minute. Here is the live version:https:

Bartu GenΓ§can 9 Jun 20, 2022
A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cities and save them to favourites on local storage.

Simpliest Weather React-App A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cit

Larry Noriega 3 Aug 24, 2022
An open-source project that aims to provide an indistinguishably accurate experience of Android on web

An open-source project that aims to provide an indistinguishably accurate experience of Android on web. The project leverages different JavaScript Web APIs to imitates the Android functionalities and CSS animations to bring life into it.

Side Edge 1 Oct 5, 2022
World Data - A react application that provides information about each country in the world

World Data A web application that provides information about each country in the world. The App is based on an external (REST COUNTRIES API) that allo

Kyrillos Hany 12 Jun 16, 2022
storybook-addon-aria-live is a Storybook addon for inspecting ARIA live region announcements

Storybook Addon Aria Live Storybook addon for inspecting ARIA live region announcements storybook-addon-aria-live is a Storybook addon for inspecting

Ari PerkkiΓΆ 3 Oct 1, 2022
Solana File Sharing System is a Decentralised Application which helps you share files to public Anonymously and no one can trace back to you or change the information since all the files and information is store on decentralised network

Solana File Sharing System is a Decentralized Application that helps users share files anonymously and ensure that the files are available at all times on a decentralized network, not tampered with, verifiable, and secure for all parties involved.

Athar Mohammad 6 Nov 13, 2022