A comprehensive React Native mobile application for tabletop RPG players and dungeon masters, featuring AI-enhanced character creation, campaign management, and content library functionality.
- Multi-step character creation with guided wizard interface
- AI-powered character generation for names, backstories, and stat suggestions
- D&D 5e compatible races, classes, and ability scores
- Automatic calculations for HP, AC, and modifiers
- Exportable character sheets (coming soon)
- Full CRUD operations with local storage
- Rich note-taking with tagging system (Location, NPC, Quest, etc.)
- AI quest generator with customizable parameters
- Campaign timeline and session tracking (coming soon)
- Advanced search and filtering by tags and content
- Campaign management with multiple campaign support
- Upload custom content (spells, items, NPCs, monsters)
- AI balance analysis with detailed feedback and suggestions
- Content categorization and search functionality
- Community-style content management
- Power level assessment and balance scoring
- Node.js (v18 or higher recommended)
- npm or yarn
- Expo CLI (
npm install -g @expo/cli) - MongoDB (for backend - local installation or cloud instance)
- Android Studio (for Android development) or Xcode (for iOS - macOS only)
# Navigate to project root
cd MistyStep
# Install dependencies
npm install
# Start Expo development server
npx expo start
# Or run on specific platforms
npx expo start --android # Android device/emulator
npx expo start --ios # iOS simulator (macOS only)
npx expo start --web # Web browser
# Alternative: Use the npm scripts
npm start # Opens Expo DevTools with QR code
npm run android # Launches on Android
npm run ios # Launches on iOS (macOS only)
npm run web # Launches in web browser- Install Expo Go on your mobile device:
- Scan QR code displayed in terminal after running
npx expo start - Connect to same WiFi network as your development machine
# Navigate to backend directory
cd backend
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env
# Edit .env file with your configuration
# Start MongoDB service on your system
# Run development server
npm run dev
# Or production server
npm startMistyStep/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── common/ # Generic components
│ │ ├── forms/ # Form-specific components
│ │ └── lists/ # List components
│ ├── screens/ # App screens
│ │ ├── CharacterCreation/
│ │ │ ├── CharacterListScreen.js
│ │ │ ├── CharacterWizardScreen.js
│ │ │ └── CharacterDetailScreen.js
│ │ ├── CampaignNotebook/
│ │ │ ├── CampaignListScreen.js
│ │ │ ├── NotebookScreen.js
│ │ │ ├── NoteDetailScreen.js
│ │ │ ├── TimelineScreen.js
│ │ │ └── QuestGeneratorScreen.js
│ │ └── ContentLibrary/
│ │ ├── ContentLibraryScreen.js
│ │ ├── ContentDetailScreen.js
│ │ ├── ContentUploadScreen.js
│ │ └── AIBalanceScreen.js
│ ├── services/ # API services
│ ├── store/ # Zustand state management
│ ├── types/ # Type definitions and constants
│ └── utils/ # Utility functions
├── backend/ # Express.js backend
│ ├── models/ # MongoDB models
│ ├── routes/ # API routes
│ ├── middleware/ # Custom middleware
│ ├── services/ # Business logic
│ └── config/ # Configuration files
└── assets/ # Images, icons, fonts
- React Native with Expo
- React Navigation 6 for navigation
- React Native Paper for Material Design components
- Zustand for state management
- React Hook Form with Yup validation
- Expo Vector Icons for iconography
- AsyncStorage for local data persistence
- Express.js REST API
- MongoDB with Mongoose ODM
- JWT authentication (ready for implementation)
- Helmet for security headers
- Morgan for logging
- CORS for cross-origin requests
- Rate limiting middleware
- OpenAI API integration structure
- Placeholder AI services for:
- Character generation
- Quest creation
- Content balance analysis
- Basic Info - Name and AI generation option
- Race & Class - Interactive chip selection
- Ability Scores - Manual input or dice rolling
- Background - Backstory and additional notes
- Campaign Selection - Multiple campaign support
- Note Organization - Tag-based filtering system
- Search Functionality - Full-text search across notes
- AI Assistance - Quest generation with customizable parameters
- Content Upload - Simple form-based upload
- Categorization - Type-based organization
- AI Analysis - Balance checking with detailed feedback
- Search & Filter - Advanced filtering by type and content
# Backend configuration
PORT=3000
MONGODB_URI=mongodb://localhost:27017/mistystep
JWT_SECRET=your-secret-key
OPENAI_API_KEY=your-openai-key- Modify
src/types/index.jsfor custom races, classes, and content types - Update theme colors in
App.js - Extend AI functionality in
backend/routes/ai.js
npm startornpx expo start- Start Expo development server with QR codenpm run androidornpx expo start --android- Run on Android device/emulatornpm run iosornpx expo start --ios- Run on iOS simulator (macOS only)npm run webornpx expo start --web- Run in web browsernpx expo start --tunnel- Start with tunnel connection (for remote devices)npx expo install- Install Expo-compatible versions of packagesnpx expo doctor- Check for common configuration issues
npm run dev- Start development server with nodemonnpm start- Start production servernpm test- Run test suite
- AI suggests character names based on race/class combinations
- Generates appropriate backstories with campaign hooks
- Provides balanced stat distributions
- Creates custom quests based on:
- Quest type (rescue, investigation, etc.)
- Setting preferences
- Party level considerations
- Includes objectives and reward suggestions
- Analyzes uploaded content for game balance
- Provides power level ratings (1-10 scale)
- Suggests modifications for better balance
- Considers damage output, utility, cost, and availability
- Character data
- Campaign information
- Notes and content
- User preferences
- User accounts and authentication
- Shared content library
- Campaign collaboration features
- AI analysis history
- Helmet.js for security headers
- CORS configuration
- Rate limiting middleware
- Input validation with Joi
- MongoDB injection prevention
- JWT token authentication structure
- ✅ Android - Full support with Expo (API 21+ / Android 5.0+)
- ✅ iOS - Full support with Expo (iOS 13.4+)
- ✅ Web - React Native Web support
- 🔄 Desktop - Possible with Electron (future)
Metro bundler issues:
# Clear Expo cache
npx expo start --clear
# Reset Metro cache
npm start -- --reset-cacheDevice connection issues:
# Use tunnel for remote connections
npx expo start --tunnel
# Check network connectivity
npx expo doctorPackage compatibility:
# Install Expo-compatible versions
npx expo install package-name
# Check for incompatible packages
npx expo doctorAndroid emulator not detecting:
- Ensure Android Studio is installed and emulator is running
- Check that ADB is in your PATH
- Try
adb devicesto verify device connection
iOS simulator issues (macOS only):
- Ensure Xcode Command Line Tools are installed:
xcode-select --install - Open iOS Simulator manually if needed
- Check iOS version compatibility (iOS 13.4+)
- Character Creation Wizard
- Basic Campaign Notebook
- Content Library Framework
- Backend API Structure
- User authentication
- Cloud data synchronization
- Enhanced AI features
- Character sheet export (PDF)
- Real-time campaign collaboration
- Advanced timeline features
- Community content sharing
- Offline mode improvements
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- D&D 5e System Reference Document (SRD)
- React Native and Expo communities
- Open source contributors and maintainers
- TTRPG community for inspiration and feedback
Happy Adventures! 🎲✨