https://github.com/nikzalevskii/skywell

SkyWell is a React-based weather app that provides real-time weather data, query history, and theme switching, all wrapped in a responsive and visually appealing interface. Featuring dynamic animations and powered by WeatherAPI, it ensures a smooth and engaging user experience.
https://github.com/nikzalevskii/skywell

animation postcss react react-router redux-toolkit typescript vite

Last synced: 3 months ago
JSON representation

SkyWell is a React-based weather app that provides real-time weather data, query history, and theme switching, all wrapped in a responsive and visually appealing interface. Featuring dynamic animations and powered by WeatherAPI, it ensures a smooth and engaging user experience.

• Host: GitHub
• URL: https://github.com/nikzalevskii/skywell
• Owner: nikzalevskii
• Created: 2025-02-18T13:38:58.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-02-24T07:24:55.000Z (over 1 year ago)
• Last Synced: 2025-06-27T05:44:55.826Z (about 1 year ago)
• Topics: animation, postcss, react, react-router, redux-toolkit, typescript, vite
• Language: TypeScript
• Homepage: https://skywell-livid.vercel.app
• Size: 4.36 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# **SkyWell**

A Weather App with History Tracking and Theme Switching

## **Live Demo:** [https://skywell-livid.vercel.app/](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**

   ```bash

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

   cd skywell

   ```

2. **Install Dependencies**

   ```bash

   npm install

   ```

3. **Run the Development Server**

   ```bash

   npm run dev

   ```