{"id":29103315,"url":"https://github.com/callstack/super-app-showcase","last_synced_at":"2025-06-28T23:42:02.728Z","repository":{"id":153608173,"uuid":"558325762","full_name":"callstack/super-app-showcase","owner":"callstack","description":"Example of using micro-frontends in a React Native mobile app with Re.Pack to create a Super App.","archived":false,"fork":false,"pushed_at":"2025-06-04T13:54:18.000Z","size":20732,"stargazers_count":498,"open_issues_count":24,"forks_count":106,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-06-04T20:57:08.795Z","etag":null,"topics":["micro-frontends","react-native","rspack","super-app","webpack"],"latest_commit_sha":null,"homepage":"https://www.callstack.com/services/super-app-development","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/callstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-10-27T10:23:40.000Z","updated_at":"2025-06-04T13:54:19.000Z","dependencies_parsed_at":"2023-05-20T14:00:21.690Z","dependency_job_id":"cdcda125-6d2e-46b2-9474-1eb9a572cc58","html_url":"https://github.com/callstack/super-app-showcase","commit_stats":null,"previous_names":[],"tags_count":8,"template":true,"template_full_name":null,"purl":"pkg:github/callstack/super-app-showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fsuper-app-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fsuper-app-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fsuper-app-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fsuper-app-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callstack","download_url":"https://codeload.github.com/callstack/super-app-showcase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fsuper-app-showcase/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262513661,"owners_count":23322665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["micro-frontends","react-native","rspack","super-app","webpack"],"created_at":"2025-06-28T23:41:55.643Z","updated_at":"2025-06-28T23:42:02.717Z","avatar_url":"https://github.com/callstack.png","language":"TypeScript","readme":"\u003ca href=\"https://www.callstack.com/open-source?utm_campaign=generic\u0026utm_source=github\u0026utm_medium=referral\u0026utm_content=super-app-showcase\" align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/4ee05e68-54ca-42b3-994c-9de988d66333\" alt=\"Super App Showcase\" /\u003e\n\u003c/a\u003e\n\u003ch3 align=\"center\"\u003eSuper Apps in React Native with Re.Pack\u003c/h3\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![mit licence][license-badge]][license]\n[![Chat][chat-badge]][chat]\n[![PRs Welcome][prs-welcome-badge]][prs-welcome]\n\n\u003c/div\u003e\n\nBring micro-frontend architecture to your mobile [React Native](https://reactnative.dev) app with [Re.Pack](https://re-pack.dev) and make it a Super App. [Learn more.](https://www.callstack.com/services/super-app-development?utm_campaign=super_apps\u0026utm_source=github\u0026utm_content=super_app_showcase)\n\n## The problem\n\nAs small apps grow, offering multiple services (payments, messaging, social network, gaming, news, etc.), maintaining them becomes challenging. The codebase can become cluttered, and the app size may deter users who only need a few services. Today, teams dealing with such a challenge can either use monorepo to help draw the boundaries between functionalities, or leverage publishing and consuming packages from npm. However, both approaches have their drawbacks. At the same time, web teams have acccess to micro-frontend architecture, which allows them to split the app into smaller, more manageable parts downloadable on demand.\n\n## The solution\n\nThis showcase demonstrates how to achieve a proper micro-frontend architecture for mobile apps with [Module Federation](https://module-federation.io). It simplifies setup and maintenance, allowing independent apps to be deployed separately or as part of a super app. Micro-frontends can be moved to separate repositories, enabling independent team work or external contributions. Unlike classic monorepos, this setup uses runtime dependencies, so updating a micro-frontend automatically updates all apps using it without redeployment.\n\n## The Super App\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eHost App\u003c/td\u003e\n    \u003ctd\u003eMini Apps Interaction\u003c/td\u003e\n    \u003ctd\u003eBooking Standalone App\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"images/host-main-screen.png\" alt=\"host-main-screen\" width=\"200\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"images/host.gif\" alt=\"host\" width=\"200\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"images/booking.gif\" alt=\"booking\" width=\"200\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e  \n\u003c/table\u003e\n\n## Structure\n\n\u003cimg src=\"images/super-app-showcase-scheme.png\" /\u003e\n\nThe super app contains 4 apps:\n\n- `host` - the main app, which is a super app. It contains all the micro-frontends and provides a way to navigate between them.\n- `booking` - micro-frontend for booking service.\n  Booking exposes `UpcomingAppointments` screen and `MainNavigator`. `MainNavigator` is Booking app itself. `UpcomingAppointments` screen is a screen, which is used in the super app in its own navigation.\n- `shopping` - micro-frontend for shopping service.\n  Shopping exposes `MainNavigator`. `MainNavigator` is Shopping app itself.\n- `news` - micro-frontend for news service.\n  News exposes `MainNavigator`. `MainNavigator` is News app itself. News mini app stored in separate repository https://github.com/callstack/news-mini-app-showcase to provide the example of using remote container outside of the monorepo.\n- `dashboard` - micro-frontend for dashboard service.\n  Dashboard exposes `MainNavigator`. `MainNavigator` is Dashboard app itself.\n- `auth` - module that is used by other modules to provide authentication and authorization flow and UI.\n\nEach of the mini apps could be deployed and run as a standalone app.\n\n## How to use\n\n### Requirements\n\n⚠️ **Important:** This project requires:\n\n- Node.js version 22 or higher\n- pnpm as package manager\n\nPlease refer to the official [pnpm installation guide](https://pnpm.io/installation) for detailed setup instructions.\n\nAfter installation, it's recommended to align your pnpm version with the project:\n\n```bash\npnpm self-update\n```\n\n### Setup\n\nInstall dependencies for all apps:\n\n```\npnpm install\n```\n\n#### iOS\n\nIn case automatic pods installation doesn't work when running iOS project, you can install manually:\n\n```\npnpm pods\n```\n\n### Running the Super App\n\nStart DevServer for Host and Mini apps:\n\n```\npnpm start\n```\n\nRun Super App on iOS or Android (ios | android):\n\n```\npnpm run:host:\u003cplatform\u003e\n```\n\n### Running the Mini App as a standalone app\n\n\u003e **💡 NOTE**\n\u003e\n\u003e The \"booking\" and \"shopping\" mini-apps can't be run in standalone mode (i.e. without the host running). This is a deliberate decision of this repository to showcase the possibility and to reduce the amount of work to keep the mini-apps dependencies up-to-date.\n\u003e\n\u003e It's up to you to decide on what kind of developer experience your super app has.\n\nStart DevServer for a Dashboard Mini App as a standalone app:\n\n```\npnpm start:dashboard\n```\n\n### Code Quality Scripts\n\nRun tests for all apps:\n\n```\npnpm test\n```\n\nRun linter for all apps:\n\n```\npnpm lint\n```\n\nRun type check for all apps:\n\n```\npnpm typecheck\n```\n\n## Contributing\n\nRead the [contribution guidelines](/CONTRIBUTING.md) before contributing.\n\n## Made with ❤️ at Callstack\n\nSuper App showcase is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!\n\n\u003c!-- badges --\u003e\n\n[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=super-app-showcase\u0026utm_term=readme-with-love\n[license-badge]: https://img.shields.io/github/license/callstack/super-app-showcase?style=for-the-badge\n[license]: https://github.com/callstack/super-app-showcase/blob/main/LICENSE\n[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge\n[prs-welcome]: ./CONTRIBUTING.md\n[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=for-the-badge\n[chat]: https://discord.gg/Q4yr2rTWYF\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Fsuper-app-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallstack%2Fsuper-app-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Fsuper-app-showcase/lists"}