This document outlines the estimation plan for implementing a Turborepo-based project to build a mobile and web application. The practice focuses on understanding and applying monorepo architecture using Turborepo while leveraging Expo for mobile development. It aims to enhance workflow efficiency, optimize build processes, and ensure seamless project scalability through structured configurations and best practices.
- Estimated duration: ~12 days (2025/02/21 - 2025/03/10)
- Actual duration: 14 days
- Ensure compatibility with modern build tools.
- Gain a deep understanding of monorepo best practices.
- Explore and apply new Expo features.
- Deliver a production-ready mobile and web application.
- React.js(v18.3.1): React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript.
- Turborepo(v2.4.2): Turborepo is a high-performance build system for JavaScript and TypeScript codebases. It is designed for scaling monorepos and also makes workflows in single-package workspaces faster, too.
- React Native(v0.76.7): React Native brings the best parts of developing with React to native development. It's a best-in-class JavaScript library for building user interfaces.
- Expo(v52.0.37): Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
- Next.js(v14.0.4): Built on a foundation of fast, production-grade tooling. Powered By. React The library for web and native user interfaces.
- Turbopack: Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of webpack and Next.js at Vercel.
- Typescript(v5.5.4): TypeScript extends JavaScript by adding types to the language.
- Zustand: A small, fast and scalable bearbones state-management solution using simplified flux principles.
- ESLint(v8.56.0): The pluggable linting utility for JavaScript and JSX.
- Android Studio: Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps.
- Analyze requirements and align on deliverables.
- Define and document the estimation plan.
- Develop mobile and web applications using the technical stack.
- Leverage new Expo features and Turbopack for performance optimization.
- Monitor performance using EAS Insights and LogRocket.
- Deploy applications using Vercel, GitHub Actions, and Expo tools.
[Figma]
Before you begin, ensure you have the following installed:
- Node.js >= 18
- pnpm v9.15.5 or higher (npm install -g pnpm@9.15.5)
- Expo CLI (npm install -g expo-cli)
- Android Studio (for Android development)
- Xcode (for iOS development, Mac only)
- Clone the repository:
git clone git@github.com:vawn-t/c-store-apps.git
cd grocery-app- Install dependencies:
pnpm installRunning the Applications Run all applications (web and native):
pnpm devRun only the web application:
pnpm dev:webRun only the native application:
pnpm dev:mobileFor the native app, Expo will start and provide you with QR codes to run the app on your physical device using the Expo Go app, or options to run on simulators.
Building the Applications Build all applications:
pnpm buildBuild only the native app locally:
pnpm build:localRun all tests:
pnpm testRun tests in watch mode (for development):
pnpm test:watchFormat code:
pnpm formatLint code:
pnpm lintCheck TypeScript types:
pnpm check-typesClean build artifacts and node_modules:
pnpm cleanUse these credentials to test different user roles in the application:
| Role | Username | Password |
|---|---|---|
| Admin | admin@example.com | password123 |
| Customer | user@example.com | password123 |
This Turborepo includes the following packages/apps:
native: a react-native app built with expoweb: a Next.js app built with react-native-web@repo/ui: a stub react-native component library shared by bothwebandnativeapplications@repo/constants: Shared constants including API endpoints, theme values, error messages, and route definitions used across all applications@repo/hooks: Custom React hooks for data fetching, authentication, form handling, and other reusable logic shared between web and mobile apps@repo/models: TypeScript interfaces and type definitions for data models, ensuring consistent data structures across the entire monorepo@repo/stores: Global state management using Zustand stores for user authentication, cart management, and application preferences@repo/utils: Helper functions for common tasks like date formatting, validation, secure storage, and platform-specific utilities@repo/typescript-config:tsconfig.jsons used throughout the monorepo@repo/eslint-config:eslint.config.mjss used throughout the monorepo
The applications can be deployed using:
- Web: Vercel (see Next.js deployment documentation)
- Native: Expo Application Services (EAS)