Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unyt-org/example-weather-app
A simple weather app example using UIX and DATEX
https://github.com/unyt-org/example-weather-app
ssr typescript uix uix-example unyt weather weather-app
Last synced: about 2 months ago
JSON representation
A simple weather app example using UIX and DATEX
- Host: GitHub
- URL: https://github.com/unyt-org/example-weather-app
- Owner: unyt-org
- License: mit
- Created: 2023-09-19T11:15:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-16T18:41:05.000Z (3 months ago)
- Last Synced: 2024-10-18T17:27:48.454Z (3 months ago)
- Topics: ssr, typescript, uix, uix-example, unyt, weather, weather-app
- Language: TypeScript
- Homepage: https://weather.example.unyt.org
- Size: 998 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Example: Weather app
This repository demonstrates some essential concept of the [UIX](https://uix.unyt.org) framework such as [SSR](https://unyt.org/glossary#ssr) and [Web components](https://unyt.org/glossary#web-components) using the example of a **weather app**.
## Installation
1. Install the **UIX command line tool** following the [Getting Started](https://docs.unyt.org/manual/uix/getting-started#the-uix-command-line-tool) guide in our documentation.
2. Clone this repository to your local machine:
```bash
$ git clone https://github.com/unyt-org/example-weather-app.git
```
3. Request a free API key from [weatherapi.com](https://www.weatherapi.com/)
4. Create an `API_KEY`-environment variable
```bash
$ export API_KEY=""
```
5. Run the project local
```bash
$ uix --port 8000
```
6. Navigate to your favourite web browser and open http://localhost:8000 to see everything in action.
## Structure
This diagram outlines the UIX default project structure.
Since everything is rendered on the server there is just a [back-end](https://unyt.org/glossary#back-end) folder.
```
.
└── example-weather-app/
├── backend/
│ ├── .dx // Config file for deployment
│ ├── Weather.ts // Weather API
│ └── entrypoint.tsx // Back-end entrypoint
├── common/
│ ├── components/
│ │ ├── Search.scss // Search style declaration
│ │ ├── Search.tsx // Search component
│ │ ├── Overview.scss // Overview style declaration
│ │ └── Overview.tsx // Overview component
│ ├── theme.tsx // Theme definition
│ ├── weather-theme.scss // Theme stylesheet
│ └── res/ // Ressources folder
├── app.dx // Endpoint config file
└── deno.json // Deno config file
```
## Features
* Location search
* 3 days Forecast, Air Quality, Sunrise info
## Preview
## Explanation
### Environment Variables
In [DATEX](https://datex.unyt.org), environment variables can be accessed using `Datex.Runtime.ENV`.
---
© unyt 2024 • [unyt.org](https://unyt.org)