02 Apr 2021
The goal of this journal is to highlight my process and challenges to construct a production ready, monorepo web/mobile platform, using React and React Native.
This is also meant to be a learning exercise for integrating and configuring many related popular libraries. I will be highlighting the steps to configure my preferred tools throughout this tutorial. However feel free to swap out any piece of technology as it suits your needs. I will provide links to the articles I’ve found useful as we go through.
In a brief breakdown, let’s review what we will be using.
core of our project
React - for our web application
React Native - for our iOS and Android mobile applications
Webpack - the bundler of our choice
Metro - the bundler without a choice
Babel and Typescript - for transpiling and type checking
ESlint and Prettier - for linting and formatting
Jest, Detox and Enzyme - for testing
client end choices
Redux via Redux Toolkit - for state management
React Router - for navigating this mess
Styled Components - for fancy shmancy components
Material UI - for boring components
Formik and Yup - for forms and their validation
Mapbox - for map and location interactions
I18n-js - for internationalization and dictionary locales
infrastructure choices
AWS Amplify - for authentication (swap with Auth provider of your choice)
GraphQL - for our queries (swap with DB of your choice)
Apollo - for caching query data (also to sync user input in lack of connectivity)
Bitbucket - for source code management
CircleCI - for continuous integration pipeline
Docker and AWS - for deploymentMixpanel - for analytics
Optimizely - for A/B testing
Segment - for metrics integration
To keep things tidy we will be using a branching workflow with frequent commits. Maintaining and growing our test suite will be a priority. As in agile best practices, we will limit our work in progress to a single task, and adhere to a strict definition of done so we don’t need to backtrack.
Our “Definition of Done” checklist
prepare tests (unit/integration/e2e)
prototype the featuredeploy for review
write release notes
refactor & push to production
It’s already a nauseating list, we have some work to do.
So let’s get to it.