🚀 Boilerplate 2026

A modern, production-ready monorepo boilerplate featuring Next.js, Expo, and Convex. Start building full-stack applications with web and mobile support in minutes.

✨ Features

🎯 Full-Stack Ready - Next.js web app + Expo mobile app + Convex backend
🎨 Shared Design System - Unified theme and components across web and mobile
⚡ Type-Safe - End-to-end TypeScript with shared types
🔥 Modern Stack - React 19, Next.js 16, Expo Router, Tailwind CSS
📦 Monorepo - pnpm workspaces for efficient dependency management
🎭 UI Components - Pre-built shadcn/ui components for web
📱 Native Components - Custom native components for mobile
🚀 Zero Config - Pre-configured with best practices
🔐 Production Ready - ESLint, TypeScript, and optimized builds

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.0 or higher (Download)
pnpm 8.0 or higher (Install guide)
Git (Download)

For mobile development:

Expo CLI (optional, included in dependencies)
iOS Simulator (macOS only) or Android Studio (for Android)

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/yourusername/boilerplate-2026.git
cd boilerplate-2026

2. Install Dependencies

pnpm install

3. Set Up Environment Variables

Copy the example environment file and fill in your values:

cp .env.example .env.local

Edit .env.local and add your configuration:

# Convex
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=

# Add your other environment variables here

4. Set Up Convex

If you're using Convex, initialize it:

pnpm exec convex dev

Follow the prompts to create a new Convex project or link to an existing one.

5. Start Development

Choose one of the following options:

Option A: Run Everything

pnpm dev:all

This starts the website, mobile app, and Convex backend simultaneously.

Option B: Run Website Only

pnpm dev:website

Starts the Next.js website and Convex backend.

Option C: Run Mobile (iOS)

pnpm dev:mobile:ios

Starts the Expo mobile app (iOS) and Convex backend.

Option D: Run Mobile (Android)

pnpm dev:mobile:android

Starts the Expo mobile app (Android) and Convex backend.

📱 Mobile Development

Running on iOS Simulator (macOS)

From the root directory:

pnpm dev:mobile:ios

This starts the mobile app (iOS) and Convex backend together.

To run only the mobile app without Convex:

pnpm dev:mobile-only:ios

Running on Android Emulator

From the root directory:

pnpm dev:mobile:android

This starts the mobile app (Android) and Convex backend together.

To run only the mobile app without Convex:

pnpm dev:mobile-only:android

Running on Physical Device

Install the Expo Go app on your device

Start the development server from the root:

pnpm dev:mobile-only:ios
# or
pnpm dev:mobile-only:android

Scan the QR code with Expo Go (iOS) or the Expo app (Android)

Alternatively, you can run from the mobile directory:

cd mobile
pnpm start

Running Mobile Web Version

From the mobile directory:

cd mobile
pnpm web

🌐 Web Development

The website runs on http://lvh.me:3000 by default.

Development: http://lvh.me:3000
Hot Reload: Enabled with Turbopack
TypeScript: Full type checking

🏗️ Project Structure

boilerplate-2026/
├── website/          # Next.js web application
├── mobile/           # Expo React Native application
├── shared/           # Shared code, types, and constants
├── convex/           # Convex backend functions
└── package.json      # Root workspace configuration

📦 Available Scripts

Root Level

Command	Description
`pnpm dev:all`	Start website, mobile, and Convex
`pnpm dev:website`	Start website and Convex
`pnpm dev:website-only`	Start only website
`pnpm dev:mobile:ios`	Start mobile (iOS) and Convex
`pnpm dev:mobile:android`	Start mobile (Android) and Convex
`pnpm dev:mobile-only:ios`	Start only mobile (iOS)
`pnpm dev:mobile-only:android`	Start only mobile (Android)
`pnpm dev:convex`	Start only Convex
`pnpm build`	Build website for production

Website (`website/`)

Command	Description
`pnpm dev`	Start development server
`pnpm build`	Build for production
`pnpm start`	Start production server
`pnpm lint`	Run ESLint

Mobile (`mobile/`)

Command	Description
`pnpm start`	Start Expo development server
`pnpm ios`	Run on iOS simulator
`pnpm android`	Run on Android emulator
`pnpm web`	Run web version
`pnpm lint`	Run ESLint

🎨 Styling

Web (Next.js)

Uses Tailwind CSS with a shared theme system. Colors and design tokens are defined in shared/constants/theme/.

Mobile (Expo)

Uses Uniwind (Tailwind for React Native) with the same shared theme system for consistency across platforms.

🔧 Configuration

TypeScript

Each package has its own tsconfig.json that extends the root configuration. The shared package is configured to be imported across workspaces.

ESLint

Website: Next.js ESLint config
Mobile: Expo ESLint config
Root: Shared rules

Environment Variables

.env.example - Template for environment variables
.env.local - Local development variables (not committed)

🚢 Deployment

Website (Vercel)

Push your code to GitHub
Import your repository in Vercel
Set the root directory to website
Add environment variables in Vercel dashboard
Deploy!

Mobile (EAS Build)

Install EAS CLI:
```
npm install -g eas-cli
```
Configure your project:
```
cd mobile
eas build:configure
```

Build for production:

eas build --platform ios
eas build --platform android

Submit to app stores:

eas submit --platform ios
eas submit --platform android

Convex

Convex automatically deploys when you push to your main branch. Configure deployment in your Convex dashboard.

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📚 Learn More

🐛 Troubleshooting

Port Already in Use

If port 3000 is already in use, you can change it in website/package.json:

"dev": "next dev --turbopack --hostname lvh.me --port 3001"

Metro Bundler Issues

Clear Metro cache:

cd mobile
pnpm start -- --reset-cache

Convex Connection Issues

Make sure your .env.local has the correct NEXT_PUBLIC_CONVEX_URL and that Convex is running.

pnpm Issues

If you encounter dependency issues:

rm -rf node_modules
rm pnpm-lock.yaml
pnpm install

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

shadcn/ui for the amazing component library
Expo for the incredible mobile development experience
Convex for the powerful backend platform
Vercel for Next.js and hosting

⭐ Show Your Support

If this project helped you, please give it a ⭐ on GitHub!

Built with ❤️ using Next.js, Expo, and Convex

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.claude		.claude
.cursor		.cursor
apps		apps
convex/_generated		convex/_generated
packages		packages
services/convex		services/convex
.cursorignore		.cursorignore
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
helper-cmd-lines.md		helper-cmd-lines.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
turbo.json		turbo.json

tyler6204/Boilerplate2026

Folders and files

Latest commit

History

Repository files navigation