/react-redux-capstone

React-Redux Capstone displays the weather of countries - I have created a single-page application (SPA) called "World Weather App " that allows users to view the current weather and detailed temperature data of countries around the world.

Primary LanguageJavaScriptMIT LicenseMIT

World Weather App

📗 Table of Contents

📖 [World Weather App]

I have created a single-page application (SPA) called "World Weather App " that allows users to view the current weather and detailed temperature data of countries around the world. The application is built with React and Redux, following the specified requirements.

The Home page of the application displays a list of categories, which can be filtered based on parameters such as the category name. Each category item also shows numeric values obtained from the Open-Meteo API. When a user clicks on a category item, they are navigated to the Details page.

On the Details page, the application retrieves data from the API to display detailed information about the selected category. Users can navigate back to the Home page by clicking the "Back" button (<).

To ensure the quality of the application, I have created unit tests for the pure functions in the Redux code. Additionally, integration tests have been implemented using React Testing Library. API access has been mocked in the tests to prevent actual requests, and the connection to the Redux Store has also been mocked for isolated testing.

The data retrieved from the API is stored in the Redux store, allowing for efficient management and access. A Filter stateless component is used to filter the data obtained from the API based on the specified parameters.

Each page within the application, including the main page and individual item pages, has a unique route to enable proper navigation within the SPA.

Finally, the project has been deployed and is accessible online, allowing users to access and interact with the Weather world application.

Overall, this project satisfies the stated requirements, and the deployed application provides a user-friendly interface to explore and view weather information from different countries.

Desktop Version & Mobile Version: image

image video1007776689

Live Demo Link

🛠 Built With

Tech Stack

Client

Key Features

  • View all countries weather
  • Search by country
  • Detail by country

(back to top)

🚀 Live Demo

Please click the link below to check the demo

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

  • Web browser
  • Code editor
  • Good internet connection

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone git@github.com/harshi0102/react-redux-capstone.git

Install

Install this project with:

  cd react-redux-capstone
  npm install

Usage

To run the project, execute the following command:

  npm start

Run tests

To run tests, run the following command:

  npm test
  Press a to run all test

Deployment

Check here for live online version: https://react-redux-weather-app.onrender.com

(back to top)

👥 Author

👤 Harshika Govind

(back to top)

🔭 Future Features

  • [Add hourly Temperature Graphs]
  • [new_feature_2]
  • [new_feature_3]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project...Give ⭐️

(back to top)

🙏 Acknowledgments

I would like to thank all who inspired us during the project:

Original design idea by Nelson Sakwa on Behance.

(back to top)

📝 License

This project is MIT licensed.

(back to top)