$ show electh/nextflux
Nextflux is a modern RSS reader client designed for the Miniflux server. It is a single-page application built with React 19, Vite 6, and TailwindCSS 4, featuring a three-pane layout for browsing feeds, articles, and reading content. The application emphasizes offline capabilities through IndexedDB storage via Dexie, allowing users to read feeds without an internet connection. The architecture employs a decentralized state management approach using Nanostores, with separate stores for authentication, settings, feeds, articles, and synchronization. Data persistence is handled through a repository pattern over Dexie, providing typed access to IndexedDB collections. The application synchronizes with the Miniflux server via a background sync service that handles incremental updates, conflict resolution, and optimistic UI updates. Additional features include a global audio player for media attachments, AI-powered article summarization, and extensive customization options through a settings panel. Notable reusable components include a utility library for class merging and helper functions, a dynamic font loading hook, and a custom hook for detecting reduced motion preferences. The UI is built upon a migrating component library (transitioning from HeroUI/Radix to @base-ui/react and then to a Luma/shadcn-based system), demonstrating a commitment to modern UI practices. The codebase exhibits strong modularity and separation of concerns, with clear boundaries between UI, state management, data access, and service layers.
The LLM identified 3 files worth highlighting for reuse:
Provides a `cn` utility for conditionally merging class names (similar to tailwind-merge) and other helper functions like debounce and throttle. It is a self-contained utility module with no internal dependencies, making it easily reusable in other projects.
Implements a dynamic font loading strategy with fallbacks, using `requestIdleCallback` for efficient loading and handling both Google Fonts and self-hosted options. It encapsulates complex font loading logic in a reusable way that can be extracted to other projects.
This custom hook subscribes to the `prefers-reduced-motion` media query and returns a boolean indicating whether reduced motion is preferred. It demonstrates a reusable pattern for accessing media queries in React hooks and can be used to respect user accessibility settings in any React application.