How We Build OneClick Platform
This article details the technical architecture and implementation of the OneClick platform.
Background
While Vercel offers an unparalleled development experience, its pricing can be prohibitive for many projects. Cloudflare, on the other hand, provides generous free tiers but requires significant time investment to master its platform features.
This context led us to ask: Could we bring Vercel's development experience to the Cloudflare platform? This was the genesis of the OneClick project.
Design Goals
Our core objective was to build a complete application development platform on Cloudflare's services. This challenging goal required us to:
- Maintain Vercel-level development experience
- Fully utilize Cloudflare's global infrastructure
- Ensure platform performance and scalability
Core Frameworks
- Next.js - React Application Framework (Using App Router)
- Build and deploy Next.js applications using @cloudflare/next-on-pages
- Full support for Cloudflare Pages platform features
- Achieve near-Vercel development experience
- Auth.js - Authentication System for Next.js
- Support for Magic Link login
- GitHub OAuth integration
- Custom email templates and verification flows
- Drizzle - Type-safe TypeScript ORM
- Optimized Cloudflare D1 database access layer
- Complete type inference support
- High-performance query builder
- React-email - React-based Email System
- Reusable email template components
- Support for verification emails, marketing emails, and more
- Seamless Postmark integration
- MDX - Modern Documentation System
- Seamless React component usage in Markdown
- Client-side rendering optimized for Cloudflare platform
- Automatic code highlighting and syntax checking
- Wrangler - Cloudflare Developer Toolchain
- Complete local development environment support
- Simplified deployment and configuration management
- Real-time logging and debugging capabilities
Infrastructure
- Stripe - Enterprise Payment System
- Secure payment processing
- Complete subscription management system
- Automated invoice and refund handling
- Cloudflare - Global Cloud Computing Platform
- Pages for full-stack application deployment
- Workers for edge computing capabilities
- Global CDN network support
- Postmark - Professional Email Service
- Reliable email delivery
- Detailed sending status tracking
- Email template management system
- GitHub - Code Hosting and CI/CD
- Automated build and deployment processes
- Code quality checks
- Version control and collaboration management
User Interface
- Tailwind CSS - Utility-First CSS Framework
- Efficient responsive development
- Customizable design system
- Optimized build output
- shadcn/ui - High-Quality Component Library
- Accessibility support based on Radix UI
- Fully customizable component APIs
- Seamless Tailwind integration
- Framer Motion - Animation System
- Smooth page transitions
- Interactive interface animations
- Performance-optimized animation implementation
- Lucide - Icon System
- Consistent design language
- Customizable icon styles
- Optimized SVG implementation
- next/font - Font Optimization
- Automatic font subsetting
- Built-in performance optimization
- Zero-config font loading
Technical Infrastructure
- TypeScript - Type System
- Strict type checking
- Complete IDE support
- Automated documentation generation
- Biome - Modern Development Toolchain
- Fast code formatting
- Intelligent code analysis
- Unified coding standards
- Turborepo + Turbopack - Build System
- Incremental build support
- Intelligent caching strategy
- Optimized dependency management
- tRPC, GraphQL - API Framework
- End-to-end type safety
- Automated API documentation
- Optimized data fetching
- TanStack - Development Toolkit
- Reactive state management
- High-performance data tables
- Intelligent data caching
Performance Monitoring
- Analytics - Custom Monitoring System
- Based on Cloudflare Analytics Engine
- Real-time performance metrics analysis
- Custom monitoring dashboard
- Bun - Modern Development Runtime
- Fast package management
- Optimized build performance
- Compatible Node.js API
- Sentry - Error Monitoring
- Real-time error tracking
- Performance bottleneck analysis
- User behavior insights
Data Storage
- Cloudflare D1 - SQL Database
- SQLite-compatible interface
- Automatic backup mechanism
- Edge computing integration
- Cloudflare R2 - Object Storage
- S3-compatible interface
- Global storage network
- Intelligent caching strategy
Open Source Initiative
The OneClick platform shares its core codebase with the Saasfly open-source template. Our goals are to:
- Provide high-quality open-source solutions for developers
- Build an active community ecosystem
- Continuously improve the development experience
Through this comprehensive technology stack, we've successfully achieved a Vercel-like development experience on the Cloudflare platform while maintaining low operational costs. We look forward to this solution helping more developers build their applications.