Getting Started

This project aims to have an easy way to share and install Streamelements overlays in your Twitch channel using a simple code. Also, here I am going to share some widgets that I created so the community can use it on their channels.

Most of the overlays are written for Twitch, but nothing is stopping you from using them on other platforms (unless they are specifically designed for it).

A small portion of the page is dedicated to custom endpoints. At the moment, there are only two endpoints. One is the top leaderboard and the other is the top watchtime. Both can be used on your stream chat. Suggestions for new endpoints are highly accepted.

If you find any issues on the page or something is not working as expected, please let me know. Also, if you have any idea or suggestions feel free to contact me.

You can find instructions on how to use it below:

How to share an overlay

How to install an overlay

How to check the overlays I shared / how to unshare them

Webpage

The project main URL is:

https://seapi.c4ldas.com.br

How to use the website

- If you want to share an overlay you created:

• Go to https://seapi.c4ldas.com.br and click on Share overlay / widget;


• Click on Login with Streamelements and authorize the application to have access to your overlays;


• After authorization, the page will show all of your overlays, simply click on the one you want to share and a popup will appear with a code;


• Copy that code and send to your friend.

- If you want to install an overlay:

• Go to https://seapi.c4ldas.com.br and click on Install overlay / widget;


• Click on Login with Streamelements and authorize the application to install overlays on your account;


• After authorization, type the overlay code in the text box and click on Install overlay;


• The overlay will be installed in your account! Click on the •••••••••••• from "Overlay URL (click to copy)" and then add it to OBS;


• Alternatively, you can just drag the button called Drag me to OBS Studio to your OBS and the overlay will be added directly.

- If you want to see which overlays you have shared:

• Go to https://seapi.c4ldas.com.br and click on My shared overlay / widgets;


• If you haven't connected, click Login with Streamelements and authorize the application;


• After authorization, you will see the overlays you have shared and the corresponding code;


• If you want to remove it, just click on the 🗑️ icon and confirm;


• Attention: That will not remove the overlay from the accounts that have it installed! It will just remove the option to be installed again.

Code and hosting

This project is written using Javascript and Next.js. It is hosted on Vercel using a hobby account (free plan).

Structure

At the moment the structure of the application is:

/
|- public/
|  |-- images/
|  |-- css/
|
|- app/
|  |--components/
|  |--lib/                    
|  |
|  |--(frontend)/
|  |  |-- homepage            # done
|  |  |-- login/              # done
|  |  |-- share/              # done
|  |  |-- install/            # done
|  |  |-- show-shared/        # done
|  |  |-- leaderboard/        # done
|  |  
|  |--api/
|     |-- overlays/
|     |     |-- install/      # done
|     |     |-- list/         # done
|     |     |-- share/        # done
|     |     |-- show-shared/  # done
|     |     |-- unshare/      # done
|     |
|     |-- github/
|     |    |-- widgets/       # done
|     | 
|     |-- logout/             # done
|     |-- callback/           # done
|     |-- top/                # done
|     |-- watchtime/          # done