ShipFullStack
A modern TypeScript stack that combines React, TanStack Start, Hono, ORPC, Expo, and more.
Install / Use
/learn @sunshineLixun/ShipFullStackREADME
ShipFullStack
A modern TypeScript stack that combines React, TanStack Start, Hono, ORPC, Expo and more.
Features
- TypeScript - For type safety and improved developer experience
- TanStack Start - SSR framework with TanStack Router
- React Native - Build mobile apps using React
- Expo - Tools for React Native development
- TailwindCSS - Utility-first CSS for rapid UI development
- shadcn/ui - Reusable UI components
- Hono - Lightweight, performant server framework
- oRPC - End-to-end type-safe APIs with OpenAPI integration
- Node.js - Runtime environment
- Drizzle - TypeScript-first ORM
- PostgreSQL - Database engine
- Authentication - Better-Auth
- Husky - Git hooks for code quality
- Turborepo - Optimized monorepo build system
Getting Started
First, install the dependencies:
pnpm install
Database Setup
This project uses PostgreSQL with Drizzle ORM.
-
Make sure you have a PostgreSQL database set up.
-
Update your
apps/server/.envfile with your PostgreSQL connection details. -
Apply the schema to your database:
pnpm db:push
Then, run the development server:
pnpm dev
Open http://localhost:3001 in your browser to see the web application. Use the Expo Go app to run the mobile application. The API is running at http://localhost:3000.
Project Structure
ShipFullStack/
├── apps/
│ ├── web/ # Frontend application (React + TanStack Start)
│ ├── native/ # Mobile application (React Native, Expo)
│ └── server/ # Backend API (Hono, ORPC)
Available Scripts
pnpm dev: Start all applications in development modepnpm build: Build all applicationspnpm dev:web: Start only the web applicationpnpm dev:server: Start only the serverpnpm check-types: Check TypeScript types across all appspnpm dev:native: Start the React Native/Expo development serverpnpm db:push: Push schema changes to databasepnpm db:studio: Open database studio UI
🚀 Deployment
This project supports automatic deployment via GitHub Actions. Simply push to the main branch and your apps will be automatically deployed to Cloudflare!
Quick Setup
-
Configure Cloudflare Secrets in GitHub:
CLOUDFLARE_API_TOKENCLOUDFLARE_ACCOUNT_ID
-
Push to deploy:
git add . git commit -m "feat: your changes" git push origin main
That's it! Your changes will be automatically deployed. 🎉
Features
- ✅ Smart deployment: Only deploys apps with actual changes
- ✅ PR preview: Automatic build checks on pull requests
- ✅ Manual trigger: Deploy anytime from GitHub Actions
- ✅ Deployment summary: Clear status for each deployment
Documentation
Manual Deployment (Alternative)
If you prefer manual deployment:
# Deploy all applications
pnpm run deploy
# Deploy only web app
pnpm run deploy:web
# Deploy only server app
pnpm run deploy:server
Join Discord
https://discord.gg/KZ6uwbHZG4
Related Skills
node-connect
339.3kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
83.9kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
339.3kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
83.9kCommit, push, and open a PR
