Bootstrap React Native + Express

A full-stack mobile application boilerplate for rapidly building cross-platform apps with React Native (Expo) and Node.js/Express backend. Features authentication, subscriptions, blockchain integration, and cloud services out of the box.

Overview

This starter template provides a production-ready foundation for building subscription-based mobile applications with:

• Client: React Native mobile app built with Expo SDK 49
• Server: Express.js REST API with MongoDB database
• Authentication: Email/password, Google OAuth, and Solana wallet sign-in
• Payments: Stripe integration with subscription management
• Blockchain: Solana Mobile Wallet Adapter integration
• Cloud Services: AWS S3 (file storage) and SES (email)

Tech Stack

Client (Mobile App)

• Framework: React Native 0.72.10 with Expo SDK 49
• Language: TypeScript
• Blockchain: Solana Web3.js, Solana Mobile Wallet Adapter
• Build Tool: EAS (Expo Application Services)

Server (Backend API)

• Runtime: Node.js 18+
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JWT, Google OAuth, bcrypt
• Payments: Stripe API
• Cloud Storage: AWS S3 (via multer-s3)
• Email: AWS SES
• Scheduling: node-cron

Prerequisites

Before you begin, ensure you have:

• Node.js 18 or higher
• npm or yarn
• MongoDB (local or MongoDB Atlas account)
• Expo CLI: npm install -g expo-cli
• EAS CLI (optional, for builds): npm install -g eas-cli

Required Third-Party Accounts

To use all features, you'll need accounts for:

1. MongoDB Atlas - Database hosting (free tier available)
2. Stripe - Payment processing
3. Google Cloud Console - OAuth authentication
4. AWS - S3 storage and SES email services
5. Expo - Mobile app builds and deployment

Project Structure

bootstrap-react-native/
├── client/                 # React Native mobile app
│   ├── components/         # React components
│   ├── config/            # Environment configuration
│   ├── constants/         # App constants
│   ├── hooks/             # Custom React hooks
│   ├── types/             # TypeScript definitions
│   ├── utils/             # Utility functions
│   ├── android/           # Android native project
│   ├── App.tsx            # Main app component
│   ├── EntryApp.tsx       # Entry point
│   ├── app.json           # Expo configuration
│   └── package.json       # Dependencies
│
└── server/                # Express.js backend
    ├── controllers/       # Request handlers
    ├── db/               # Database connection
    ├── models/           # Mongoose models
    ├── routes/           # API routes
    ├── services/         # Business logic
    ├── utils/            # Utilities
    ├── server.js         # Entry point
    └── package.json      # Dependencies

Quick Start

1. Clone and Install

# Clone the repository
git clone <your-repo-url>
cd bootstrap-react-native

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

2. Server Configuration

cd server

# Copy environment template
cp .env.example .env

# Edit .env with your credentials
nano .env  # or use your preferred editor

Required environment variables:

# Server basics
PORT=5001
NODE_ENV=development
SECRET_KEY=<generate-strong-random-key>

# Database
ATLAS_URI=mongodb+srv://username:password@cluster.mongodb.net/
DB_NAME=bootstrap_app

