screenIT2

A digital event screen

ScreenIT2 is a digital event screen built for Chalmers IT division. It displays upcoming events from chalmers.it, allows users to upload custom posters, and provides an admin panel for managing events and posters. It is currently used in the IT division's premises "Hubben 2.2" and is open source for anyone to use and contribute to.

Table of Contents

• About the project
• Features
• Screenshots
• Built with
• Getting started
• API Documentation
• Contribute
• Acknowledgements

About the Project

Built with

Features

• Display events from chalmers.it with posters and details
• Upload custom posters for events
• User authentication with Gamma SSO
• Admin panel for managing events and posters
• Settings for customizing the display

Screenshots

Getting started

Installation

1. Clone the repo

   git clone https://github.com/erikpersson0884/screenit-v2

2. Install dependencies

   cd screenit2
   
   npm run install
   

3. Set up a development database

   cd server 
   
   docker run --name screenit2 -e POSTGRES_PASSWORD=secretpassword -e POSTGRES_USER=myuser -e POSTGRES_DB=mydb -p 5432:5432 -d postgres
   
   npx prisma migrate dev
   
   npx prisma db push

4. Set environmental variables

   In ./server/.env add the following (you can copy from ./server/env.example):

   DATABASE_URL=postgresql://myuser:secretpassword@localhost:5432/mydb?schema=public
   
   JWT_SECRET=big_secret_key
   
   GAMMA_CLIENT_ID=SOMETHINGLIKETHISXM4KXNH4DEXXY
   GAMMA_REDIRECT_URI=http://localhost:3000/api/auth/gamma/callback
   GAMMA_CLIENT_SECRET=SOMETHINGLIKETHISJ2DVRRBYMWKJ44Q
   
   FRONTEND_URL=http://localhost:3000 
   
   
   # The following are optional, but can be used to customize the seeded user created when running `npx prisma db seed`. Role is always optional and defaults to "user" if not set.
   
   SEED_USER_ID=b69a0ccd-01d1-475e-adc5-99ff017b7fd74
   SEED_USER_USERNAME=Göken
   SEED_USER_ROLE=user

If you are unsure of how to set up the gamma client, you can read the how to on the chalmers.it wiki: https://wiki.chalmers.it/HowTo:Skapa_Gamma_Clients

Usage

After installation, you simply run the application with a single command from root.

npm run dev

This runs concurrently:

• Backend (server) in development mode
• Frontend (client) in development mode

You can also run each part individually:

npm run server       # Starts backend only (in development mode)
npm run client       # Starts frontend only (in development mode)

For production:

npm run build-server   # Build backend only
npm run build-client   # Build frontend only
npm run build        # Build backend and frontend

npm run start-server   # Run backend only (production)
npm run start-client   # Run frontend only (production)
npm start            # Run production server

API Documentation

The backend provides a fully documented REST API using OpenAPI (Swagger). It can be found at screenit.chalmers.it/api/docs.

When developing locally, once the server is running, you can access the interactive API documentation at: localhost:3001/api/docs (or localhost:3000/api/docs proxxied through the frontend).

Features

• Interactive endpoint testing directly in the browser
• JWT authentication support (via "Authorize" button)
• Fully typed request/response schemas (powered by Zod)
• Organized by domain (Auth, Users, Events, Groups, System)

Authentication

Some endpoints require authentication. To use them:

1. Obtain a JWT token (e.g. via OAuth login)
2. Click the "Authorize" button in Swagger
3. Enter your token

Seeding the database

To seed the database with initial data, run the following command from the ./server directory:

npx prisma db seed

Good to know

• Frontend reloads every 6 hours to clear any potential issues. This can be changed in ./client/src/App.tsx by modifying the reloadInterval variable.
• Posters are also fetched from chalemrs.it, the criteria for events to be included are set in chalmersITRepository.ts, and are currently:
  • The newspost must have a connected event
  • The connected event must have a start time, and the start time must be in the future
  • The newspost must have an image (in case of multiple images, the first one in swedish descriptoin is used)

Contribute

Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue!

Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/myCoolFeature)
3. Commit your Changes (git commit -m 'Add a very cool feature!')
4. Push to the Branch (git push origin feature/myCoolFeature)
5. Open a Pull Request

Acknowledgements

• Alfred Berglöf for spending a lot of time helping to deploy this project to the IT division server