Best Tooling & Project Structure for Mobile Super Apps in React Native

This is the first video in a series of informative and practical tutorials that will make the knowledge and practices of developing Warehouse Management System (WMS), Supply Chain Management (SCM), and Manufacturing Execution Systems (MES) more accessible to developers around the world.

In this video, we will explore the journey of creating a Super App in React Native at MPI. As developers of enterprise software, we faced the challenge of maintaining a feature-rich app that became slow, bulky, and difficult for users to navigate. We had two options: create separate apps for each domain or build a single Super App that could handle multiple domains with access control.

We chose the Super App route and have not looked back. In this video, we will cover the following topics:

Understanding what a Super App is
Exploring the project structure
Discussing our choice of libraries and the motivation behind them
Examining the tooling we used
Providing bonus tips to enhance your Super App development experience

Join us as we dive into the world of React Native Super Apps and discover the best tooling and project structure for building powerful apps in React Native.

00:00:00 Who we are + the pain
00:00:53 TLDR: what to expect
00:01:34 What is a SuperApp?
00:02:11 Why a SuperApp?
00:06:55 Monorepo: Structure
00:07:24 Monorepo: Tooling
00:08:05 Monorepo: Publishable libraries
00:08:59 Monorepo: Non-Publishable components
00:09:32 Monorepo: Apps
00:09:44 Libraries We Use
00:10:37 Sharing Code
00:11:54 Icons
00:13:22 ReStyle
00:15:26 Abstract App Core
00:17:43 Jotai
00:20:07 Lingui for i18n
00:21:12 Storybook switching
00:23:26 MiniApp: Registration
00:26:12 MiniApp: Permissions
00:29:26 MiniApp: Sturcture
00:32:16 MiniApp: Locales
00:33:18 MiniApp: Machines
00:36:51 MiniApp: Navigation
00:38:54 MiniApp: Organizing screens
00:43:51 MiniApp: Sdk
00:46:17 Jotai Atoms
00:47:11 Coaching Time: Dev Value & Cutting Costs
00:55:07 Bonus#1: MiniApp Generator
01:04:43 Bonus#1: Generating Screens
01:10:17 Bonus#1: MiniApp Generator implementation
01:19:35 Bonus#2: Local Global Imports
01:24:37 Announcing Future Leaks

#tutorial #howto #reactnative