Multiplayer Logo Quiz? 😳 – DEV Community



Overview of My Submission

Ever performed Brand Quiz? Its a sport the place you see a brand and need to guess which model owns that brand. I’ve performed it rather a lot however have at all times felt that it could be extra enjoyable if I might play in opposition to my mates. That is precisely what “PvP Brand Quiz” is.



Submission Class:

πŸƒ Wacky Wildcards



Hyperlink to Code

Play Brand Quiz with Associates!

Venture setup information

  1. Set up and run Appwrite.

  2. Create a mission on Appwrite.

  3. Add a Internet Platform to your mission.

  4. Head to API Keys part and create a brand new appwrite server key with the next permissions
    The command will fail in case you have not supplied the mandatory permissions.

    customers.learn, customers.write, collections.learn, collections.write, attributes.learn, attributes.write, indexes.learn, indexes.write, paperwork.learn, paperwork.write.

    Appwrite server API key permissions

  5. Clone this repository

  6. Create a replica of .env.instance file. Rename it to .env and fill out the variables. You’ll find values for APPWRITE_ENDPOINT, APPWRITE_PROJECT on the Appwrite dashboard itself. APPWRITE_SERVER_API_KEY is the server API key secret that we generated. Remainder of the variables can be generated by the setup script.

  7. Run yarn setup. It’s going to create the required collectoins and offer you their distinctive IDs. Add them to your .env file. It’s going to additionally add some logos to your database so you’ll be able to stand up and…



Hyperlink to Web site

Play Brand Quiz with Associates!

favicon
pvp-logo-quiz.vercel.app



Extra Assets / Information



Tech Stack



Demo & Screenshots




Log in

Login Screen



Enroll

Sign up



How one can play

How to play



Residence

Home



Be part of Room

Join Room



Share Room Code

Share Room Code



Spherical in progress

Round in progress
Round in progress



Outcome

Result



The way it works

  • After creating an account or logging in on “PvP Brand Quiz”, you’ll be able to create a room and share the room code with your folks.
  • The sport will begin when all gamers have joined the room.
  • Gamers can be introduced with 10 questions (logos). The primary participant to get probably the most questions proper wins.
  • You solely get three seconds to reply the query.
  • After the sport ends for all gamers, you’ll be able to see numerous stats like who received the sport and what number of questions every participant received proper and the way a lot time they took total.



Future Scope

  • ✨Matchmaking✨. It will permit gamers to play with anybody on the planet while not having to share an invitation code.
  • Capacity to have greater than 2 gamers in a room.
  • Play as visitor (No must signup)
  • Capacity to set variety of questions per sport.
  • Capacity to play once more in the identical room.
  • Classes filter. Play a sport with solely a particular class of logos.
  • Cellular model so gamers can play on the go. 😁



Venture Setup Information

I’ve created a setup script. Simply run one command and every little thing can be arrange for you :).
See mission README for extra particulars.



Appwrite options used

  • Database
  • Authentication
  • Realtime
  • Customers
  • Accounts



Ideas about Appwrite

This was my first time utilizing Appwrite. The device is fairly superior. It does so many issues behind the scenes that may’ve taken ages to arrange from scratch. Had an incredible time utilizing Appwrite. Nevertheless, there are some things that I struggled with. Please please please let me know if there was one thing that I missed within the documentation which might have helped me with my issues. Under no circumstances I’m attempting to criticize Appwrite. That is simply my private suggestions from utilizing Appwrite to construct this mission.

  • I might’ve favored to have an choice to checklist all paperwork of a set. The restrict of 100 looks as if an excellent default. However it could be good to have the ability to override it past 100.
  • Help for JSON subject
    Nevertheless, if I activate Array mode for a string attribute, I can ship a JavaScript Object as payload. It will get accepted however doesn’t present up correctly in Appwrite admin. However once you retrieve it utilizing the API, the information comes as it’s. πŸ™‚
  • It was a bit unclear to me the way to confirm the consumer’s identification on my Subsequent.js server. Reached out on Appwrite discord and somebody advised me that I wanted to generate a JWT for the consumer and ship it to my backend then I can carry out actions on behalf of the consumer. I’ve personally by no means used this manner for authorizing a consumer. It felt slightly cumbersome.
  • Can’t use Question() with Customers API :/
    If I need to fetch information of two customers, I’ve to put in writing 2 get queries with their ID. I cannot use the checklist API.
  • I by chance exceeded the dimensions restrict of a string subject. I received a really imprecise error (Generic 500 saying ‘Inside Server Error’) from which I used to be not in a position to determine that I exceeding the dimensions restrict. I needed to do some trial-and-error to determine the basis trigger.
  • I used to be including attributes to my assortment from Appwrite admin. I used to be not in a position so as to add many attributes with a excessive dimension. This isn’t specified anyplace within the docs that I can not add a number of high-value dimension fields. I received an error saying “Attribute restrict reached.” after I tried so as to add 2 fields with dimension=10000
    Size limit reached error
  • db.getIndex perform throws exception even when index exists. The API Key does have indexes.learn and index.write permission.
 (await database.getCollection("6277923110f6559c7549")).indexes
// Response of getCollection
[
  {
    key: 'name',
    type: 'unique',
    status: 'available',
    attributes: [ 'name' ],
    orders: [ 'ASC' ]
  }
]


// getIndex doesn't work on the identical assortment
await database.getIndex("6277923110f6559c7549", "identify")
// Response of getIndex
AppwriteException [Error]: Index not discovered
    at Shopper.name (<projectPath>node_modulesnode-appwritelibshopper.js:162:31)
    at processTicksAndRejections (node:inner/course of/task_queues:96:5)
    at async Database.getIndex (<projectPath>node_modulesnode-appwritelibprovidersdatabase.js:1046:16)
    at async x (<projectPath>setup.js:51:15) {
  code: 404,
  sort: 'index_not_found',
  response: {
    message: 'Index not discovered',
    code: 404,
    sort: 'index_not_found',
    model: '0.13.4'
  }
}
Enter fullscreen mode

Exit fullscreen mode



Closing Ideas

This was my first time taking part solo in a hackathon. Thanks a lot Dev and Appwrite for this chance. I realized a number of new issues whereas constructing out this mission. It was a number of enjoyable. Trying ahead to utilizing Appwrite in future initiatives.

Add a Comment

Your email address will not be published. Required fields are marked *