Project Setup & Architecture

Initialize React Native/Expo projects with TypeScript, SQLite, Drizzle, Zustand, and Jest.

Updated May 14, 2025
One-click install
npx skills add https://github.com/BabakBar/VibeKeeper --skill project-setup-architecture
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Project Setup & Architecture
Source: https://github.com/BabakBar/VibeKeeper/tree/main/.claude/skills/project-setup
Command: npx skills add https://github.com/BabakBar/VibeKeeper --skill project-setup-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps bootstrap a scalable React Native/Expo project, covering architecture, TypeScript, database, state, testing, linting, and configuration.

Core Features & Use Cases

  • TypeScript setup: tsconfig and strict options for robust typings.
  • Directory structure: Standardized layout for app, features, shared, and db.
  • Database scaffolding: SQLite + Drizzle setup for local data layer.
  • State management: Zustand store pattern for app-wide state.
  • Testing & Linting: Testing setup and code quality tooling.

Quick Start

Steps to bootstrap a new project:

  1. Install dev dependencies for TypeScript and tooling:
    • npm install --save-dev typescript @types/react @types/react-native
  2. Initialize tsconfig:
    • npx tsc --init
  3. Create project structure:
    • mkdir -p src/{app,features,shared,db,theme}
    • mkdir -p src/shared/{components,hooks,utils,types}
  4. Setup database (SQLite + Drizzle):
    • npm install expo-sqlite drizzle-orm drizzle-kit
    • mkdir -p src/db/{schema,migrations}
  5. Setup state management (Zustand):
    • npm install zustand
  6. Add testing and linting:
    • npm install --save-dev jest
    • npm install --save-dev eslint prettier

Frequently Asked Questions about Project Setup & Architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a React Native project with TypeScript, database, and state management?

Set up a React Native/Expo project by installing TypeScript and tooling, initializing tsconfig, creating a standardized directory structure (app, features, shared, db), integrating SQLite with Drizzle for the data layer, adding Zustand for state management, and configuring Jest, ESLint, and Prettier for testing and code quality.

What's the best way to structure a scalable Expo application?

Use a modular directory structure with separate folders for app, features, shared components/hooks/utils/types, database schema and migrations, and theme configuration. This standardized layout supports reproducible builds, feature isolation, and easier team collaboration on React Native/Expo projects.

Can I use SQLite and Drizzle ORM together in an Expo app?

Yes, Expo supports SQLite through expo-sqlite, and you can pair it with Drizzle ORM for type-safe database operations. This combination provides a local data layer suitable for React Native mobile applications with schema versioning through Drizzle migrations.

How do I initialize TypeScript configuration for a React Native project?

Run npx tsc --init to generate a base tsconfig, then apply strict TypeScript options for robust type checking. Install @types/react and @types/react-native as dev dependencies to enable type support across your Expo application.

What testing and linting setup should I include in a new Expo project?

Add Jest for unit and component testing, ESLint for code standards, and Prettier for consistent formatting. Install as dev dependencies and configure alongside your TypeScript setup to enforce code quality and catch errors early in React Native development.

Does this approach work for both new projects and existing Expo applications?

Yes, the infrastructure setup applies to bootstrapping new React Native/Expo projects and can be adapted to initialize development environments or new feature modules within existing applications that need standardized configuration and reproducible builds.