WeatherForecastApp

Live Demo:

https://tarek-weather-forecast-app.netlify.app/

The app was build with Vite, Vitest, and React Testing Library, React, TypeScript, Redux, and a publicly available Weather Forecast API: "https://api.openweathermap.org/data/2.5" from OpenWeather

The application empowers users to search for weather forecasts in various cities and access detailed weather information.

Goals

• This project aims to create a user-friendly and feature-rich weather forecast application, enhancing the user's ability to access accurate and detailed weather information for different cities.
• The application's integration of React, TypeScript, Redux, and API data ensures a robust and efficient solution.
• The optional bonus features further contribute to an exceptional user experience and expanded functionality.

Features

• Display the weather forecast based on the current usre latitude and longitude
• Display the weather forecast based on search input
• Display the future weather forecast for the next 7 days
• Display additional information about the selected city's weather, such as wind speed, pressure, using the API icons

Project Setup

• Clone the repo:

  git clone https://github.com/tarektarho/weather-forecast-app.git

• Install the app

  cd weather-forecast-app
  npm install

• Run the app:

  npm run dev / npm run start - start dev server and open browser

• Run build:

  npm run build - build for production
  npm run preview - locally preview production build

  If you faced any issues with API_KEY for example it's expired or not found then you have to genreate a new one using the sign up page sign_up then replace VITE_WEATHER_API_KEY with your API_KEY

• Run test:

  npm run test

Inspiration

• Create React App
• Vite
• Vitest

Dependencies

This template includes various dependencies to streamline development and enhance the user experience. Some of the key dependencies are:

• @reduxjs/toolkit: A set of utilities for simplifying the Redux state management. It includes features like store setup, reducers, and actions.
• cross-fetch: A library that provides a consistent API for making fetch requests both in browsers and Node.js environments.
• react: The core library for building user interfaces in React applications.
• react-dom: A package for rendering React components in the DOM.
• react-redux: The official React bindings for Redux, used to connect Redux store with React components.
• react-router-dom: A package that provides routing capabilities for single-page React applications using the DOM.
• sass: A CSS extension language that provides advanced features like variables, nesting, and mixins for more organized styles.

DevDependencies:

• @testing-library/dom, @testing-library/jest-dom, @testing-library/react, @testing-library/user-event: Libraries for testing React components using the testing-library approach, which promotes testing user interactions.
• @types/react, @types/react-dom: TypeScript type definitions for React and ReactDOM.
• @types/testing-library__jest-dom: TypeScript type definitions for the jest-dom library, which provides custom Jest matchers for asserting on DOM nodes.
• @vitejs/plugin-react: A Vite plugin that enables React support, allowing you to use JSX and React components in Vite projects.
• @vitest/coverage-c8: A Vitest plugin for generating code coverage reports using c8, a code coverage tool.
• eslint, eslint-config-react-app: ESLint is a linter tool for identifying and reporting on patterns found in JavaScript code. eslint-config-react-app provides ESLint configurations used in Create React App.
• eslint-plugin-prettier: A plugin that integrates ESLint with Prettier, ensuring consistent code formatting and style.
• jsdom: A JavaScript implementation of the DOM for use in Node.js, commonly used for testing React components in a Node.js environment.
• prettier, prettier-config-nick: Prettier is an opinionated code formatter that enforces consistent code style. prettier-config-nick provides a predefined Prettier configuration.
• typescript: A superset of JavaScript that adds static types to the language. It helps catch errors and provides better tooling for large codebases.
• vite: A modern build tool that focuses on fast development and optimized production builds for JavaScript applications.
• vitest, vitest-fetch-mock: Libraries for testing Vite applications, with vitest-fetch-mock being a Vite-compatible version of fetch-mock for mocking fetch requests in tests.

These dependencies and devDependencies are commonly used in modern React and TypeScript projects, and they cover a wide range of tasks including state management, testing, linting, formatting, routing, and more.

Todos

• Internationalization(i18n)
• Dark/Light Mode
• Split the style per component
• Store the API key in github secrets