🔍Evidence Monitoring tool
It is a real-time application, which means that any changes you make will be displayed instantly, without the need to reload the page. Currently, it accepts Twitch clips videos as evidence. In the future, it will support additional file types and videos from different sources.
Table of Contents
Features & Usage
.. Participants
.. Statistics
.. Evidence Management
.. Questions
.. Penalties
.. Finances
.. Finance Status
Responsive
My Process
.. What I learnt
.. Server Actions & forms
.. Supabase With SWR
.. Supabase Schema
.. Built With
Features:
Participants:
Statistics:
Displays statistics for each participant, including penalties and finances. Moreover, this content can be placed in OBS, so you can show or hide the statistics of other participants and align the content as you wish. View Stats
Evidence Management:
Allows you to manage Twitch clips, which are added to a "pending" section where they can be accepted or rejected. When evidence is accepted, a "penalty" is generated: View Evidence Management.
Questions:
You can create questions with multiple options and a defined time limit. When a question is created, it automatically appears on the participants' screen, along with a timer. Questions that are answered incorrectly or out of time are marked as penalties.
Create questions: Quiz Dashboard.
View and answer questions: Quiz Management.
View and answer questions: Quiz Management.
Penalties:
In the URLs provided earlier for Evidence Management and Quiz Management, you can see the number of pending penalties, meaning the challenges or punishments that participants must fulfill. When a participant fulfills their penalty, you should press the "cumplir sanciones" button.
Finances:
You can keep track of bets with bits or subscriptions. This section manages debts and debtors. Only the participant who makes the bet can take this action. If a debt is not fulfilled, a new one should not be created until it's completed View Finance Dashboard.
Finance Status:
In the finance administration section, you can see the debts and debtors of a participant. These debts can have three statuses: "pending," "in review," and "completed." Here's the link to review and manage finances: View Finance Management.
Responsive:
My Process
What I learnt
This was my first experience with Next.js 13 and Supabase in a project. One thing that gave me some trouble was working with action servers. On the other hand, I was pleasantly surprised that integrating SWR made my code easier to read and shorter.
Of course, learning Supabase, Next.js routing, and server components was challenging, but the learning curve wasn't that tough.
Server Actions & forms (experimental feature)
The most challenging part was creating a form with a Button submission state and configuring an action server to handle a mutation in the Supabase database.
First, I created a Button component using useFormStatus to track the form submission status and implement a loader. The 'pending' property becomes 'true' when the form is being submitted (during the submission action's progress). When the submission is complete, 'pending' switches to 'false'.
I'm also utilizing server actions for submitting the form:
So, the action server exclusively operates on the server, making it impossible to clear the form directly. To address this, I created a file to store all the server actions in 'app/actions/' directory. This approach also helps in separating my client code from the server.
Now, once the action submission is complete, I can clear my form.
Supabase With SWR
I used SWR to cache data from Supabase. Since I was frequently calling participant data, SWR provided a straightforward solution to the problem. I used the mutate function from SWR only when changes occurred in my Supabase subscription.
Supabase Schema
I created a database for this project and also implemented functions and triggers to simplify the code.
