Sammelkarten - A beautiful, real-time web application for tracking collectible card values with Bitcoin-style analytics.
Sammelkarten is based on the idea of showcasing a powerful, real-time platform for collectors and enthusiasts to track informations and maybe the value of their collectible cards. Inspired by cryptocurrency exchanges, it provides a professional, minimalistic interface with live updates, interactive charts, and advanced analytics. After community feedback, the project can evolve to meet the needs of its users.
- Real-time Price Tracking - Live price updates every 2 minutes with WebSocket connections
- Interactive Charts - Canvas-based price history charts with zoom and pan functionality
- Market Analytics - Comprehensive market overview with top gainers/losers
- Responsive Design - Clean, minimalistic interface optimized for all devices
- Advanced Search - Filter by name, rarity, and sort by various metrics
- Keyboard Shortcuts - Power user navigation and controls
- Price Ticker - Real-time scrolling ticker showing significant price movements
- Admin Interface - Password-protected database management
- Localization - Expanding language support to reach a global audience, making the platform accessible to non-English speakers.
- Community Engagement - Building a strong community around collectible card tracking, including forums, events, and user feedback loops.
- AI Price Suggestions - Implementing AI-driven price suggestions based on historical data and market trends.
- User Profiles - Allowing users to create profiles, track their collections, and share insights.
- Collections - Enabling users to create and manage collections of cards, with features for tracking ownership and value changes.
- Social Sharing - Options for users to share their collections and favorite cards on social media platforms.
- Augmented Reality (AR) - Exploring AR features for viewing cards in a virtual space, enhancing the collector experience.
- Marketplace Integration - Allowing users to buy, sell, and trade cards within the platform, creating a vibrant marketplace ecosystem.
- Advanced Analytics - Providing deeper insights into market trends, including predictive analytics and machine learning models.
- User-Generated Content - Enabling users to contribute content, such as card reviews, market analysis, and community-driven insights.
- Gamification - Introducing gamified elements like achievements, leaderboards, and challenges to enhance user engagement.
- API Access - Offering an API for developers to build third-party applications and integrations with Sammelkarten.
- Data Export - Allowing users to export their card data and analytics for personal use or integration with other tools.
- Backend: Elixir/Phoenix with LiveView for real-time updates
- Database: Mnesia with DETS for distributed, fault-tolerant storage
- Frontend: Phoenix LiveView + Tailwind CSS
- Charts: Custom Canvas-based charts with JavaScript hooks
- Real-time: Phoenix PubSub for WebSocket communication
- Elixir 1.16+ and Erlang/OTP 26+
- Node.js 18+ (for asset pipeline)
# Clone the repository
git clone https://github.com/yourusername/sammelkarten.git
cd sammelkarten
# Install dependencies
mix setup
# Start the Phoenix server
mix phx.serverVisit localhost:4000 to see the application.
mix phx.server # Start development server
mix test # Run test suite
mix format # Format code
mix credo # Code quality check
iex -S mix # Interactive shell
:observer.start() # Mnesia monitoring- Price Engine: Sophisticated market simulation with rarity-based volatility
- Real-time Updates: Background GenServer updating prices
- LiveView Pages: Dashboard, individual card details, and market overview
- Admin Interface: Database management with authentication
- Cards: Collectible cards with metadata, pricing, and rarity information
- Price History: Time-series data for trend analysis and charts
- Market Data: Aggregated statistics and market movements
Inspired by modern cryptocurrency exchanges, Sammelkarten combines:
- Minimalistic Design: Clean interface focusing on essential information
- Real-time Data: Live updates without page refreshes
- Professional UX: Financial-grade interface for serious collectors
- Automatic price simulation based on card rarity and market trends
- WebSocket connections for instant UI updates
- Price history tracking for comprehensive charts
- Custom Canvas-based implementation (no external dependencies)
- Mouse wheel zooming with cursor-focused zoom
- Click-and-drag panning
- High DPI display support
- Real-time market cap calculations
- Top gainers and losers with live rankings
- Time range filtering (24h, 7d, 30d)
- Volume tracking and trend analysis
Version: 1.0 (Production Ready) Milestones Completed: 5/8
- β Project Foundation & Setup
- β Core Data Models & Storage
- β Card Dashboard & Listing
- β Individual Card Pages
- β Real-time Features & Interactivity
- π UI Polish & Advanced Features (90% complete)
The application includes a password-protected admin interface for database management. Admin credentials are configured through environment variables.
Fully responsive design supporting:
- Desktop computers (1200px+)
- Tablets (768px - 1199px)
- Mobile phones (320px - 767px)
This is an open source project. Contributions are welcome!
- 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.
- Built with the powerful Elixir/Phoenix framework
- Uses Phoenix LiveView for seamless real-time updates
- Tailwind CSS for beautiful, responsive styling
Thank you for the beautiful photos of the cards: OrangePin21!
Live Demo: samelkarten.fly.dev
Source Code: GitHub Repository
Donation: Donation
Made with β€οΈ in Bitcoin and Elixir
