Welcome to Weather Dashboard, a demo weather application built with technologies like React, Vite, and TypeScript and Tailwind. The App fetches data from open-meteo and delivers real-time weather updates, weekly forecasts, and hourly temperature trends.
Visit live website on https://weather-69cwsj03t-comsian106.vercel.app/
Before diving into Weather Dashboard, ensure you have the following prerequisites:
- Node.js installed on your machine
- npm (Node Package Manager)
With the prerequisites in place, follow these steps to install Weather Dashboard:
-
Clone the repository: git clone https://github.com/toseef-ahmd/weather-app.git
-
Navigate to the project directory:
cd weather-app
- Install dependencies:
npm install
- Linting
npm run lint
Checks for linting errors to ensure code consistency.
- Format
npm run format
Formats the code using prettier.
To launch Weather Dashboard in development mode:
- Execute the command:
npm run dev
- The application will start on http://localhost:3000
Execute npm run build for building the app.
Weather Dashboard leverages a robust foundation of technologies:
- React: The JavaScript library for building user interfaces, ensuring a smooth and interactive experience
- Vite: The modern frontend build tool, handling rapid development and production-grade builds
- TypeScript: A typed superset of JavaScript, enhancing code readability, maintainability, and type safety
- Tailwind CSS: The utility-first CSS framework, empowering rapid custom designs without sacrificing flexibility
Weather data is sourced from Open-Meteo, a reliable weather API provider. Visit Open-Meteo for more details on their data services.
Weather Dashboard seamlessly integrates three key components:
- Current Weather: Displays real-time weather conditions, including temperature, humidity, and wind speed, providing a snapshot of the current weather situation.
- Weekly Highlight: Presents a comprehensive 7-day forecast, enabling users to plan ahead and prepare for the upcoming weather patterns.
- Daily Component: Renders inside the Weekly Component. each card representing one day.
- Hourly Chart: Visualizes temperature changes over the course of a day, offering insights into temperature trends and potential temperature fluctuations.
Read here: interfaces
The application relies on a carefully curated set of dependencies:
autoprefixer: A PostCSS plugin that adds vendor prefixes to CSS rules for cross-browser compatibilityaxios: A Promise-based HTTP client for making efficient API requestshighcharts&highcharts-react-official: A powerful tool for creating interactive charts, enhancing visual storytellinglodash: A comprehensive JavaScript utility library for common tasks and data manipulationmoment: A robust date and time utility library for handling and formatting various date formatspostcss: A tool for transforming styles with JavaScript plugins, enabling flexible CSS manipulationreact&react-dom: The foundational libraries for building React applicationsreact-select: A flexible and customizable Select Input control for enhancing user experiencetailwindcss: The utility-first CSS framework for rapid and efficient UI development
Weather Dashboard provides various scripts for managing the application:
npm run dev: Starts the development server on http://localhost:3000npm run test: Executes the test suite to ensure code quality and functionalitynpm run lint: Checks the codebase for potential errors and enforces coding standardsnpm run format: Formats the code according to predefined code styles
Meteocons for the svgs. stellasphere for WMO codes JSON file.
Contributions to Weather Dashboard are encouraged! For major changes, please open an issue to discuss your proposed changes.
This project is open-sourced under the permissive MIT License, allowing for free usage and modification.
If you have any questions or feedback, please feel free to reach out to me via [email protected]