# Stripe (get from https://dashboard.stripe.com/apikeys)
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Google OAuth (get from https://console.cloud.google.com/)
GOOGLE_CLIENT_ID=...apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=...

# AWS (for S3 and SES)
AWS_ACCESS_KEY_ID=...
AWS_SECRET_ACCESS_KEY=...
S3_ACCESS_KEY=...
S3_ACCESS_SECRET=...
AWS_REGION=us-east-1
AWS_SES_FROM_EMAIL=noreply@yourdomain.com

3. Client Configuration

cd client

# Update server URL in config/environment.ts
# Edit the SERVER_URL for both development and production

Update client/config/environment.ts:

• Production: Replace https://your-app.onrender.com with your deployed server URL
• Development: Replace http://localhost:5001 with your local IP for mobile testing (e.g., http://192.168.1.100:5001)

4. Start Development Servers

Terminal 1 - Server:

cd server
npm run dev  # Starts on port 5001 with nodemon

Terminal 2 - Client:

cd client
npx expo start

Scan the QR code with:

• iOS: Camera app or Expo Go
• Android: Expo Go app

Database Setup

MongoDB Atlas (Recommended)

1. Create account at https://cloud.mongodb.com/
2. Create a new cluster (free tier available)
3. Create database user with password
4. Whitelist your IP address (or use 0.0.0.0/0 for development)
5. Get connection string and add to ATLAS_URI in .env

Local MongoDB (Alternative)

# Install MongoDB locally
# macOS:
brew tap mongodb/brew
brew install mongodb-community

# Start MongoDB
brew services start mongodb-community

# Update .env
ATLAS_URI=mongodb://localhost:27017/

Third-Party Service Setup

Stripe Configuration

1. Sign up at https://stripe.com/
2. Get API keys from Dashboard → Developers → API keys
3. Add STRIPE_SECRET_KEY to .env
4. Set up webhook endpoint:
   • URL: https://your-server.com/api/stripe/webhook
   • Events: customer.subscription.created, customer.subscription.updated, customer.subscription.deleted, invoice.payment_succeeded
5. Add webhook secret to STRIPE_WEBHOOK_SECRET

Google OAuth

1. Go to https://console.cloud.google.com/
2. Create new project
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URIs
6. Add credentials to .env

AWS Services

S3 (File Storage):

1. Create S3 bucket
2. Create IAM user with S3 permissions
3. Add access keys to .env

SES (Email):

1. Verify email address or domain in SES
2. Request production access (starts in sandbox)
3. Use same IAM credentials

Expo Configuration

Update App Identity

Edit client/app.json:

{
  "expo": {
    "name": "Your App Name",
    "slug": "your-app-slug",
    "owner": "your-expo-username",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

EAS Build Setup

# Login to Expo
npx eas login

# Configure EAS
npx eas build:configure

# Build for development
npx eas build --profile development --platform android

For detailed Android build instructions, see client/BUILD.md.

API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - Email/password login
• POST /api/auth/google - Google OAuth login
• POST /api/auth/solana - Solana wallet authentication
• POST /api/auth/verify-email - Verify email address
• POST /api/auth/forgot-password - Request password reset
• POST /api/auth/reset-password - Reset password with token

Subscriptions

• GET /api/subscriptions - List subscription plans
• POST /api/subscriptions - Create subscription
• GET /api/subscriptions/user/:userId - Get user subscription
• PUT /api/subscriptions/:id - Update subscription
• DELETE /api/subscriptions/:id - Cancel subscription

User

• GET /api/user/:id - Get user profile
• PUT /api/user/:id - Update user profile
• GET /api/user/:id/transactions - Get token transactions

Webhooks

• POST /api/stripe/webhook - Stripe webhook handler

Development

Run Tests

# Server tests (add your test framework)
cd server
npm test

# Client tests
cd client
npm test

Code Linting

# Client linting
cd client
npm run lint

Environment Variables

Never commit .env files or secrets to git. Use:

• server/.env.example as template
• client/config/environment.example.ts as template

Production Deployment

Server Deployment (Render, Railway, Heroku)

1. Set all environment variables in hosting dashboard
2. Ensure NODE_ENV=production
3. Set up MongoDB Atlas connection
4. Configure Stripe webhook with production URL
5. Deploy from GitHub repository

Client Deployment (EAS)

cd client

# Build for production
npx eas build --platform android --profile production
npx eas build --platform ios --profile production

# Submit to stores
npx eas submit --platform android
npx eas submit --platform ios

Security Best Practices

1. Never commit secrets - Use .env files and .gitignore
2. Use strong JWT secrets - Generate with openssl rand -base64 32
3. Enable HTTPS - Always use SSL in production
4. Validate input - Sanitize all user inputs
5. Rate limiting - Implement API rate limits
6. Keep dependencies updated - Run npm audit regularly
7. Environment separation - Use different keys for dev/prod

Common Issues

Mobile app can't connect to server

• Use your computer's local IP address, not localhost
• Ensure both devices are on same network
• Check firewall settings

Stripe webhook failing

• Verify webhook URL is publicly accessible
• Check webhook secret matches .env
• Review Stripe dashboard logs

MongoDB connection timeout

• Whitelist IP address in MongoDB Atlas
• Check connection string format
• Verify network connectivity

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

License

MIT License - see LICENSE file for details

Support

For issues and questions:

• Open an issue on GitHub
• Check existing documentation
• Review the CLAUDE.md file for development guidance

---

Built with React Native, Express, and modern cloud services. Start building your app today!