https://github.com/helensobi/weatherforecastapp-react
A simple, beautiful, and responsive weather application. It provides current and 7-days weather forecast using visualcrossing API.
https://github.com/helensobi/weatherforecastapp-react
visualcrossing-api
Last synced: 9 months ago
JSON representation
A simple, beautiful, and responsive weather application. It provides current and 7-days weather forecast using visualcrossing API.
- Host: GitHub
- URL: https://github.com/helensobi/weatherforecastapp-react
- Owner: HelenSobi
- Created: 2024-07-20T06:22:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-12T13:58:26.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T05:44:41.387Z (about 1 year ago)
- Topics: visualcrossing-api
- Language: JavaScript
- Homepage: https://weatherforecast-7days.netlify.app/
- Size: 2.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### WEATHER APP using React + Vite
Initialize a new React.js project:
### `npm create vite@latest weather-app -- --template react`
Install project dependencies:
### `npm install`
Install Tailwind CSS IntelliSense in editor setup VS Code
### `npm install -D tailwindcss postcss autoprefixer`
### `npx tailwindcss init -p`
Add the files in index.css
******************************************
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
*******************************************
Start the development server:
### `npm start`
Building for production:
### `npm run build`
### Environmental variables
Create `.env` file in the `root directory` and provide variables
`VITE_USER_ID = "123"`
### You should have this `VITE_ `as a prefix
In front end, variables loaded like this.
`import.meta.env.VITE_USER_ID`
run development server
`npm start`
### Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
### React Shimmer
`npm i react-shimmer-effects`
----------------
Format Code Style
----------------
Mac (macOS): Shift + Option + F
Windows: Shift + Alt + F
Linux/Ubuntu: Ctrl + Shift + I.