Puzzle versus

A simple Puzzle game available as PWA or as mobile app which allow you to use any image from your device or from an image url. In the future you'll be able to play against time or online players.

Comment

Inspiration

I was inspired by the challenge example and I wondered if it was possible to provide custom images.

What it does

It allow you to play with any image uploaded from your device or from any (unprotected) image url. You can also enable a cheater mode and save high scores.

How we built it

We built it using Flutter with Riverpod for the state management and with the reorderable grid package for the game grid.

Challenges we ran into

  • In order to be able to split image in little tiles I need to get this image and not only a thumbnail provided by a native flutter plugin. On mobile app I can access to file storage to get this image so it's not a problem. But on a PWA or a web page I need to take a screenshot of the displayed image. But image was display in a native embedded web view without possibility to took a screenshot.

  • Google cloud billing subscription is bugged: https://www.googlecloudcommunity.com/gc/Cloud-Hub/OR-CBAT-15-ERROR-Google-cloud-free-trial-account/m-p/401868 So I have to find an another way to store my PWA and also my backend api and database in order to be able to save players' high scores.

Accomplishments that we're proud of

  • I found a workaround by creating a fork of the image_network which is capable to took a screenshot of the rendered page.

  • I found a workaround to store PWA and backend and database with Heroku. BUT Heroku clear local project storage after some inactivity time so my database can't be saved :(

  • I'm also proud of the overall project which can be a good starter project for anyone who want to start with Flutter and Riverpod and also with Node. You can found complete Readme for beginners here:

  • I didn't finish all features and I have to find another way to store my database but I presented this project for a job interview and I'm happy to tell you that I've been hired :D

What we learned

  • How to deploy a project on Heroku
  • How to create a simple Node backend api
  • How to handle Riverpod advanced state management
  • How to build Flutter for web
  • How handle a fully responsive app

What's next for Puzzle versus

  • Fix the database storage
  • Add time versus playing mode
  • Add realtime multiplayer versus mode
Share this project:

Updates