SlideIt with Friends

Play together to solve the slide puzzle. How hard can it be!

Comment

Inspiration

For this challenge I was inspired by tools like Figma and Google Sheets. The modern web of 2022 is all about realtime and coöperation. Because I never had the opportunity to experiment with realtime applications I thought this would be the perfect project to try it out. More on how I started this journey on medium

What it does

When you start the app (on mobile or web or desktop) your asked to customise your (mouse) pointer. After joining the puzzle you'll play with all other players to solve the puzzle. Because it would be total chaos to move the puzzle on the frontend, I moved that responsibility to the server. Players get to vote on what tile should be moved and every couple of seconds the server will execute the move based on the tile that has the most votes.

How I built it

I started with investigating how to build my stack. I really wanted to do dart on the server as well so I tried to take that into account while building the stack. After starting with AppWrite (that could do dart cloud functions) I soon discovered that, that wasn't for me. In stead of feeling empowered by the system, I found myself fighting against it. That was the point that I decided to take a step back en redo the stack from the start. I landed on a couple of simple docker containers linked to a database capable of subscriptions (RethinkDB) and a dart gRPC server that also supports 2 way stream communication.

Challenges I ran into

To be short. A lot. The biggest was starting with AppWrite and switching to a different backend implementation. Further down the line I encountered some problems with keeping the cursors of players performant. Something I still am struggling with while submitting the project.

Accomplishments that im proud of

  • Learned a lot during the duration of the challenge
  • Had a ton of fun
  • Very responsive. Work perfect on mobile, tablet, desktop and web. (landscape or portrait)
  • I works, and its magical to see other pointer moving while you're working on solving the puzzle.

What I learned

  • gRPC: Really fun to learn and a really great way to sync your shared models between your frontend and your backend.
  • RethinkDB: Awesome tool. I got the feeling I only scratched the surface of whats possible.
  • Dart on the server! Really love how simple it is an how easy to setup
  • Packaging on Windows via msix

What's next for SlideIt with Friends

I hope that we will get some people together and finish some puzzles. The knowledge I got during the last couple of months will definitely come in handy later on other projects :-)

Built With

  • dart
  • flutter
  • grpc
  • multiplayer
  • realtime
  • responsive
  • rethinkdb
Share this project:

Updates