The Reel Deal

• 

  Correct Scroll

• 

  Wrong Scroll 1

• 

  Wrong Scroll 2

Inspiration

Consuming content on social media is too easy and intuitve. We wanted to make it more challenging and funnier to the point were you don't even want to see the content itself, just try to go to the next video guessing correctly.

What it does

The app randomly picks the right swipe direction for the next video, considering the four cardinal directions of the video, up, down, left, right. Guess right and you go to the next video, guess wrong and the app will make fun of you. It's joy both ways.

How we built it

• We used Flutter to quickly develop for both iOS and Android.
• Framework Choice: Switched to Flutter after struggling with React Native setup.
• Swipe Functionality: Used GestureDetector and PageView to manage swipe directions.
• Video Fetching: Integrated Pexels API with http and added caching.
• State Management: Used Provider to manage app state.
• Video Playback: Played videos using video_player, syncing audio and video.
• UI: Designed a fun, smooth experience mimicking social media apps.
• Testing: Optimized performance and tested core features. ## Challenges we ran into
• At first we've tried using React Native, but we weren't able to properly setup the environment to use it fast enough, so according to a mentor's advice we choose Flutter.
• The team never developed with dart nor Flutter. It was a language barrier from the start, we had a lot of friction learning the syntax and how each component worked on mobile;
• Manipulating the screen behavior according to the user input was a delicate process, a lot of information needs to be gathered to properly validate the swipe/fling behaviour.
• Fetching the videos from an external api and storing properly was and still is a challenge for the application, choosing the right time to fetch more videos and the right amount to seamlessly go thorough the next video is a hard formula.
• Manipulating the behaviour of Components can sometimes overlap and we had some issues making the video play after the user first swipe/fling interaction with the screen, all of it because of a condition we needed to ensure: we can't allow peeking to the next reels.
• Triggering events properly after swipe, showing the videos and playing audio afterwards leaded to some messy flows.
• Since both of us were learning, it was really difficult to distribute what each one was ## Accomplishments that we're proud of
• Making our first Flutter app itself without any previous knowledge in mobile is a big accomplishment for both of us.
• Mimicking a social media scroll behaviour.
• Using mobile app HTTP request for external API's to fetch videos

What we learned

• Learned how to use a mobile app language and framework
• Flutter State is really interesting and intuitive ## What's next for The Reel Deal
• Add a visual streak score for the user for each sequential right swipe the user achieves
• improve the interface to resembles better other social medias "reels".
• Share screen after the streak is lost or reaching the maximun streak amount
• MORE MEMES

Built With

• dart
• flutter