$ show InvertGeek/directlink
This is a Preact single-page application that provides a user interface for uploading files to a backend API (DirectLink) that returns direct download links. The frontend handles file selection via drag-and-drop or file input, uploads with progress tracking, and maintains a history of uploaded files stored in localStorage. It uses valtio for reactive state management, Material UI and styled-components for styling, and axios for HTTP requests with retry logic. The application is cleanly structured with reusable custom hooks (useUnmountEffect, useProxyState) and a portal-based dialog system (DialogContainer). The backend is a separate binary not included in this repository. The codebase demonstrates modern frontend engineering with good separation of concerns and moderate complexity.
The LLM identified 2 files worth highlighting for reuse:
A custom React hook that runs a callback function only when the component unmounts (not on successive dependency updates). It uses two useEffect calls: one to set a flag on component mount, and another to execute the effect in its cleanup only if the flag is true. This solves the problem of running expensive or side-effectful cleanup that should fire only once on unmount, unlike standard useEffect cleanup which fires on every re-render when dependencies change. Self-contained and extractable.
A global dialog management system using valtio for state and React portals for rendering. It exports addDialog() to push dialogs onto a reactive list, and DialogContainer component that renders each dialog inside a Backdrop via createPortal. Supports auto-close on backdrop click and optional non-auto-close mode. This pattern decouples dialog invocations from specific component hierarchies, making it reusable across any application with minimal adaptation.