← ClaudeAtlas

project-setup-architecturelisted

Set up project infrastructure including TypeScript, database, state management, navigation, and testing. Use when initializing new features or configuring development environment.
aiskillstore/marketplace · ★ 329 · Testing & QA · score 82
Install: claude install-skill aiskillstore/marketplace
# Project Setup & Architecture Guide for setting up React Native/Expo project infrastructure. ## When to Use - Initializing TypeScript configuration - Setting up database layer - Configuring state management - Installing and configuring testing - Creating directory structure - Adding linting and formatting ## Setup Workflows ### TypeScript Setup ```bash # Install TypeScript npm install --save-dev typescript @types/react @types/react-native # Create tsconfig.json npx tsc --init ``` ```json { "extends": "expo/tsconfig.base", "compilerOptions": { "strict": true, "skipLibCheck": true, "jsx": "react-native" } } ``` ### Directory Structure ```bash # Create feature-sliced architecture mkdir -p src/{app,features,shared,db,theme} mkdir -p src/shared/{components,hooks,utils,types} ``` ### Database Setup (SQLite + Drizzle) ```bash # Install dependencies npx expo install expo-sqlite npm install drizzle-orm npm install --save-dev drizzle-kit # Create structure mkdir -p src/db/{schema,migrations} ``` ```typescript // src/db/client.ts import * as SQLite from 'expo-sqlite'; import { drizzle } from 'drizzle-orm/expo-sqlite'; const db = SQLite.openDatabaseSync('app.db'); export const drizzle = drizzle(db); ``` ### State Management (Zustand) ```bash npm install zustand ``` ```typescript // src/shared/stores/useAppStore.ts import { create } from 'zustand'; interface AppState { count: number; increment: () => void; } export const useAppStore = create<AppS