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.
Add.participant.mp4
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
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.
Evidences.mp4
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.
Quiz.mp4
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.
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.
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.
finance.mp4
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.
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'.
file: /components/Submit.tsx
const { pending } = useFormStatus()
I'm also utilizing server actions for submitting the form::
.
.
.
<form
ref={formRef}
action={submitAddQuiz}
className="w-full flex flex-col"
>
...
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.
.
.
.
if (status === 201) {
inputsRef.current?.reset()
formRef.current?.reset()
}
...
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.
The result: hooks/useParticipants.tsx
export function useParticipants(): response {
const supabase = createClientComponentClient<Database>()
const { data: participants, error } = useSWR<Participants[]>(
'participants-key',
fetcher
)
useEffect(() => {
const channel = supabase
.channel('participants')
.on(
'postgres_changes',
{
event: '*',
schema: 'public',
table: 'participants',
},
(payload) => {
mutate('participants-key')
}
)
.subscribe()
return () => {
supabase.removeChannel(channel)
}
}, [supabase])
return [participants || [], !error && !participants, error]
}
I created a database for this project and also implemented functions and triggers to simplify the code.
In the project directory, you can run:
This command builds the Next.js application for production. It creates an optimized version of your application in the .next
folder.
This command starts a Next.js production server with the built application. It serves the built version of your application from the .next
folder.
Remember to replace npm
with yarn
if you're using Yarn as your package manager.
To run this project, you will need to add the following supabase environment variables to your .env file
NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
- Twitter - @ivanrice_
- Art Instagram - ivanrice_