SkyWell

A Weather App with History Tracking and Theme Switching

Live Demo: https://skywell-livid.vercel.app/

About

SkyWell is a modern weather application built using React, Redux Toolkit, and React Router. It allows users to search for weather information in any city, view historical queries, and toggle between light and dark themes. The app provides a smooth user experience with animations, responsive design, and a visually appealing interface.

The project uses the WeatherAPI to fetch real-time weather data and includes features like background animation, query history tracking, and seamless navigation between pages.

---

Key Features

• Weather Search: Enter a city name to get current weather details, including temperature, humidity, wind speed, and more.
• Query History: View and manage past weather queries with timestamps.
• Theme Switching: Toggle between light and dark themes for a personalized experience.
• Background Animation: A dynamic animated background that enhances the visual appeal of the app.
• Responsive Design: Optimized for all screen sizes, ensuring a consistent experience on desktops, tablets, and mobile devices.
• Error Handling: Gracefully handles invalid inputs and API errors with user-friendly messages.
• Modern Tech Stack: Built with React, Redux Toolkit, React Router, Axios, and CSS Modules for modularity and scalability.

---

Technology Stack

• Frontend:
  • React: A JavaScript library for building user interfaces.
  • Redux Toolkit: A powerful state management library for managing global application state.
  • React Router: A routing library for handling navigation and page transitions in React applications.
  • Axios: A promise-based HTTP client for making API requests.
  • CSS Modules: A CSS file in which all class names and animation names are scoped locally by default.
• Styling:
  • CSS Modules: Modular styling to avoid naming conflicts.
  • Flexbox & Grid: Modern layout techniques for responsive design.
  • Animations: Smooth transitions and effects for an engaging user experience.
  • PostCSS: A tool for transforming CSS with plugins like Autoprefixer for cross-browser compatibility.
• Build Tool:
  • Vite: A modern build tool that provides fast development server startup and optimized builds for production.
• API:
  • WeatherAPI: A real-time weather data provider used to fetch current weather information.
• State Management:
  • Redux Toolkit: Simplifies state management with features like Immer for immutable updates and Redux Thunk for async logic.
• Routing:
  • React Router: Handles dynamic routing and navigation within the app.

---

Installation and Setup

To run this project locally, follow these steps:

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Steps

1. Clone the Repository

   git clone https://github.com/nikzalevskii/skywell.git
   cd skywell

2. Install Dependencies

   npm install

3. Run the Development Server

   npm run dev