https://github.com/umarsiddique010/weather-app

A weather app built with JavaScript, HTML, and CSS using SOLID principles and OOP. Features dynamic rendering, GSAP animations, responsive design, and advanced CSS like backdrop filters and progress bar animations. Deployed with Vite on GitHub Pages.
https://github.com/umarsiddique010/weather-app

backdrop-filter css css-animations deployment dynamic-rendering github-pages gsap-animation gsap-scrolltrigger html5 javascript oop progress-bar responsive-design solid-principles typography vitejs weather-app

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/umarsiddique010/weather-app
Owner: umarSiddique010
Created: 2025-02-04T15:35:20.000Z (5 months ago)
Default Branch: main
Last Pushed: 2025-02-04T18:37:18.000Z (5 months ago)
Last Synced: 2025-02-04T19:31:32.444Z (5 months ago)
Topics: backdrop-filter, css, css-animations, deployment, dynamic-rendering, github-pages, gsap-animation, gsap-scrolltrigger, html5, javascript, oop, progress-bar, responsive-design, solid-principles, typography, vitejs, weather-app
Language: JavaScript
Homepage: https://umarsiddique010.github.io/Weather-app/
Size: 1.12 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Weather App

Welcome to the Weather App! This project is a modern weather application that dynamically fetches and displays real-time weather data. Built using cutting-edge web technologies, it showcases advanced styling, animations, and optimization techniques, making it an excellent example of a well-rounded front-end project.

---

## **Contents**

1. [Overview](#overview)
2. [Features](#features)
3. [Techniques and Tools](#techniques-and-tools)
4. [Color Palette and Styling](#color-palette-and-styling)
5. [Development Setup](#development-setup)
6. [Key Learnings](#key-learnings)

---

## **Overview**

This app provides users with:
- Real-time weather updates.
- A clean and responsive user interface.
- Advanced interactivity with seamless animations.

The project is designed with a focus on scalability, performance, and clean code principles such as SOLID and Object-Oriented Programming (OOP).

---

## **Features**

### **Core Functionality**
- **Dynamic Weather Rendering**: Fetches real-time weather data from APIs and updates the UI dynamically.
- **Search Functionality**: Allows users to search for weather updates by city.

### **Styling and Design**
- **Custom CSS Variables**: All colors, shadows, and styles are controlled using CSS variables for easy theme management.
- **Responsive Design**: Fully optimized for all screen sizes, from mobile devices to desktops.
- **Backdrops and Blur Effects**: Uses `backdrop-filter` for modern UI aesthetics.

### **Interactive Elements**
- **Custom Cursor**: A fixed-position cursor enhances the UX.
- **Progress Bar Animation**: A unique progress bar with smooth animation using CSS `@keyframes` to indicate loading states.
- **GSAP Animations**: Advanced animations for UI elements, making the app feel more dynamic and engaging.

### **Utility Features**
- **Error Handling**: Friendly error messages for invalid inputs or failed data fetching.
- **Utility Methods**: Includes modular and reusable JavaScript utility methods for fetching data and manipulating the DOM.

### **Advanced Implementation Details**
- **Text Shadows**: Subtle text-shadow effects are applied for a clean yet impactful typography experience.
- **Responsive Utility Classes**: Custom media queries ensure smooth scaling and responsiveness.
- **Accessibility Features**: Text sizes, color contrasts, and focus states are optimized for readability and usability.
- **Environmental Variables**: Securely manage API keys using `.env`.

---

## **Techniques and Tools**

### **Framework and Bundler**
- **Vite**: Ultra-fast bundling and hot module replacement (HMR).

### **Languages**
- HTML5, CSS3, JavaScript (ES6+).

### **Design Principles**
- **SOLID Principles**: Code is modular and adheres to the Single Responsibility and Open-Closed principles, making it scalable and maintainable.
- **Object-Oriented Programming (OOP)**: Key parts of the app, like data fetching and rendering, are encapsulated into objects and classes.

### **CSS Techniques**
- Variables: `:root` color definitions.
```css
:root {
--color-white: #ffffff;
--color-background: #0f0f0f;
--color-midPink: #ad1d45;
--color-sunOrange: #fd702d;
--color-limeGreen: #2c6e49;
}
```
- **Text Shadows**: Subtle yet impactful typography.
- **Backdrop Filter**: Blurred elements create depth in the UI.
- **Keyframe Animations**:
```css
@keyframes progress {
from {
width: 100%;
}
to {
width: 0;
}
}
```

### **Animations**
- **GSAP**: Smooth animations for enhanced interactivity.

### **Version Control and Deployment**
- **GitHub**: Version control and collaboration.
- **Vite Deploy**: Ready-to-deploy build system.
- **GitHub Pages**: App hosted for easy access.

### **APIs and Libraries**
- **OpenWeather API**: Real-time weather data.
- **dotenv**: Secure environment variable management.

---

## **Color Palette and Styling**

| Color Name | Hex Code | Usage |
|--------------------|-------------|--------------------------------|
| **White** | `#ffffff` | Primary text color. |
| **Background** | `#0f0f0f` | Main background color. |
| **Weather BG** | `#021526` | Weather container background. |
| **Lime Green** | `#2c6e49` | Buttons and active states. |
| **Mid Pink** | `#ad1d45` | Error messages and highlights. |
| **Sun Orange** | `#fd702d` | Subtitles and accents. |
| **Sun Yellow** | `#fba834` | Highlights and icons. |

---

## **Development Setup**

### **Prerequisites**
- Node.js (v16 or higher)
- npm (v7 or higher)

### **Installation**
1. Clone the repository:
```bash
git clone https://github.com/yourusername/weather-app.git
```
2. Navigate to the project directory:
```bash
cd weather-app
```
3. Install dependencies:
```bash
npm install
```
4. Create a `.env` file for your API keys:
```bash
touch .env
```
Example:
```
VITE_API_KEY=your_openweather_api_key
```

### **Run Locally**
```bash
npm run dev
```

### **Build for Production**
```bash
npm run build
```

---

## **Key Learnings**

- **Dynamic Rendering**: Efficiently updating the DOM based on API responses.
- **Reusable Code**: Utility methods and modular components improve maintainability.
- **Performance Optimization**: Leveraging Vite and lazy-loading assets.
- **Modern CSS Features**: Utilizing `backdrop-filter` and custom properties for sleek design.
- **Accessibility**: Focus on color contrast, readable font sizes, and responsive layouts.

---

This Weather App project is a perfect showcase of technical expertise and creative design principles, making it an excellent addition to any portfolio.

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/umarsiddique010/weather-app

Awesome Lists containing this project

README