Multiplayer Logo Quiz? 😳
Tags: appwritehack, gamedev, javascript, nextjs
Published: 2022-05-10 18:53:21

## 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

{% embed https://github.com/ansh-saini/pvp-logo-quiz %}

## Link to Website

{% embed https://pvp-logo-quiz.vercel.app %}

## Additional Resources / Info

### Tech Stack

- 🔥 [Appwrite](https://appwrite.io/) 🔥 (Backend)
- [Next.js](https://nextjs.org/) (Frontend + Backend)
- [DigitalOcean](https://www.digitalocean.com/) + [Vercel](https://www.vercel.com/) (Deployment)

### Demo & Screenshots
{% embed https://youtu.be/B7wFUADFZMA %}
#### Log in
![Login Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05jpsfy94ciecojbl8et.png)
#### Sign up
![Sign up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6adpdfw446q692wmv10z.png)
#### How to play
![How to play](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5qnyy9i5lqznnfrq2ok.png)
#### Home
![Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpp5e4j7ifpfl955q0xb.png)
#### Join Room
![Join Room](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21milvf295bh21ym5y3d.png)
#### Share Room Code
![Share Room Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fczzviaps22fbhp5xwzl.png)
#### Round in progress
![Round in progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8rdec9ez2gt5d5gteth.png)
![Round in progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xi1colkc8eonvohzier.png)
#### Result
![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp64xt944n0r9b7kilua.png)
### 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](https://github.com/ansh-saini/pvp-logo-quiz/blob/main/README.md) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjlagmyl0fatv3j3mrsl.png) 
- `db.getIndex` function throws exception even when index exists. The API Key does have `indexes.read` and `index.write` permission.
```js
 (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.