🌐 CIRCUIT ON (Frontend)

See application structure on the image below:

This is the Frontend application. This project depends on APIs provided by the Backend application. For Backend application, please go to https://github.com/leogomesdev/circuit-on-backend

📚 Description

CIRCUIT ON allows you to manage images for displaying on TV based on a schedule. This is super useful for Gyms that need to display different images simultaneously on multiple TVs.

The idea for this app is to save time: it would not be required to manually switch the pictures on different TVs. Instead, use this app to upload the images and set a schedule. On the TV, open the view page on the native Internet Browser. The image on the view page will be automatically replaced by the next images at the specified date and time.

📲 Main technologies used

• Angular CLI version 15.0.1
• OKTA for Authentication
• Commitizen command line tool
• Conventional Commits specification

📝 Lint

This project uses ng lint to ensure code inspection and formatting. If you change the code, make sure to run the command below for code inspection:

ng lint

💡 Requirements

You must create an OKTA Application (for Authentication). Follow this doc for instructions, to get your Client Id and Domain/Issuer

💻 For local usage:

• Node.js (v16 or v18)
• npm

🚀 Running

💻 Locally

• Be sure to install the requirements

  • If you have nvm - Node Version Manager installed, you could just run nvm install and it will install the correct version of Node.js based on file .nvmrc

• Install dependencies:

    npm install

• Create .env file:

    cp -v .env.example .env

• Edit .env file to provide the required environment variables.

• Start the application:

    ng serve

☁ Production Environment

For compatibility with TV browsers, which are very limited, it is required to deploy this app using Server Side Rendering instead of Client Side Rendering.

Follow this doc for instructions

🔗 Usage

After signing in using an okta valid user, the usage of the website is pretty simple:

1. Upload images
2. Set a schedule for desired images
3. Preview on the Current Schedule page
4. Open view page on TV native Internet/Browser

Please refer to the user manual for all instructions

👀 TL;DR

1. Navigate to Home Page, sign using Okta, and follow instructions on screen