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

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.read, users.write, collections.read, collections.write, attributes.read, attributes.write, indexes.read, indexes.write, documents.read, documents.write.

   

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…

View on GitHub

Link to Website

PvP Logo Quiz

Play Logo Quiz with Friends!

pvp-logo-quiz.vercel.app

Additional Resources / Info

Tech Stack

• 🔥 Appwrite 🔥 (Backend)
• Next.js (Frontend + Backend)
• DigitalOcean + Vercel (Deployment)

Demo & Screenshots

Log in

Sign up

How to play

Home

Join Room

Share Room Code

Round in progress

Result

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
• db.getIndex function throws exception even when index exists. The API Key does have indexes.read 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 Client.call (<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'
  }
}

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.