DEV Community

Cover image for Multiplayer Logo Quiz? 😳
Ansh Saini
Ansh Saini

Posted on • Updated on


Multiplayer Logo Quiz? 😳

Overview of My Submission

Ever played Logo Quiz? Its a game where you see a logo and have to guess which brand owns that logo. I've played it a lot but have always felt that it would be more fun if I could play against my friends. That's exactly what "PvP Logo Quiz" is.

Submission Category:

🃏 Wacky Wildcards

Link to Code

GitHub logo ansh-saini / pvp-logo-quiz

Play Logo Quiz with Friends!

PVP Logo Quiz


Project setup guide

  1. Install and run Appwrite.

  2. Create a project on Appwrite.

  3. Add a Web Platform to your project.

  4. Head to API Keys section and create a new appwrite server key with the following permissions The command will fail if you have not provided the necessary permissions., users.write,, collections.write,, attributes.write,, indexes.write,, documents.write.

    Appwrite server API key permissions

  5. Clone this repository

  6. Create a copy of .env.example file. Rename it to .env and fill out the variables. You can 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. Rest of the variables will be generated by the setup script.

  7. Run yarn setup. It will create the required collectoins and provide you with their unique IDs. Add them to your .env file. It will also add some logos to your database so you can get up and…

Link to Website

PvP Logo Quiz

Play Logo Quiz with Friends!


Additional Resources / Info

Tech Stack

Demo & Screenshots

Log in

Login Screen

Sign up

Sign up

How to play

How to play



Join Room

Join Room

Share Room Code

Share Room Code

Round in progress

Round in progress
Round in progress



How it works

  • After creating an account or logging in on "PvP Logo Quiz", you can create a room and share the room code with your friends.
  • The game will start when all players have joined the room.
  • Players will be presented with 10 questions (logos). The first player to get the most questions right wins.
  • You only get three seconds to answer the question.
  • After the game ends for all players, you can see various stats like who won the game and how many questions each player got right and how much time they took overall.
  • Every thing is ✨Realtime✨. You can see you opponent's progress. And they can see yours ;)

Future Scope

  • Matchmaking✨. This will allow players to play with anyone in the world without needing to share an invite code.
  • Ability to have more than 2 players in a room.
  • Play as guest (No need to signup)
  • Ability to set number of questions per game.
  • Ability to play again in the same room.
  • Categories filter. Play a game with only a specific category of logos.
  • Mobile version so players can play on the go. 😁

Project Setup Guide

I have created a setup script. Just run one command and everything will be set up for you :).
See project README for more details.

Appwrite features used

  • Database
  • Authentication
  • Realtime
  • Users
  • Accounts

Thoughts about Appwrite

This was my first time using Appwrite. The tool is pretty awesome. It does so many things behind the scenes that would've taken ages to set up from scratch. Had an amazing time using Appwrite. However, there are a few things that I struggled with. Please please please let me know if there was something that I missed in the documentation which would have helped me with my problems. In no way I am trying to criticize Appwrite. This is just my personal feedback from using Appwrite to build this project.

  • I would've liked to have an option to list all documents of a collection. The limit of 100 seems like a good default. But it would be nice to be able to override it beyond 100.
  • Support for JSON field However, if I turn on Array mode for a string attribute, I can send a JavaScript Object as payload. It gets accepted but doesn’t show up properly in Appwrite admin. But when you retrieve it using the API, the data comes as it is. :)
  • It was a bit unclear to me how to verify the user's identity on my Next.js server. Reached out on Appwrite discord and someone told me that I needed to generate a JWT for the user and send it to my backend then I can perform actions on behalf of the user. I have personally never used this way for authorizing a user. It felt a little cumbersome.
  • Can’t use Query() with Users API :/ If I want to fetch data of two users, I have to write 2 get queries with their ID. I can not use the list API.
  • I accidentally exceeded the size limit of a string field. I got a very vague error (Generic 500 saying 'Internal Server Error') from which I was not able to figure out that I exceeding the size limit. I had to do some trial-and-error to figure out the root cause.
  • I was adding attributes to my collection from Appwrite admin. I was not able to add many attributes with a high size. This is not specified anywhere in the docs that I cannot add multiple high-value size fields. I got an error saying "Attribute limit reached." when I tried to add 2 fields with size=10000 Size limit reached error
  • db.getIndex function throws exception even when index exists. The API Key does have and index.write permission.
 (await database.getCollection("6277923110f6559c7549")).indexes
// Response of getCollection
    key: 'name',
    type: 'unique',
    status: 'available',
    attributes: [ 'name' ],
    orders: [ 'ASC' ]

// getIndex does not work on the same collection
await database.getIndex("6277923110f6559c7549", "name")
// Response of getIndex
AppwriteException [Error]: Index not found
    at (<projectPath>\node_modules\node-appwrite\lib\client.js:162:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Database.getIndex (<projectPath>\node_modules\node-appwrite\lib\services\database.js:1046:16)
    at async x (<projectPath>\setup.js:51:15) {
  code: 404,
  type: 'index_not_found',
  response: {
    message: 'Index not found',
    code: 404,
    type: 'index_not_found',
    version: '0.13.4'
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

This was my first time participating solo in a hackathon. Thank you so much Dev and Appwrite for this opportunity. I learned a lot of new things while building out this project. It was a lot of fun. Looking forward to using Appwrite in future projects.

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.