Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moebiusmania/atmmi-info-ui
ATM Milano info & status webapp.
https://github.com/moebiusmania/atmmi-info-ui
clean dashboard hacktoberfest nuxt tailwind vue web
Last synced: 5 days ago
JSON representation
ATM Milano info & status webapp.
- Host: GitHub
- URL: https://github.com/moebiusmania/atmmi-info-ui
- Owner: moebiusmania
- License: mit
- Created: 2017-09-23T20:00:09.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-21T13:53:06.000Z (about 2 months ago)
- Last Synced: 2024-12-21T14:33:34.416Z (about 2 months ago)
- Topics: clean, dashboard, hacktoberfest, nuxt, tailwind, vue, web
- Language: TypeScript
- Homepage: https://atmmi-info-ui.vercel.app/
- Size: 2.18 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ATM Milano - Web Dashboard
> This project is not officially affiliated with ATM Milano in any ways, it's just a part-time project.
A clean and modern web UI dashboard that displays some quick informations from the [https://www.atm.it/it/Pagine/default.aspx](https://www.atm.it/it/AtmNews/Pagine/default.aspx) (_a slight messy and non-responsive website_), retrieving the data through a custom REST API.
**Live at:** [https://atmmi-info-ui-moebiusmania.vercel.app/](https://atmmi-info-ui-moebiusmania.vercel.app/)
## Built with
- [Node.js](https://nodejs.org/) v22.x
- [Nuxt 3](https://nuxt.com/) - main application framework based on [Vue 3](https://vuejs.org/)
- [Typescript](https://www.typescriptlang.org/) - static type checking
- [Tailwind.css](https://tailwindcss.com/) - utility-first CSS framework
- [Daisy UI](https://daisyui.com/) - components library built on top of Tailwind.css
## Backend APIs
Since I'm using the Nuxt(3) framework, the APIs are developed and exposed within the project. You can find the source code in the `/server/api` folder and they are exposed by appending the `/api/` suffix at the end of the application URL.
Available routes:
| **Route** | **Description** |
| -------------- | ----------------------------- |
| `/api/service` | health check of the API |
| `/api/status` | current status of the M lines |
| `/api/traffic` | planned traffic updates |
| `/api/news` | ATM news room |
## Install & run
Clone the repo:
```
$ git clone https://github.com/moebiusmania/atmmi-info-ui
```
install the dependencies:
```
$ npm ci
```
start the development server:
```
$ npm run dev
```
the application will be available locally in your browser at the url `http://localhost:3000`.
## Development
> **NOTE:** ~~I'm not understanding if the issue comes from my application or the ATM website, but unfortunately to have this application work properly it is required to disable the TLS check in Node.js, this can be done by creating a `.env` file with `NODE_TLS_REJECT_UNAUTHORIZED=0` as content. But I don't want this to be the final solution.~~ Unfortunately moving from Node.js v16 to v18+ brought up an issue when trying to fetching the ATM Milano website, you can check the final solution in the `/server/endpoint.ts` file and read more details on the cause on [an issue that I've opened to Nuxt team](https://github.com/nuxt/nuxt/issues/21609).
Build the project:
```
$ npm run build
```
the result will be available in the `/output` folder and can be deployed on any Node.js hosting.
[Vercel](https://vercel.com/) is the most common and easy to use solution for this scope, and its the one that I'm actually using to deploy this application.
## License
Released under the [MIT](LICENSE) license.