S

Spozzle

Dash comes to India

The problem Spozzle solves

Spozzle is a slide puzzle that enables users to:

Pick their preferred puzzle theme and switch between themes as they wish, through a 3D image slider without losing their current score.
Track their game duration through a timer that persists the score of a user while they switch between themes.
Pause the game and quickly attend to some pressing issue beyond their control, like opening the door for a guest.
Listen to African based tunes before the start of the game and while switching between themes.
Select their language of preference (English or French)
Experience aspects of the African culture that they can relate to through the Flutter mascot - Dash
Interact with the game through multiple platforms (android, ios, web and desktop)
Invite friends to play the game by sharing their scores through WhatsApp, Twitter or Facebook
Our goal was to build the most beautiful slide puzzle with an all-around African feel.

We used the Very Good Ventures starter app (https://github.com/VGVentures/slide_puzzle) as a template to structure our app and took advantage of some already existing features like accessibility, responsiveness and working logic of a generic slide puzzle.

We realized the following milestones during the development of Spozzle:

  1. Design

Designed four African based themes from scratch, with all related design assets for each theme using tools from Adobe Suite.
Sourced for free African tunes from Chosic (https://bit.ly/3J9nPjs) and integrated into the app
Generated app icons and favicons using App Icon Generator (https://appicon.co/#app-icon) and Favicon.io (https://favicon.io/) respectively
Built a cool app logo using My Free logo Maker (https://myfreelogomaker.com/)
Used the Material design guide (https://bit.ly/3MUOVx5) to pick colour variations for buttons, texts and to design the general user interface look and feel of the app
Used a few other tools for image editing and miscellaneous.

  1. State management and logic

Challenges I ran into

Initially, we implemented the sliding effect of a tile on the entire puzzle board (board-wise); by detecting gestures on the puzzle board using our customized version of a GestureDetector and responding accordingly. During testing, we noticed that the speed of swiping was very slow, so we had to move the logic of swiping to be tile-wise and we obtained a far better performance.
It was quite challenging to compress a ton of assets, so as to optimize the app's loading speed.
When testing the responsiveness of an app on the web - by inspecting and switching between different devices, one always has to refresh the page to make the user interface (UI) show up properly. It does not automatically show the desired UI for the selected device.

Tracks Applied (1)

FOSS

It is an open project made with other tech stacks.

Discussion