A React Native mobile application for recording and automatically editing audio samples into clean one-shots. Built with Expo and AWS Amplify.
Little Bit is a mobile app that allows users to:
- Record audio samples using their device's microphone
- Automatically crop recordings to isolate intended content
- Create clean "one-shots" ready for audio production
- Name and save recordings to the cloud
- Browse and playback their recorded samples
- Edit sample metadata
- Secure authentication with user accounts
The app's key feature is its intelligent audio editing capability that automatically detects and crops recordings to only include what was intended to be recorded, eliminating silence and extraneous noise. This creates isolated audio samples that can be immediately incorporated into audio projects without requiring manual editing.
- Frontend: React Native + Expo
- Backend: Direct AWS SDK Integration + AWS CDK Infrastructure
- Authentication: AWS Cognito (direct SDK)
- Storage: AWS S3 (direct SDK)
- API: GraphQL with AWS AppSync (direct SDK)
- Functions: AWS Lambda (Node.js & Python)
- Infrastructure: AWS CDK (alternative to Amplify)
- Audio: Expo AV
- Navigation: React Navigation
The application has been successfully migrated from AWS Amplify SDK to direct AWS SDK services, providing:
- 68% smaller bundle size
- Better performance and control
- Infrastructure-agnostic frontend
- Support for CDK, Amplify, or pure CloudFormation deployment
- Node.js (v14 or higher)
- npm or yarn
- Expo CLI (
npm install -g expo-cli) - AWS Account (for Amplify backend)
- iOS Simulator (Mac) or Android Emulator
- Clone the repository:
git clone <repository-url>
cd little-bit- Install dependencies:
npm install
# or
yarn install- Deploy AWS infrastructure:
Option A: Using AWS CDK (Recommended)
cd cdk
npm install
npx cdk bootstrap
npx cdk deploy --all -c testing=trueOption B: Using AWS Amplify (Legacy)
amplify init
amplify push- Generate configuration:
# For CDK deployment
node scripts/generate-aws-exports.js --env dev
# For Amplify (auto-generated)
# aws-exports.js is created automaticallyStart the Expo development server:
npm start
# or
yarn startThis will open Expo DevTools in your browser.
- iOS:
npm run iosor pressiin Expo DevTools - Android:
npm run androidor pressain Expo DevTools - Web:
npm run webor presswin Expo DevTools
little-bit/
├── src/
│ ├── api/ # API service modules (legacy)
│ ├── services/ # NEW: Direct AWS SDK services
│ │ ├── auth/ # Cognito authentication service
│ │ ├── storage/ # S3 storage service
│ │ ├── api/ # GraphQL API service
│ │ └── index.js # Service initialization
│ ├── config/ # NEW: Configuration management
│ │ ├── ConfigManager.js # Central config loader
│ │ └── providers/ # Config providers
│ ├── components/ # Reusable UI components
│ ├── contexts/ # React contexts
│ ├── graphql/ # GraphQL queries and mutations
│ ├── navigation/ # Navigation configuration
│ ├── screens/ # Screen components
│ └── utils/ # Utility functions
├── cdk/ # NEW: AWS CDK infrastructure
│ ├── lib/stacks/ # CDK stack definitions
│ ├── lambda/ # Lambda function code
│ └── graphql/ # GraphQL schema files
├── amplify/ # Legacy: AWS Amplify configuration
├── scripts/ # NEW: Deployment and config scripts
├── environments/ # NEW: Environment configurations
└── App.js # Main app entry point
- Real-time audio recording with visual feedback
- High-quality recording presets
- Intelligent automatic cropping that detects and isolates intended content
- Creates clean "one-shots" by removing silence and unwanted audio
- Perfect for creating samples for music production, sound design, or audio projects
- Custom naming for recordings
- Automatic cloud upload with processed audio
- Stream recorded samples from cloud storage
- Play/pause controls
- Audio state management
- Secure sign up and login
- Email verification
- Password recovery
- Session management
- Automatic upload to AWS S3
- User-specific storage buckets
- Secure file access
- Cognito: User authentication and authorization (direct SDK)
- S3: Audio file storage (direct SDK)
- AppSync: GraphQL API (direct SDK)
- DynamoDB: Sample metadata storage
- Lambda Functions:
CreateSampleRecord: Creates database records for new samplesEditandConvertRecordings: Performs intelligent audio processing to automatically crop recordings
- CloudFormation/CDK: Infrastructure as Code deployment
The app uses a modern service layer architecture with feature flags:
Control which services to use via environment variables:
# Enable direct AWS SDK services (recommended)
REACT_APP_USE_NEW_STORAGE=true # Use S3Service directly
REACT_APP_USE_NEW_AUTH=true # Use CognitoAuthService directly
REACT_APP_USE_NEW_API=true # Use GraphQLService directly
# Or fall back to Amplify SDK (legacy)
REACT_APP_USE_NEW_STORAGE=false
REACT_APP_USE_NEW_AUTH=false
REACT_APP_USE_NEW_API=false- Gradual Migration: Switch between Amplify and direct SDK per service
- Adapter Pattern: Maintains API compatibility during transition
- Zero Downtime: Falls back gracefully if new services fail
- Production Ready: Successfully deployed and tested
Key files:
.env: Feature flags and local configurationsrc/aws-exports.js: Generated from CDK stack outputscdk/cdk.context.json: CDK context and settings
amplify/team-provider-info.json: Team-specific Amplify configsrc/aws-exports.js: Auto-generated AWS configuration
- Core Stack: Deployed (Cognito, S3, IAM)
- API Stack: Deployed (AppSync, DynamoDB)
- Configuration: Generated and working
- App Status: Ready to run with new services
- The app uses Expo's managed workflow
- Audio permissions are required for recording functionality
- iOS silent mode compatibility is enabled
- Web platform is supported but may have limited audio features
- Recording permissions: Ensure microphone permissions are granted
- AWS credentials: Verify Amplify is properly initialized
- Build errors: Clear cache with
expo start -c - Audio playback issues: Check device audio settings and silent mode
This project is private and proprietary.