DEV Community

Neha Sharma
Neha Sharma

Posted on

I built a PWA Gaming app

Hello,

Last week at my work I talked on PWA and made a color guessing app. The idea was simple : One needs to guess the right HEXA color value of the background color. One can play the game even there is no network or internet.

Tech Stack used:

  • HTML5
  • CSS3
  • JavaScript

As of now following features I have implemented:

  • Add to home screen
  • offline support
  • splash screen and theme
  • icons for the home screen

Future plans:

  • Add scores
  • Add hints

Screenshots:

Alt Text

Alt Text

Alt Text

Alt Text

Steps to install:

  • On the android phone, open Chrom browser and type colormatching.netlify.com
  • You will get the prompt 'Add to home screen' tap on 'ok'.The icon will get added to the mobile.
  • Now, go back to the mobile home screen and tap on the color icon. It will take you to the app on the browser.
  • Go to the mobile setting and turn on the 'Airplane mode'. Now, again go back and tap on the color icon. This time instead of a blank or broken screen you will see the game page. Enjoy the game.

Try the app on mobile browser. Chrome browser and android.

PS: This is still WIP if you see any bugs or broken UI/UX please let me know.

Top comments (20)

Collapse
 
devanghingu profile image
Devang Hingu

umm i confuse.. what is PWA? is it like reactNative?

 
devanghingu profile image
Devang Hingu

Thanks for your valuable response. Hope we find someone who can... !!!

Thread Thread
 
hellonehha profile image
Neha Sharma

Yes, it can work with backend API too.

Thread Thread
 
devanghingu profile image
Devang Hingu

Okie I will check all things tomorrow morning.

Thread Thread
 
devanghingu profile image
Devang Hingu

okie that great..!! umm what is diff between reactnative and pwa?

Thread Thread
 
hellonehha profile image
Neha Sharma

Reactnative is based on the react.

PWA is based on the HTML, CSS, JS or can be done with any JS framework too.

Thread Thread
 
devanghingu profile image
Devang Hingu

it amazing..! i will definitely try it

Thread Thread
 
devanghingu profile image
Devang Hingu

Umm Actually right now i m finding something about my interns project. if anything i found through PWA thn i will share with all of you..!!

Collapse
 
ahmedx10 profile image
Mobeen

Hi Neha,
Nice work. I am bit curious about the Technologies that you used for this pwa. By the way this game is quite hard for us 😄

Collapse
 
hellonehha profile image
Neha Sharma

Thank you!!

Tech stack is HTML, CSS, and JavaScript.

Oh!! I got the feedback it is hard. I am planning to add hints.

Do you have any thoughts on how I can make it more simple for folks?

Collapse
 
eekayonline profile image
Edwin Klesman

Nice app and good little learning project too! 🙌🏻

You might make it easier by adding multiple choice with 3 similarly hex codes and let us choose the right one?

Collapse
 
ahmedx10 profile image
Mobeen

Well its hard for most of us because most of use CSS frameworks such as TailwindCSS for rapid development and for colors, color selectors and generators are used.
And you can add Options section but it will be a long task.

Collapse
 
devanghingu profile image
Devang Hingu

right now i m django intern.. is it work with any backend API?

Collapse
 
madza profile image
Madza

Feature request:
Airplane mode turns off after you guess all the 268,435,456.

Collapse
 
devanghingu profile image
Devang Hingu

What these numbers mean 🙄

 
hellonehha profile image
Neha Sharma

Yeah!! sounds good for the hints.

Yes, vanilla JS no framework.

Collapse
 
devanghingu profile image
Devang Hingu

interesting...!!!