InfoHub ·

This project is made for my personal use, but you're welcome to use any part of the code. Some widgets may need API keys and it's up to you to acquire those yourself.

Application

InfoHub is an application to display widgets on a screen. That's it. No accounts or special features for touchscreen monitors. Just for displaying information.

It fetches background wallpapers from Unsplash API.

Current widgets

• Clock with time and date. Displays the current time and date.

• Västtrafik. Displays the current departures from chosen bus-, tram- or trainstops. Needs API keys. You can get them from developer.vasttrafik.se.

• Twitter images. Displays the latest images from specified Twitter user.

• Weather (Tomorrow API). Displays current and hourly weather data for chosen location. Needs API key. You can get it from tomorrow.io/weather-api.

Docker

The application can, after fixing the configuration files, be composed with Docker.

To build it run:

$ docker-compose up --build

To just compose it, after being built, run:

$ docker-compose up

Next.js

The frontend is built with the Javascript framework Next.js based on React and is styled with CSS Modules and the CSS extension language Sass.

Development

First you need to add a copy of widget-settings.example.ts and rename it to widget-settings.ts. The file can be found in infohub/. Add your own settings in the file.

Then you also need to make a copy of the .env file in infohub/ and rename it .env.local. Add your API keys in it.

The first time you run the application (and every time you add new dependencies) you need do run:

$ yarn install

After that you only need to run:

$ yarn dev

Sass

Sass files are automatically compiled during runtime or when building the application.

Production

To build and run the Next.js application you run:

$ yarn build && yarn start

Dependencies

• Next.js
• React
• Yarn
• Sass
• React Query
• Day.js
• Puppeteer

Resources

• Västtrafik Developer Portal
• Tomorrow API
• Unsplash
• News API