There's a lot to learn and its easy to fall down a few different rabbit holes. What I recommend is starting with a simple app that mimics the core 80% of functionality found in most apps and then expanding from there. This way you get to learn as you go but all the while have the basis for something that can actually be deployed (vs feeling just like a toy to start all over again from.)
We're going to build an app that will enable people to find or become remote coaches to others. This is a classic two-sided market app, where the value is in connecting two people together based on specific criteria.
- As a Coach, I can make a sharable profile that advertises my interests
- As a User, I can connect with a Coach based on a specific interest that I have
- As a User, I can request a meeting with a specific Coach
- As a Coach, I can accept a User's request
- As a Coach, I can easily communicate a communication channel to the User
- As a Coach, I can reject a User's request
- Users and Coaches will interact via a native app that is a thin client to access data that is held in services on a centralized backend.
- Utilize as many pre-existing tools and services as possible to keep the product as narrowly focused as possible.
- The app will be written with React Native
- The backend will be hosted and deployed on AWS
Checkout React Native Express as a quick primer on the basics of modern Javascript and React Native. Sections 1-4 is a solid set of scaffolding, but it is sparse, so make sure you use other resources to dig in deeper.
Additionally, we'll be using TypeScript as an additional layer on top of Node. While there's a lot of bells and whistles here, we're really going to use it mainly for keeping track of what objects are getting thrown around and linting purposes. Check out the TypeScript in 5 minutes tutorial.
I strongly recommend setting up nodenv as a way to isolate and control exactly what version of Node and other libraries you're using. This is not required, but definitely can help.
Finally, what editor to use? The current standard editor for these types of things is Visual Studio Code. Its a pretty solid editor that will provide a lot of the niceties of a full IDE while remaining pretty light. After installing it, there's a few decent extensions that are worth checking out (and installing):
Follow Setting up the development environment from React Native to get your machine setup with local development. Since we're not looking to use any custom or native libraries directly, the Expo CLI Quickstart should be a fine start.
When setting up the app with Expo for the first time, choose the blank (TypeScript) option.
❯ expo init CoachMe
? Choose a template:
----- Managed workflow -----
blank a minimal app as clean as an empty canvas
❯ blank (TypeScript) same as blank but with TypeScript configuration
tabs several example screens and tabs using react-navigation
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
minimal (TypeScript) same as minimal but with TypeScript configuration
Checkpoint
- After your first app is setup, you should be able to run the app in the iOS or Android simulator as well as on a live device. If you're not able to see the hello world app, then you should pause and diagnose what's up.
React Native comes with a pretty barebones UI toolkit, which at first is fine, but can be a lot of work to later incorporate for future styling (branding, etc...). Checkout UI Kitten which is a nice component library based on the Eva Design System. Essentially, this makes it really nice to play with designers or even by yourself in Sketch to mock up and wireframe UIs so that you can paper prototype before writing any code.
Follow the Manual Installation tutorial to get the basics for UI Kitten installed. You can go with the fully automated version, but this is a good logical fragmentation point to understand what react native.
Checkpoint
- You should see just following the tutorial a more stylized home in your simulator.
- You should also see some linting issues in VS Code. See how you can fix the TypeScript warnings.
React Native is designed to run as an app. If you're just building a single screen app, then you might not need navigation, however it is very likely you'll need some navigation (i.e. Login Screen, Home Screen, Details Screen, Search Screen, etc...).
We'll be using React Navigation to help manage navigation within our app.
Follow the Installing dependencies into an Expo managed project and the Hello React Navigation tutorials.
Checkpoint
- Verify that your app is working and was updated.
Run though the Icon Packages tutorial with UI Kitten to get the proper Icon pages installed. @ui-kitten/eva-icons and react-native-svg separately as per the note about using Expo. If you find the app is loading but the icons aren't showing up, this discussion may help
Now run though the Configure Navigation tutorial.
Checkpoint
- You should be able to navigate between the Home screen and Details screen.
- Like in the first tutorial, you'll have some TypeScript linting warnings. See how you can solve them. (Hint: You may need to check out the React Navigation API.)
We'll mock out the authentication flow. This won't actually call a real service yet, but we want to get the plumbing together.
This flow is centralized around React's state management called Hooks. In the past, this was managed via 3rd party frameworks (i.e. Redux). While it still may make sense in some cases to be done this way, Hooks do what we want and are worth using here. If you've never worked with Hooks or something similar before, check out the Hooks at a Glance guide put together by the React team.
Once you've become familuar with the general concept, or better yet did a small spike into them, it is time to check out the Auth Flow tutorial from React Navigation.
Checkpoint
- Run though the tutorial
- Intergrate it into the app written overall