What we’re making

A single-page web/iOS/Android app that lets users signup/login/logout, ‘buy pineapples’, and view their previous transactions.

Here are images of the end product:

If you’d like to go through the React Native code from the get-go, here’s an associated repo that followed the instructions of this tutorial.

<aside> 💡 When going though this tutorial, make sure to go through from the top down (as you normally would). Skipping around might get you into some time-consuming errors.

</aside>

Sections (in order):

Tools

Setup

Code

Optionally, you could also take this an extra step, which is creating an iOS/Android build for deployment into the App Store and Google Play Store. For that, I suggest you follow the instructions here for setting up EAS Build, and making your first build. Also, if you’re deploying, you should checkout the “Firebase Launch Checklist”. Remember that anything that you store on the frontend can be viewed, including any .env keys. Whitelisting domains (i.e. making those keys only accept requests from certain domains; your website and apps) could be a good option for combating security risks. You’ll see more details about this in the links mentioned in this paragraph.

If you have any questions or face any issues, feel free to open them up in the associated repo, and label them with the ‘tutorial’ issue label.