-
-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Add weather app to demos (#2597)
- Loading branch information
1 parent
64370d3
commit cd4bd6c
Showing
27 changed files
with
5,370 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
.env | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
# Elemental | Weather App | ||
|
||
Elemental is a weather app that gets the current user's location and shows the weather information for that location. It also allows users to search for weather information by city name. It uses the OpenWeather API to retrieve weather data and the Tolgee API to provide translations. | ||
|
||
## Table of Contents | ||
|
||
- [Features](#features) | ||
- [Demo](#demo) | ||
- [Getting Started](#getting-started) | ||
- [Technologies](#technologies) | ||
- [License](#license) | ||
- [Contributing](#contributing) | ||
|
||
## Features | ||
|
||
- Text Translation | ||
- Weather Information | ||
- Search by City Name | ||
- Responsive Design | ||
|
||
## Demo | ||
|
||
You can view a live demo of Elemental [here](https://elemental-ten.vercel.app) | ||
|
||
### Article | ||
Read the DEV article [here](https://dev.to/anni/how-to-build-a-weather-forecast-app-with-react-typescript-tolgee-and-openweather-api-2197) | ||
|
||
## Screenshots | ||
|
||
![Weather App Screenshot](https://github.com/user-attachments/assets/6030830a-ab59-407e-ae1a-cde012179360) | ||
|
||
## Technologies | ||
|
||
- [Vite.js](https://vite.dev) | ||
- [Tailwind CSS](https://tailwindcss.com) | ||
- [Tolgee](https://tolgee.io) | ||
- [Openweather API](https://openweathermap.org/api) | ||
|
||
## Getting Started | ||
|
||
To get started with the project, run the following commands in your terminal: | ||
|
||
1. Clone the repository | ||
|
||
```bash | ||
git clone https://github.com/AJBrownson/elemental.git | ||
cd elemental | ||
``` | ||
|
||
2. Install the dependencies | ||
|
||
```bash | ||
npm install | ||
``` | ||
|
||
3. Create a `.env` file in the root directory and add the following environment variables: | ||
|
||
```bash | ||
VITE_APP_TOLGEE_API_URL=https://app.tolgee.io | ||
VITE_APP_TOLGEE_API_KEY=your-api-key | ||
WEATHER_API_KEY=your-api-key | ||
``` | ||
|
||
> You can get your Tolgee API key by going to [Tolgee](https://app.tolgee.io) | ||
3. Start the development server | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
|
||
4. Open [http://localhost:3000](http://localhost:3000) in your browser to view the app | ||
your-project-id-number> pull --path public/i18n | ||
|
||
## License | ||
|
||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details | ||
|
||
## Contributing | ||
|
||
Contributions are welcome! Feel free to open an issue or submit a pull request. | ||
|
||
If you have any questions, feel free to reach out to me at [Anietie Brownson](https://x.com/TechieAnni). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
WEATHER_API_KEY="your-api-key-here" | ||
VITE_APP_TOLGEE_API_URL=https://app.tolgee.io | ||
VITE_APP_TOLGEE_API_KEY=your-api-key-here |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import js from '@eslint/js' | ||
import globals from 'globals' | ||
import reactHooks from 'eslint-plugin-react-hooks' | ||
import reactRefresh from 'eslint-plugin-react-refresh' | ||
import tseslint from 'typescript-eslint' | ||
|
||
export default tseslint.config( | ||
{ ignores: ['dist'] }, | ||
{ | ||
extends: [js.configs.recommended, ...tseslint.configs.recommended], | ||
files: ['**/*.{ts,tsx}'], | ||
languageOptions: { | ||
ecmaVersion: 2020, | ||
globals: globals.browser, | ||
}, | ||
plugins: { | ||
'react-hooks': reactHooks, | ||
'react-refresh': reactRefresh, | ||
}, | ||
rules: { | ||
...reactHooks.configs.recommended.rules, | ||
'react-refresh/only-export-components': [ | ||
'warn', | ||
{ allowConstantExport: true }, | ||
], | ||
}, | ||
}, | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:[email protected]&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Elemental | Weather App</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.tsx"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.