Features

Plants

Store your collection of plants in Urban Jungle, along with care instructions, photos and, of course, their names.

Plant identification

Got a new plant? Snap a picture of it and Urban Jungle will fill in the rest using snazzy image recognition.

Reminders

Save reminders for your care instructions. Urban Jungle will ping you when you need to care for your plants.

Sharing

Make a household and invite others to care for your plants too. Sharing is caring.

Password-less login

Hate passwords? Me too. Urban Jungle lets you sign in using your phone number (or e-mail address & password if you'd rather).

Dark mode

Because, why not?

Stack

TypeScript

Front-end

Expo / React Native

Auth

Firebase auth

Databse

Firebase cloud firestore

Storage

Firebase storage

Push notifications

Expo push service

State management

Global state management is managed using Stately, a state management library I wrote to provide simple fully-typesafe state management for React.

Form state management

Forms are managed using a custom hook specific for this library. You can read all about it if you want.

Styling

Styled components

Sign up flow

The path through the sign up flow is managed by Machi, a state machine library I wrote to manage complex data-driven flows through UI. It's perfect for sign-up / onboarding journeys like Urban Jungles.

A graphical representation of the sign up flow can be generated by running:

yarn generate-sign-up-flow-chart

Which outputs:

Manage auth flow

Urban Jungle has support for adding / removing and changing multiple auth providers (phone and email). To support these complex flows, Machi is used.

A graphical representation of the manage auth flow can be generated by running:

yarn "generate-manage-auth-flow-chart

Which outputs: