Scribd Logo
Upload

Welcome to Scribd!

  • Build Bingo Online With NextJS 13 and Supabase - DeV Community

    Uploaded by

    marcelu.phd
    39 views7 pages
    The document describes how to build an online bingo game using NextJS for the frontend, Chakra UI for styling, and Supabase for authentication and the backend database. Key features include user authentication with Supabase OAuth, real-time data updates, creating game rounds and teams, and joining games via an invitation code. Screenshots show the host creating a game and sharing the code, a player joining with the code, and the host generating random numbers.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes how to build an online bingo game using NextJS for the frontend, Chakra UI for styling, and Supabase for authentication and the backend database. Key features include user authentication with Supabase OAuth, real-time data updates, creating game rounds and teams, and joining games via an invitation code. Screenshots show the host creating a game and sharing the code, a player joining with the code, and the host generating random numbers.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    39 views7 pages

    Build Bingo Online With NextJS 13 and Supabase - DeV Community

    Uploaded by

    marcelu.phd
    The document describes how to build an online bingo game using NextJS for the frontend, Chakra UI for styling, and Supabase for authentication and the backend database. Key features include user authentication with Supabase OAuth, real-time data updates, creating game rounds and teams, and joining games via an invitation code. Screenshots show the host creating a game and sharing the code, a player joining with the code, and the host generating random numbers.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 7

    Build Bingo Online with NextJS 13 and Supabase - D... https://dev.to/bonnguyenitc/create-bingo-online-with-n...

    bonnguyenitc
    Posted on Jan 5

    Build Bingo Online with NextJS 13 and


    Supabase
    #nextjs #realtime #supabase #react

    Hi everybody, I try to make a Bingo game with:

    • NextJS 13, Chakra UI for font-end.


    • Supabase for back-end(authenticate, database).

    Demo
    Source code

    Features

    • Authenticate with Supabase OAuth.


    • Realtime data.
    • Create a round to play.
    • Create a team to play together.
    • Join the game by code invitation or entry code of game.
    • Role: Host, Player

    Hope we have a fun game.

    Demo

    Step 1: The host create a game

    1 of 7 10/24/23, 16:27
    Build Bingo Online with NextJS 13 and Supabase - D... https://dev.to/bonnguyenitc/create-bingo-online-with-n...

    Step 2: The host copy code send to player

    2 of 7 10/24/23, 16:27
    Build Bingo Online with NextJS 13 and Supabase - D... https://dev.to/bonnguyenitc/create-bingo-online-with-n...

    Step 3: Player enter code to join game

    3 of 7 10/24/23, 16:27
    Build Bingo Online with NextJS 13 and Supabase - D... https://dev.to/bonnguyenitc/create-bingo-online-with-n...

    Step 4: The host click Bingo button to generate number

    4 of 7 10/24/23, 16:27
    Build Bingo Online with NextJS 13 and Supabase - D... https://dev.to/bonnguyenitc/create-bingo-online-with-n...

    Top comments (0)

    Code of Conduct • Report abuse

    Sentry PROMOTED

    5 of 7 10/24/23, 16:27
    Build Bingo Online with NextJS 13 and Supabase - D... https://dev.to/bonnguyenitc/create-bingo-online-with-n...

    Youtube Tutorial Series


    So you built a Next.js app, but you need a clear view of the entire operation
    flow to be able to identify performance bottlenecks before you launch. But
    how do you get started? Get the essentials on tracing for Next.js from
    @nikolovlazar in this video series �

    Watch the Youtube series

    bonnguyenitc
    JOINED
    Mar 13, 2020

    More from bonnguyenitc

    New React Native Template 2023 for start new app. I choice it
    #reactnative #ios #android #react

    Sentry PROMOTED

    6 of 7 10/24/23, 16:27
    Build Bingo Online with NextJS 13 and Supabase - D... https://dev.to/bonnguyenitc/create-bingo-online-with-n...

    Crash reporting for React Native with source map support


    Sentry is the leading error monitoring tool among React Native devs according to State of
    React Native .

    Try Free

    7 of 7 10/24/23, 16:27

    You might also like