https://github.com/coderwelsch/smart-home-screen
Web Interface for small devices (eg. Raspberry Pis) to display Calendar Events, Todoist tasks and more
https://github.com/coderwelsch/smart-home-screen
frontend ical icloud raspberry-pi react smarthome todoist typescript
Last synced: about 2 months ago
JSON representation
Web Interface for small devices (eg. Raspberry Pis) to display Calendar Events, Todoist tasks and more
- Host: GitHub
- URL: https://github.com/coderwelsch/smart-home-screen
- Owner: Coderwelsch
- Created: 2024-01-28T20:43:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-10T13:11:36.000Z (12 months ago)
- Last Synced: 2025-09-15T02:44:55.984Z (10 months ago)
- Topics: frontend, ical, icloud, raspberry-pi, react, smarthome, todoist, typescript
- Language: TypeScript
- Homepage:
- Size: 2.24 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Smart Home Display (Frontend)
> Customizable static web app that can be run on a Raspberry Pi or any other device to show useful data like calendar or todoist infos.
## Features
This project includes the following modules which you can enable or disable by setting up the corresponding .env variables:
- Home Screen
- does nothing currently except showing the welcome message
- Todoist Overview
- shows all uncompleted tasks and sub tasks
- Calendar (ICS) Overview
- shows events of the next 7 days
- Left Navigation Bar will hide automatically when only one «module» is present
Currently the app automatically rotates through the modules every ~ 30 seconds and scrolls through the content if it is too long to fit on the screen.
> ⚠️ More modules will be added in the future. Feel free to contribute!
## Installation
1. Clone the repository
2. Run `yarn` to install the dependencies
3. Create a `.env` file in the root directory by copying the `.env.example` file
## Configuration
The `.env` file contains the following variables:
### `REACT_APP_API_PORT`
Set this variable to the port of the backend server. The backend server is used to fetch the data from the external APIs (e.g. ics calendar data).
### `REACT_APP_TODOIST_API_KEY`
Set this variable to your Todoist API key to enable todoist integration. If not set, the todoist module will be disabled.
### `REACT_APP_CALENDAR_WEBCAL_URLS`
Set this variable to a define one or multiple webcal URLs to enable the calendar integration.
### `REACT_APP_CALENDAR_WEBCAL_NAMES`
Set this variable to define the names of the calendars. The names should be separated by a comma and the order should match the order of the URLs in `REACT_APP_CALENDAR_WEBCAL_URLS`.
### `REACT_APP_CALENDAR_WEBCAL_COLORS`
Supported colors:
`red`,`orange`,`amber`,`yellow`,`lime`,`green`,`emerald`,`teal`,`cyan`,`sky`,`blue`,`indigo`,`violet`,`purple`,`fuchsia`,`pink`,`rose`,`slate`,`gray`,`zinc`,`neutral`, `stone`
Set this variable to define the colors of the calendars. The colors should be separated by a comma and the order should match the order of the URLs in `REACT_APP_CALENDAR_WEBCAL_URLS`.
## Build
Run `yarn build` to build the project. The build artifacts will be stored in the `build/` directory.
## Run
Run `yarn serve` to start the proxy server and serve the static files (e.g. on your raspberry pi). The app will be available at `http://localhost:3000`.
On crash the app will automatically restart by the help of `nodemon`.
## Autostart / Systemd Service
To run the built app on a Raspberry Pi or any other device you can setup a systemd service. You can use the example service files from the `systemd-service` directory.
Please note that the `.sh` scripts under `./systemd-service` directory have absolute urls pointing to `/home/pi/smart-home-screen`, so you need to adjust them according to your setup and directory.
1. Copy the `kiosk.service` file to `/etc/systemd/system/`
2. Make sure to setup the systemd paths correctly in the `kiosk.service` file
3. Run `sudo systemctl enable kiosk.service` to enable the service
4. Run `sudo systemctl start kiosk.service` to start the service
5. Run `sudo systemctl status kiosk.service` to check the status of the service
6. To stop the service run `sudo systemctl stop kiosk.service`