tolgee · AJBrownson · Oct 15, 2024 · Oct 22, 2024 · Oct 22, 2024
diff --git a/demos/elemental/.gitignore b/demos/elemental/.gitignore
@@ -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?
diff --git a/demos/elemental/README.md b/demos/elemental/README.md
@@ -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).
diff --git a/demos/elemental/env.sample b/demos/elemental/env.sample
@@ -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
diff --git a/demos/elemental/eslint.config.js b/demos/elemental/eslint.config.js
@@ -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 },
+      ],
+    },
+  },
+)
diff --git a/demos/elemental/index.html b/demos/elemental/index.html
@@ -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>