https://github.com/ertugrulsertaslan/weather-app
This React-based weather application allows users to check the current weather conditions
https://github.com/ertugrulsertaslan/weather-app
netlify notistack react tailwindcss vite
Last synced: about 1 month ago
JSON representation
This React-based weather application allows users to check the current weather conditions
- Host: GitHub
- URL: https://github.com/ertugrulsertaslan/weather-app
- Owner: ertugrulsertaslan
- Created: 2024-03-28T20:42:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-21T15:01:10.000Z (8 months ago)
- Last Synced: 2025-02-15T22:29:51.451Z (3 months ago)
- Topics: netlify, notistack, react, tailwindcss, vite
- Language: JavaScript
- Homepage: https://weather-app-wap.netlify.app
- Size: 7.16 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather App 🌤️
This React-based weather application allows users to check the current weather conditions of any desired location. The app dynamically changes background color and images based on the weather: sunny days display a sunny background with clear skies, while rainy days show a cloudy background with rain clouds.
## Demo 🌐
[weather-app.netlify.app](https://weather-app-wap.netlify.app)
## Screenshots 📸
## Features 🌟
- 🖥️ User-friendly interface
- 🧩 Component-based architecture
- 🌐 State management and updates
- 🚀 Usage of React Hooks
- 🔔 Error notifications powered by Notistack
## Technologies Used 💻
- 💻 [React.js](https://reactjs.org/) - JS library for crafting user interfaces
- 📦 [Vite](https://vitejs.dev/) - Module bundler
- 🎨 [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework
- 🌐 [Netlify](https://www.netlify.com/) - Hosting service for static web apps
- 🔔 [Notistack](https://notistack.com/) - React library which makes it super easy to display notifications on your web apps
## Install & Build 🔧
Prerequisites
- Install Node.js ⚙️
- Clone the repo 🔄
📦 After cloning the repo install dependecies with
```sh
npm i
```
**Creating the .env File:** ⚙️
- Start by copying the `.env.example` file and creating a new file named `.env`.
- Make sure to fill in the contents of the `.env` file.
```sh
VITE_SOME_KEY=myapikey
VITE_SOME_BASE=myapibase
```
- Import the `.env` file to where you use it
```sh
const { VITE_SOME_KEY, VITE_SOME_BASE } = import.meta.env;
```
📡 To run development server use dev script
```sh
npm run dev
```
🔧 To build use build script
```sh
npm run build
```
after running scripts go to `http://localhost:5173` with your browser to use the app. 🌐
## License 📄
[MIT](https://choosealicense.com/licenses/mit/)