A modern, intuitive manager for Cloudflare R2 storage
BetterFlare is an open-source web application that provides a clean, intuitive interface for managing your Cloudflare R2 storage buckets. Unlike the default Cloudflare dashboard, BetterFlare focuses specifically on R2 management with a streamlined UI that makes working with your cloud storage faster and more efficient.
Built with Next.js and tRPC, BetterFlare offers a responsive, Vercel-inspired design that prioritizes usability while maintaining robust functionality for developers and teams who need to manage their R2 storage effectively.
- Client-side Credentials: Your Cloudflare API credentials stay in your browser's local storage and are never sent to any external servers
- Bucket Management: View, navigate, and manage all your R2 buckets in one place
- Object Operations: Upload, download, rename, and delete objects with ease
- Folder Navigation: Intuitive breadcrumb navigation for nested folders
- Modern UI: Clean, responsive interface inspired by Vercel's design principles
- Fast Performance: Optimized with route prefetching and intelligent caching for snappy navigation
- Real-time Feedback: Visual indicators for loading states and operations
- Fully TypeScript: End-to-end type safety from frontend to API
Coming soon
- Node.js 18+ or Bun
- A Cloudflare account with R2 enabled
- Your Cloudflare Account ID, Access Key ID, and Secret Access Key
- Clone the repository:
git clone https://github.com/zeitgg/betterflare.git
cd betterflare- Install dependencies:
# Using npm
npm install
# Using Bun (recommended)
bun install- Start the development server:
# Using npm
npm run dev
# Using Bun
bun dev- Open http://localhost:3000 in your browser
-
On the home page, enter your Cloudflare credentials:
- Account ID
- Access Key ID
- Secret Access Key
- (Optional) Custom endpoint
-
Your credentials are stored securely in your browser's local storage and are never sent to any external servers.
- The dashboard displays all your R2 buckets in a clean, card-based layout
- Click on any bucket to view its contents
- Use the sidebar for quick navigation between buckets
- Navigate through folders using the breadcrumb navigation
- Upload files using the upload button
- Download, rename, or delete objects using the action buttons
- View object details including size and last modified date
- Framework: Next.js 15
- API Layer: tRPC for type-safe API calls
- UI Components: shadcn/ui with Tailwind CSS
- State Management: Zustand
- Icons: Lucide
- Cloud Storage: Cloudflare R2
- AWS SDK: AWS S3 SDK for R2 compatibility
Contributions are welcome! Whether it's bug reports, feature requests, or code contributions, we appreciate all help in making BetterFlare better.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please make sure to update tests as appropriate and follow the code style of the project.
Distributed under the MIT License. See LICENSE for more information.
- Cloudflare for their amazing R2 service
- Vercel for design inspiration
- shadcn for the excellent UI components
Built with ❤️ by ZEIT