DEV Community

Akinhwan
Akinhwan

Posted on

A web game built with Vue.js, Airtable, and Netlify.

Hey devs!

I recently created this game called https://www.poppalock.xyz after being inspired by a visit to Dave & Busters. They had an arcade game called "Pop the Lock" which also happened to remind me of an old Chuck E Cheese game where a light goes around in a circle.

I reverse engineered the core game mechanic and built it using Vue.js and just HTML/CSS. I used the Airtable API to store data for the leaderboard, so there is no backend for this web game.

If enough people are interested I can make the github repo public, and perhaps create a tutorial on how I made this.

Best,
Andrew

P.S.
You can find more stuff I've built on my website
https://www.akinhwan.com
I also write a weekly newsletter curating 1 song, 1 podcast, 1 link, and 1 book.

Top comments (4)

Collapse
 
pcbowers profile image
P Christopher Bowers

Andrew, this is great! I like the simplicity of it and the fact that it's mobile friendly. Great work and keep making these little projects. It's posts like these that show me someone really enjoys coding.

Just wanted to give you a word of warning: Airtable's API is not meant to be run in the browser. I pressed Ctrl+U in my browser while trying out your game and was easily able to extract your API key which, based on the way Airtable currently has everything set up, has the same privileges as your user account. While I may not have any nefarious intentions, I can't promise the same for someone else. I could place myself at the top of the leaderboard in a couple lines of code with that key, or worse, create thousands of records which would fill the Base and hit the max of your free tier quota in Airtable. I just want to let you know so that you don't run into this problem!

You may want to take a look into something like Firebase if you want to avoid creating a backend server to hide the API key. Firebase has a really easy database system that one can launch on the front end without writing any nodejs backend code.

I definitely wish Airtable had better security around their keys, or else I would certainly be using it as my database replacement for all of my hobby projects! Again, great work! You may just want to restructure the way you are currently managing your leaderboard system for security purposes.

Collapse
 
akinhwan profile image
Akinhwan

Hey Christopher, thanks for pointing that out. I had actually used firebase in the past for some similar web games, but used airtable for the ease. I will fix this pronto thanks a lot. Appreciate deeply your feedback!

Collapse
 
gamewise profile image
Gamewise

Bro i would LOVE to read a blog on how you made this!! Testing to make some simple web games but struggling with how to save games or persist data etc

Collapse
 
fradar profile image
FRADAR

Hey there! Beautiful game! I created a game just like this about a week ago.
Check it out!
codepen.io/FRADAR/full/PopRdZJ