hey, i'm kabir.

Fill my Prompt

An online party game where players select cards to fill the prompt in the funniest way possible!

// React, Typescript & Firebase Database

fillmyprompt.com

Why did I make it?

Somehow, this is because I got carried away adding features to a discord bot I made for my friends and I. I wanted to implement a cards against humanity style game for us to play, but inevitably I started to imagine how much better it could look, and how much more satisfying the interactions could feel if I went all out...

next thing I knew, I was typing in npx create-react-app.

Obstacles

Card Placement

My goal was to display the fill cards as though they were scattered on a table for you to choose from.

At first I used a looping function where I specified an acceptable amount of card overlap, and then had it try to place cards using brute force until they all fit.

Obviously, that wasn't a great solution. What I opted for instead was setting 5 predefined (and responsive) spots to eliminate the expensive looping code.

Responsive Design

Almost all aspects of the project needed to be re-evaluated to work on a vertical aspect ratio, which was pretty challenging. My biggest inspiration for the new interactions that needed to be made were the image stacks in iMessage, where cards could be swiped through and chosen with a tap.

Firebase Realtime Database

This was my first time using a real hosted database for a project, and it wasn't exactly the easiest of projects to start with. I needed to create a database with architecture enabling rooms to be created, players to join and leave, game settings to be updated, cards to be distributed, votes to be calculated and more.