📺 Introducing Spotern App — Get Any Product You’ve Seen on TV with React Native!

“Women’s clothes store” — Hannah Morgan

2017 is coming to an end and I have one more thing to share with you! Something I’ve been working on for the past 10 months. Something I’m really proud of. Something I’ll be able to think about in 10 years and tell myself: “You did something great there, son”.

🎉 Introducing Spotern: the app that helps you find all the products you’ve seen in movies, series, music clips and TV shows! 🍾

Project: Spotern 🔍

Spotern is a one-year old startup based in Paris, France. Its founder Nicolas got the idea while watching The Girl With The Dragon Tattoo: he really liked the jacket Daniel Craig was wearing in a scene, but didn’t know how or where to find it.

But wait. What if we could have a platform where we could find every single product that appears on screen? And if we don’t find it there: just ask the community to find it for us? Maybe gather some infos about an artist, a movie, a TV series, … in a single place? Well, that’s the 3 core elements of Spotern in a nutshell: Spots, Wanted & Medias.

The team quickly felt the need for a mobile app that could backup the already existing web app. This is where yours truly comes into play.

My mission was to build a mobile app for our 50 000 contributors, on both iOS & Android, using React Native.

I used to work on small iOS-only projects, with other developers helping me, so this one was a big undertaking for me: being all by myself on a project of that scale.

So this post is not going to be particularly technical like my previous ones. This time, I’ll try to write a bit more about how I built things with React Native. I really want to focus here on the tools I used to build Spotern.

Language: JavaScript ⚛️

Spotern is one of those apps that would have been a living nightmare to build solely with native. We had around 30+ screens to implement and doing it twice for both iOS & Android would have been really cumbersome. From there, React Native was probably the most obvious option. I’ve already written a post where I detail some benefits of this framework and (subjectively) compare it to its competitors, back in January.

Tales of a React Native Beginner: After a Year Of Learning

Navigation: React Router Navigation ⛵️

This one also was a simple choice. I’ve been working for a few months with Léo Le Bras on a new router for React Native that allows you to use React Router on mobile apps. Long story short: it’s Just Components™. Components everywhere. Even if we consider it production ready, the router is still in its early age so its not perfect and everything, but we’re working on it. I had the opportunity to give a lightning talk about this during react-europe 2016 (there’s also a full recap in a previous post, if you’re not really a video person):

⛵Thousand Ways to Navigate in React Native

Typing: Flow 🔮

Here we have a subject that’s getting more and more popular in the JavaScript ecosystem: type checking. JavaScript relies on dynamic typing. Hower, for several REasons *winky face*, static typing is becoming a trend. Usually you’ll have 2 options to implement it: TypeScript or FlowType.

I personally opted for Flow because I found it easier to get started with (simply add a `/* @flow */` comment at the top of your .js file), much less obtrusive than TypeScript, it has a better type inference and it can be added gradually to your project file by file.

If you happened to be interested in type checking and want to take it to the next level: you might really be interested in ReasonML 😏. Here is a great talk by bloodyowl that perfectly makes the link between the weaknesses of JavaScript (i.e.: its type system), and how ReasonML solves these problems and much more:

Time: date-fns ⏳

Dates & time are a core element of our app. Especially inside the blog section where articles & categories are sorted by creation date. So: that’s something we don’t want to break, ever.

When we talk about date libraries in JavaScript, Moment.js tends to be the most popular one. It has tons of features & functionalities that lets you do basically anything with dates.

It was my go-to library for the past 2 years, but it has some limitations: mutability, a complex object-oriented API, bundle size, etc. That’s why I switched to date-fns whose key features struck a chord with me: immutable & pure, modular, ship with Flow & TypeScript types and an incredibly simple API.

Instead of writing something like this:

import moment from 'moment'
const randomBirthday = moment("20171031", "YYYYMMDD").fromNow();

I’ll rather go with:

import distanceToNow from 'date-fns/distance_in_words_to_now'
const randomBirthday = distanceToNow(new Date(2017, 10, 31))

Analytics: Fabric 📊

Tracking users’ interactions is a fundamental need of any app in production. After a little benchmark, I started with Firebase which seemed to be the most convenient solution for analytics with React Native. Unfortunately, at some point I faced some conflicts between Firebase’ config, Google SignIn’s config and our back-end auth system.

As a result, I had to remove Firebase and find another solution, which was: Fabric. After being acquired from Twitter by Google back in January 2017, Fabric evolved a lot to become the great tool we have now.

Our marketing team is really happy with the result of this switch: segmentation has never been that easy to configure and visualize, events and categories are pretty simple to generate & track, and the #1 selling point: weekly reports come with emojis!👌 They are so happy with it they are even talking about “also switching the web app analytics system over Fabric”. 😄

Data: React Data Fetching 🎣

Data fetching. That’s probably the core element of any application. I’ve been doing it in a variety of ways in the past but today, I might have found something I really like.

Keeping the Just Components™ state of mind I’ve been using with React Router Navigation, I’ve built a component that fetches data. I find this way of fetching data so convenient that I extracted this component from our codebase, to open source as a standalone library: react-data-fetcher 🎉

A component-driven way to fetch data in React!

This library will probably get its own Medium post when it’ll hit npm, because that’s something I’ve been thinking about for a long time and it’s worth it. I’m still polishing the final details before publishing it, but here is a little glimpse of what you’ll be able to do… 👀

<Fetch
  path={`${API}/${category}/featuredArticles`}
  params={{
    method: ‘POST’,
    body: {
    language: ‘en’,
     start: 0,
     limit: this.state.limit,
     categoryID,
    },
  }}
  refetch={this.state.isRefreshing}
  onLoading={this._renderLoadingModal}
  onFetch={this._saveData}
  onError={this._renderErrorModal}
/>

EDIT 03/15/2018: I just published it!

Introducing React Data Fetching 🎣

Starter: React Native Simple Kit 🚀

When you start working on a React Native project, your first reflex could be to use tools like Expo or create-react-native-app. They work well with iOS and Android, they’re backed by a great community, and are always up-to-date with React Native.

However, there are some apps like Spotern that need something a bit more complex. And as we saw earlier, I’ve already been using a lot of custom tools. So while working on this app, I felt the need for a handcrafted starter kit that could help me with my future projects. That’s why I’m thrilled to introduce another open source project that comes from my work at Spotern:
react-native-simple-kit 🎉.

Get started with React Native and Redux with no effort!

I’ll let you discover the boilerplate in the README.md but the idea is to have right out of the box, a starter with all the components, helpers, unit tests, project structure, Redux & ESLint configs I need for any React Native app I could possibly be working on. This boilerplate represents pretty well how I usually build my apps now. Let me know what you think about it!

That’s all folks! Spotern is now available on both iOS and Android: dont hesitate to give it a try and give me your feedback! Feel free to contact me here or on Twitter @Charles_Mangwa to share your thoughts about the article and the app. Anyhow I’ll hope you’ll like what you’ll see!

Spotern - Watch It, Get It - Android Apps on Google Play

Spotern - Watch It, Get It on the App Store