Skip to content

A small hands-on project with Vue.js ๐ŸŒงโ„๏ธ๐ŸŒค๏ธ Fully responsive and visually enhanced by Chart.js

Notifications You must be signed in to change notification settings

PariaSoleimani/skycast-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

10 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

SkyCast Weather App

SkyCast is a dynamic web application that provides real-time weather updates for any location. The app, crafted with Vue.js framework offers an easy-to-use visually pleasing interface that delivers accurate and up-to-date weather information.

Project Screenshot

๐Ÿ”‘ Key Features

  • Real-Time Weather Data: Get instant access to current weather conditions.

  • 5-Day Forecast: Plan ahead with a detailed 5-day weather forecast.

  • Responsive Layout: Fully optimized for desktop, tablet, and mobile devices.

  • Custom Weather Icons and styles: Unique icons for different weather conditions, ensuring a visually engaging experience.

  • Dynamic Charts: Visualize temperature trends with interactive line charts.

๐ŸŽฏ Tech Stack

  • Vue.js: For building a reactive and component-based user interface.

  • Tailwind CSS: For utility-first, responsive styling.

  • Chart.js: For creating interactive and dynamic weather trend charts.

  • Vite: For fast and efficient development and bundling.

  • OpenWeatherMap API: For fetching real-time weather data and forecasts.

๐Ÿš€ Getting Started

This project requires a public API key to run. Get your public API key from Open Weather website.

  • Create a .env file in the project root and add the following variable:
VITE_API_KEY=your_public_api_key_here

Make sure not to commit your real API keys to the repository. This variable is intended for public / client-side usage only.

  • Install dependencies:
  bun install
  • Run the development server:
  bun run dev

About

A small hands-on project with Vue.js ๐ŸŒงโ„๏ธ๐ŸŒค๏ธ Fully responsive and visually enhanced by Chart.js

Resources

Stars

Watchers

Forks