Pinner

6th Sep 2019 - 14th Dec 2019

3 MONTHS

About This Project

Pinner started on the web, but I knew few travelers would open a laptop to find someone nearby — this had to live on a phone. So I extended it into a mobile app, using React Native to render for both Android and iOS, with Django, Graphene, and Firebase powering the live chat. The app records the cities you've been to and recommends travelers who have visited the same ones.

Technical Sheet

    Django

    Graphene

    React-Native

    Apollo

    Firebase

    TypeScript

    Styled-Components

    Sentry

    GoogleMapAPI

    Heroku

Alts

An old habit from architecture: never commit to the first design. I drew up several alternatives and compared them until the UI felt balanced — always with an eye on performance, because the faster a task feels, the happier the user.

Autocomplete City Name

You can't fit every city in the world into your own database — and outside the Google Place API, no library even attempts to autocomplete city names. So I built my search on top of it.

Create City Model

When a user selects a city that isn't in the database yet, the server builds it on the spot: a photo from the Unsplash API, nearby cities via RawSQL, a unique ID from the Google Place API — and a Slack notification to tell me a new city was just born.

#EDEDED

#E2E2E2

#318CEE

#1E1E1E

#161616

Long Term Gains

I gave myself two constraints: write everything in a functional style with React Hooks, and finish in under three months. Data fetching was the easy part, since most queries mirrored Pinner-Web — and comparing functional components against class components (where Hooks can't live) settled that debate for me. Push notifications in React Native, though, humbled me — that's where I still need practice.