The Internet is Made for Cat Pics and Doggos: How I Learned to Stop Worrying and Love State Management

 

Special thanks to Sarah Fullmer (@FullmerS) for this great challenge idea.

 

Displaying information from the internet is one of the most common and useful operations an app can perform. At first glance, this process seems trivial.

So, let's spice it up and pretend you want to make an app that shows pictures of cats from the internet. Just GET those cat pics and show them, right?

Well, not so fast, buddy. 

Anyone who has tried to implement this sort of thing can tell you about several complications that naturally arise.

Fetching data takes time. What do you show while the user is waiting for the data? What if you want 100 super high-resolution cat pics and so it takes a REALLY long time? You don't want the UI to be frozen while the user is waiting for these to download. What happens if the data does not come as expected? What if the user is offline? Oh, and how are you going to serialize that JSON metadata about the picture?

There you were, just trying to get some cruddy cat pics. Suddenly, you are dealing with asynchronous programming, serialization and state management.

It's a lot. Maybe you start to panic a little because there are so many things to consider at once and all you want to do is look at cats. You start to feel overwhelmed and question your life choices.

After taking a deep breath though, you think to yourself, "I wonder if there is some officially recommended architecture for dealing with this incredibly common scenario. Surely, there must be."

Alas, no. Flutter is intentionally un-opnionated when it comes to this sort of thing. This un-opinionated approach has a lot of advantages. If you are an experienced developer who knows what the right tool is for your job, this flexibility is really empowering.

https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

But, what if you do not have a ton of experience and don't know a MobX from a Redux from a GetX. Why are there so many X's anyway?

 

So, this Challenge is about one particular state management solution that is broadly useful. It will not always be the right choice. Nothing is. But a lot of the time, it is a darn good one.

I am, of course, talking about BLoC.

In this challenge, we will be creating a Tinder clone for Cats and Dogs. The point of the Challenge is to become familiar with BLoC and the basic architecture for an app that can GET and POST data.

Such an app could become large and complicated quite fast. We don't want you to spend more than a few hours on this, so we are going to provide a starter app for you. The Challenge is for you to put some meat on the bones of the starter app with:

  • Data Persistence
  • State Management with BLoC

 

You do not need to worry about the following things, since they are provided in the starter app:

  • Basic UI / Swipable widgets
  • Navigation

 

Your challenge is to take the starter app and make the following functions possible:

  • Get a cat/dog picture depending on the user's preference and show it
  • Vote it up or down
  • Show a new picture after the old one has been voted on
     

You can find the API for getting the cats and dogs and managing votes here:

https://tinder-cat-dog-api.herokuapp.com/swagger.html

 

The starter application is here:

https://github.com/Flutter-Challenge/tinder_cat_dog_app

 

 

Submit your solution
Please login to access this form.