Weather Vue.

Weather Vue allows you to track the current and future weather of cities of your choosing.

This project was created to experiment with Tailwind CSS and is my first project using Vue.js!
Weather data is pulled from OpenWeatherMap's API: https://openweathermap.org/api

All in all, got a great introduction to the Vue framework and learnt a new way of styling using Tailwind!

Please use this link to demo the live site! https://weather-vue.nickhuynhq.com/

Project Screenshot

Project DEMO

Home.Weather.Vue.-.11.October.2022.mp4

Current Features Include:

• City Search 🔎
• Current Weather 🌤
• Hourly Weather 🌦
• Weekly Weather ⛈
• Saving Cities 💾
• Deleting Cities 🗑
• DARK MODE 😈

Tech Stack

Update Log

(January 30, 2023)

• Fix issue of info not updating when new City is searched on City View
• Update weather icons to have background for better visibility/accessibility

(October 18, 2022)

• Fix local time on City Cards

(October 12, 2022)

• Fix bug where page load is not at top
• Adjust DarkMode styling for components
• Add local time to City Cards
• Add Dark Mode Functionality
• Minor Bug Fixes
• Formatting adjustments

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Installation

1. Clone this repository. $ git clone https://git@github.com:nickhuynhq/weather-vue.git

2. Run npm install from inside the client directory.

$ cd weather-vue
$ npm install

3. Create your own .env file

  VITE_API_KEY=<YOUR_API_KEY>

4. Compile Vue App

$ npm run dev

Author

Nicholas Huynh @nickhuynhq