A React Native development beginner tutorial for building a local-first to-do app for iOS, Android, and the Web, based on the tutorial Expo provides here: https://www.youtube.com/watch?v=eNviiODBWFE.
While local-first software may not fit every use case and there are certainly some disadvantages to using it, I'm excited about the potential data privacy and security it can give back to users. I'm a fan of Tim Berners-Lee, the inventor of the World Wide Web, who is a vocal advocate for users having control over their own personal data.
Inspired by this, I'll try to make short step-by-step READMEs and code samples for anyone to follow that show how to develop a local-first React Native to-do app for iOS and Android.
You can read about local-first architecture with Expo here: https://docs.expo.dev/guides/local-first/
- This course is a code tutorial aimed at people who are comfortable with React Native development. For example, developers who have a curiosity about how to create cross-platform apps for iOS, Android, and the local Web but don't necessarily need to have a lot of experience creating React Native apps.
- There are bits of explanations, but I'd like to simply provide instructions, code snippets, and screenshots of our progress throughout the tutorial.
- The lessons are tiny and may take 5-15 minutes to complete. You got this!
- Start with the first folder and go down in order. The lessons build on previous code, so if you jump right to folder 06 and don't know where the
storecame from to be used by theuseCreatePersisterhook, it's because you missed lesson 02. Really, just go in the right order. - Open the README and read the first line, which details the concepts you should be familiar with before reading the code. Google concepts you are not familiar with. The second line states the goals for each lesson. Read them, because they explain why we do what we do. The "why" is as important as the "how".
- Read the rest of the README. It is very concise.
- Try to write the code files by yourself after reading the README.
- Look at the code examples. They are extremely well commented.
- Experiment with them and try to break things. The only way to make sure you understood something is by trying to break it or replicate it with different code.
TL;DR: First read the README in each folder, then the code files.
We'll implement CRUD operations, a local database, and a synchronization feature for our local-first to-do app through these steps:
- Create a client Expo app - DONE!
- Install dependencies - DONE!
- Add TinyBase provider - DONE!
- Define TinyBase database tables and cells - DONE!
- Create a mergeable store - DONE!
- Add items to the store
- Start TinyBase persister
- Display tasks
- Implement sync server
- Create a server project
- Install TinyBase on the server
- Start TinyBase synchronizer
- Create a self-signed certificate for local server
- Test synchronization on local server
We will go through all of these strategic steps in order.
- Big thanks to Expo for getting me curious about local-first development and for sharing the beginner tutorial for it available here: https://www.youtube.com/watch?v=eNviiODBWFE.
- Credit to @cfenollossa for their well-written os-tutorial which helped me write this tutorial.