π΅ A modern, blazing-fast podcast discovery and player for the web
Discover trending podcasts, save your favorites, and enjoy a clean listening experience
π Try Live Demo β’ π Documentation β’ π Report Bug β’ π‘ Request Feature
"The fastest way to discover and enjoy podcasts on the web"
Podr revolutionizes podcast discovery with lightning-fast performance and a beautifully crafted user experience. Built for podcast enthusiasts who demand speed, simplicity, and style.
- π Podcast Discovery - Find trending shows instantly
- β Curated Collections - Save and organize your favorites
- π Quick Access - Zero-delay browsing with offline capabilities
- π± Any Device - Seamless experience across all screen sizes
- β‘ Instant Loading - Top podcasts data pre-loaded for zero-wait discovery
- π Auto-Refresh - Daily automated builds ensure fresh content
- π¦ Optimized Bundles - Lightweight architecture with aggressive caching
- π‘οΈ Rock Solid - 99.9% uptime with global CDN delivery
- π± Responsive Design - Pixel-perfect on mobile, tablet, and desktop
- οΏ½ Modern UI - Clean, intuitive interface with smooth animations
- β‘ Lightning Search - Find any podcast in milliseconds
- β Smart Favorites - One-click bookmarking with persistent storage
- π§ Modern Stack - Preact + TypeScript + cutting-edge tooling
- π§ͺ Fully Tested - Comprehensive test suite with 90%+ coverage
- οΏ½ Security First - CSP headers, HTTPS, and secure dependencies
- π PWA Ready - Offline capabilities and installable experience
|
π¨ Frontend
|
β‘ Build & Deploy
|
|
π§ͺ Testing & Quality
|
π§ Developer Experience
|
| Requirement | Version | Download |
|---|---|---|
| Node.js | 20+ (24+ recommended) | nodejs.org |
| Yarn | Latest | yarnpkg.com |
| Git | 2.0+ | git-scm.com |
# π₯ Clone the repository
gh repo clone cascadiacollections/podr
# or using git
git clone https://github.com/cascadiacollections/podr.git
# π Navigate to project directory
cd podr
# π¦ Install dependencies
yarn install
# π Start development server
yarn startπ Success! Open http://localhost:9000 to see Podr in action!
| Command | Description | Usage |
|---|---|---|
yarn start |
π₯ Start dev server with hot reload | Development |
yarn build |
π¦ Build for production | Local testing |
yarn build:ci |
π Optimized CI/production build | Deployment |
yarn test |
π§ͺ Run all tests | Validation |
yarn test:watch |
π Tests in watch mode | Development |
yarn test:coverage |
π Coverage report | Quality check |
# 1. Start development
yarn start # Launch dev server
# 2. Make changes
# Edit files in src/ - hot reload active!
# 3. Test your changes
yarn test:watch # Run tests continuously
# 4. Check code quality
yarn test:coverage # Ensure coverage targets metThis repository is organized as a monorepo containing the main Podr application and reusable packages:
π¦ podr/
βββ π± src/ # Main Podr application
β βββ π¨ ui/ # React/Preact components
β β βββ π§ͺ __tests__/ # Component test suites
β β βββ π± App.tsx # Main application shell
β β βββ π Search.tsx # Podcast search interface
β β βββ π List.tsx # Podcast listing component
β β βββ π Result.tsx # Individual search results
β β βββ π‘οΈ ErrorBoundary.tsx # Error handling wrapper
β βββ π οΈ utils/ # Shared utilities & helpers
β β βββ π AppContext.tsx # Global application state
β β βββ π§ helpers.ts # Pure utility functions
β β βββ πͺ hooks.ts # Custom React hooks
β βββ π types/ # TypeScript type definitions
β β βββ testing-library__jest-dom.d.ts
β βββ π¨ app.scss # Global styles & variables
βββ π¦ packages/ # Reusable packages
βββ π webpack-api-inliner-plugin/ # API inlining webpack plugin
βββ π README.md # Plugin documentation
βββ π CHANGELOG.md # Release notes
βββ π§ index.ts # Main plugin implementation
βββ π package.json # Package configuration
- webpack-api-inliner-plugin - A webpack plugin that fetches API data at build time and inlines it for faster initial page rendering
- 𧩠Component-Based - Modular, reusable UI components
- π± Mobile-First - Responsive design from ground up
- β‘ Performance - Code splitting and lazy loading
- π Type Safety - Comprehensive TypeScript coverage
- π§ͺ Test Coverage - Unit and integration testing
- βΏ Accessibility - WCAG 2.1 AA compliance
Experience zero-config development with our containerized environment:
# π One-click setup in VS Code
code . # VS Code will prompt for container reopenπ What's Included:
- β Node.js 24 - Latest LTS with optimal performance
- β Yarn - Fast, reliable package management
- β Git + Git LFS - Full version control with large files
- β GitHub CLI - Streamlined GitHub workflow
- β VS Code Extensions - Pre-configured development tools
π¦ Pre-installed Extensions:
- ESLint + Prettier - Code quality and formatting
- TypeScript - Enhanced IntelliSense
- CSS Peek - Quick stylesheet navigation
- Auto Rename Tag - Synchronized tag editing
- GitLens - Advanced Git visualization
π‘ Pro Tip: The dev container ensures every team member has an identical development environment!
We maintain enterprise-grade code quality through automated tooling:
|
π Linting & Formatting
|
π― Type Safety
|
# π Check code quality
yarn lint # Run ESLint checks
yarn format # Format with Prettier
yarn type-check # TypeScript validationComprehensive testing ensures reliability and prevents regressions:
- π― High Coverage - Target 90%+ code coverage
- 𧩠Component Focus - Test behavior, not implementation
- β‘ Fast Feedback - Sub-second test execution
- π Continuous - Tests run on every commit
# π Quick test run
yarn test # Run full test suite
# π Development mode
yarn test:watch # Watch mode with hot reload
# π Coverage analysis
yarn test:coverage # Generate detailed coverage report
# π Specific test patterns
yarn test Button # Test files matching "Button"
yarn test --testNamePattern="search" # Test names containing "search"- β Component Rendering - UI components render correctly
- β User Interactions - Clicks, inputs, and navigation
- β State Management - Context and hooks behavior
- β API Integration - Mock external dependencies
- β Error Boundaries - Graceful error handling
π Coverage Reports are automatically generated and stored in
coverage/directory
Zero-downtime deployments with enterprise-grade reliability:
graph LR
A[Push to main] --> B[GitHub Actions]
B --> C[Build & Test]
C --> D[Deploy to Netlify]
D --> E[Live on podr.netlify.app]
|
π Continuous Deployment
|
β‘ Performance Optimized
|
# π¦ Build for production
yarn build:ci # Optimized production build
# π Deploy to Netlify (if CLI configured)
netlify deploy --prod --dir=dist
# π Preview deployment locally
yarn serve # Serve built files locally- ποΈ Bundle Splitting - Separate vendor and app chunks
- π― Tree Shaking - Dead code elimination
- π¦ Asset Optimization - Image compression and minification
- π Preload Hints - Critical resource prioritization
We β€οΈ contributions! Help make Podr even better for the podcast community.
# 1. π΄ Fork the repository
gh repo fork cascadiacollections/podr
# 2. π Create feature branch
git checkout -b feature/amazing-feature
# 3. β¨ Make your changes
# Edit files, add tests, update docs
# 4. β
Verify quality
yarn test # Run tests
yarn lint # Check code style
yarn build # Ensure it builds
# 5. π Commit with clear message
git commit -m "feat: add amazing feature that does X"
# 6. π Push and create PR
git push origin feature/amazing-feature
gh pr create --title "Add amazing feature" --body "Description of changes"| Type | Description | Examples |
|---|---|---|
| π Bug Fixes | Fix broken functionality | Resolve search issues, fix styling |
| β¨ Features | Add new capabilities | New UI components, API integrations |
| π Documentation | Improve project docs | README updates, code comments |
| β‘ Performance | Speed improvements | Bundle optimization, caching |
| π§Ή Refactoring | Code quality improvements | TypeScript migration, cleanup |
- β Follow Code Style - ESLint + Prettier enforced
- β Write Tests - Maintain 90%+ coverage
- β Update Docs - Keep README and comments current
- β Small PRs - Focused, reviewable changes
- β Clear Commits - Use conventional commit format
π Detailed guidelines: See CONTRIBUTING.md for complete information
This project is licensed under the MIT License - see the LICENSE file for details.
π Free to use, modify, and distribute!
Podr stands on the shoulders of giants:
|
π Performance Preact - Lightning-fast React alternative Rush Stack - Enterprise build tools |
π¨ Design Pico.css - Elegant minimal framework PostCSS - Modern CSS processing |
βοΈ Infrastructure Netlify - Global edge deployment GitHub Actions - CI/CD automation |
π΅ Made with β€οΈ by the Podr team
Empowering podcast discovery, one search at a time
β Give us a star if Podr helped you discover amazing podcasts!