Companion PWA for Climber. Study on the go with audio briefings and flashcards.
Basecamp is a mobile-first Progressive Web App designed to help you consume and review technical content generated by Climber. Whether you're commuting, taking a break, or studying offline, Basecamp makes it easy to review flashcards and listen to audio briefings on your mobile device.
- Interactive Review: Tap to flip cards, swipe to mark as "got it" or "review again"
- Progress Tracking: Real-time tracking of completed vs. review-again cards
- Smooth Animations: Native-feeling card flip and swipe animations
- Session Management: Navigate freely between cards with previous/next controls
- Flexible Playback: Supports both actual audio files and text-to-speech
- Podcast-like Controls: Play/pause, skip forward/backward 15 seconds
- Variable Speed: 1x, 1.25x, 1.5x, 2x playback rates
- Script Reading: Toggle between player view and full script text
- Installable: Add to home screen on iOS and Android
- Offline-Ready: Works without internet connection after initial load
- Mobile-First: Optimized for mobile devices with touch interactions
- Dark Mode: Clean dark theme perfect for late-night studying
- JSON File Import: Load flashcard decks and audio briefings from Climber output
- Sample Content: Ships with example content for immediate demo
- Future-Ready: Architected to easily switch to API-based loading
- Node.js 20+ (recommended) or 18.20.8 (minimum)
- npm or yarn
# Clone the repository
git clone https://github.com/YusefAmen/basecamp.git
cd basecamp
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview- Open Basecamp in Safari
- Tap the Share button (square with arrow up)
- Scroll down and tap "Add to Home Screen"
- Tap "Add" to confirm
- Open Basecamp in Chrome
- Tap the menu (three dots)
- Tap "Add to Home Screen"
- Tap "Add" to confirm
Basecamp consumes content generated by Climber in specific JSON formats. These formats serve as the contract between Climber and Basecamp.
{
"deck_id": "unique-identifier",
"title": "Kubernetes Network Policies",
"source": "https://kubernetes.io/docs/concepts/services-networking/network-policies/",
"created_at": "2025-02-20T10:30:00Z",
"cards": [
{
"id": "unique-card-id",
"question": "What is the default network policy behavior in Kubernetes?",
"answer": "By default, pods are non-isolated and accept traffic from any source."
}
]
}{
"briefing_id": "unique-identifier",
"title": "Prometheus 2.50 Release Notes",
"source": "https://github.com/prometheus/prometheus/releases/tag/v2.50.0",
"created_at": "2025-02-20T10:30:00Z",
"script": "Welcome to your briefing on Prometheus 2.50...",
"audio_file": "prometheus-2.50-briefing.mp3"
}Note: audio_file is optional. When not provided, Basecamp uses text-to-speech to read the script.
basecamp/
├── public/ # Static assets and PWA files
│ ├── manifest.webmanifest # PWA manifest (auto-generated)
│ ├── pwa-*.svg # PWA icons
│ └── sample-data/ # Sample content for demo
├── src/
│ ├── components/ # React components
│ │ ├── AudioPlayer.tsx # Audio briefing player
│ │ ├── AudioFeed.tsx # Audio briefings list
│ │ ├── FlashcardDeck.tsx # Flashcard deck list
│ │ ├── FlashcardViewer.tsx# Card review interface
│ │ ├── BottomNav.tsx # Tab navigation
│ │ └── FileImport.tsx # JSON file import
│ ├── hooks/ # Custom React hooks
│ │ ├── useFlashcards.ts # Flashcard state management
│ │ └── useAudioPlayer.ts # Audio player state
│ ├── types/ # TypeScript interfaces
│ │ └── index.ts # Data model definitions
│ ├── data/ # Data loading logic
│ │ └── loader.ts # Local/API data loaders
│ └── styles/ # Global CSS styles
│ └── globals.css # Tailwind + custom styles
├── tests/ # Test files
│ ├── components/ # Component tests
│ └── hooks/ # Hook tests
└── dist/ # Production build output
- React 19 with TypeScript for UI
- Vite for fast development and building
- Tailwind CSS for styling
- Vite PWA Plugin for Progressive Web App features
- Vitest + React Testing Library for testing
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run test # Run tests
npm run lint # Lint code with ESLint- Component-Based: Each screen is a self-contained component
- Hook-Driven: Business logic separated into custom hooks
- Type-Safe: Full TypeScript coverage with strict types
- Mobile-First: Responsive design optimized for mobile devices
- Offline-First: Service worker caches all assets and data
- Generate Content: Use Climber to analyze technical content and generate flashcards/briefings
- Export JSON: Climber outputs content in Basecamp-compatible JSON format
- Import to Basecamp: Use the file import feature to load content into Basecamp
- Study on the Go: Review flashcards and listen to briefings anywhere
The project includes comprehensive tests for components and hooks:
# Run all tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverageTest coverage includes:
- ✅ Component rendering and interactions
- ✅ Navigation between screens
- ✅ File import functionality
- ✅ Flashcard session management
- ✅ Audio player state management
- API Integration: Backend API for syncing content across devices
- Spaced Repetition: Smart scheduling algorithm for optimal learning
- Offline Sync: Sync data when connection is restored
- Audio Generation: TTS integration for consistent audio quality
- Analytics: Learning progress and performance insights
Contributions are welcome! Please feel free to submit issues and pull requests.
- 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.
Built by Jared (Yusef) Amen
- GitHub: @YusefAmen
- Buy Me a Coffee: https://buymeacoffee.com/YusefAmen
- Climber: Knowledge digester that generates the content you consume in Basecamp
Generate content with Climber → review it in Basecamp