A satirical, high-performance landing page dedicated to saving developers from AWS egress hell and infrastructure complexity by advocating for the Cloudflare ecosystem.
This project is a modern, opinionated landing page that makes a compelling (and slightly profane) case for using Cloudflare's platform instead of juggling multiple AWS services. Built with React and Vite, optimized for Cloudflare Pages deployment, and designed to be fast, accessible, and maintainable.
This project is satire and for educational/demo purposes only; it is not official guidance from any cloud provider.
- β‘ Zero cold starts - Edge computing that actually works
- π 300+ edge locations worldwide
- π° Free tier that's actually usable
- π¦ No egress fees on R2 storage
- ποΈ SQLite at the edge with D1
- π Unlimited bandwidth on Pages
- π€ Workers AI at the edge
- π Real preview deployments
- π Git integration that just works
- π Free SSL certificates and DDoS protection included
- Node.js 18+ (or Bun)
- npm, yarn, pnpm, or bun package manager
-
Clone the repository:
git clone https://github.com/mynameistito/justfuckingusecloudflare.git cd justfuckingusecloudflare -
Install dependencies:
npm install # or bun install -
Run the development server:
npm run dev # or bun run dev -
Open http://localhost:3000 in your browser
The development server will automatically reload when you make changes.
Build the project for production:
npm run build
# or
bun run buildThe optimized build output will be in the dist directory, ready for deployment.
To preview the production build locally:
npm run preview
# or
bun run previewThis project is optimized for Cloudflare Pages deployment. The build configuration is already set up for seamless deployment.
- Push your code to GitHub, GitLab, or Bitbucket
- In the Cloudflare Dashboard, go to Workers & Pages > Create application > Pages
- Connect your repository
- Configure build settings:
- Build command:
npm run build - Build output directory:
dist - Root directory:
/(leave empty)
- Build command:
- Click Save and Deploy
Your site will be live in seconds! π
You can also deploy manually using Wrangler:
npm install -g wrangler
wrangler pages deploy dist- React 19 - UI library
- Vite 7 - Build tool and dev server
- TypeScript - Type safety
- Tailwind CSS 4 - Utility-first CSS framework
- React Router - Client-side routing
- Lucide React - Icon library
- Biome - Fast formatter and linter
- Husky - Git hooks
justfuckingusecloudflare/
βββ src/
β βββ components/ # React components
β β βββ comparison.tsx # AWS vs Cloudflare comparison
β β βββ cta.tsx # Call-to-action section
β β βββ features.tsx # Features showcase
β β βββ footer.tsx # Footer component
β β βββ hero.tsx # Hero section
β β βββ rant.tsx # The main rant section
β βββ pages/ # Page components (if needed)
β βββ app.tsx # Main app component
β βββ index.tsx # React entry point
β βββ index.html # HTML entry point
β βββ index.css # Global styles
βββ public/ # Static assets
β βββ favicon-16x16.png # Favicon (16x16)
β βββ favicon-32x32.png # Favicon (32x32)
β βββ android-chrome-192x192.png # PWA icon (192x192)
β βββ android-chrome-512x512.png # PWA icon (512x512)
β βββ apple-touch-icon.png # iOS home screen icon
β βββ site.webmanifest # PWA manifest
β βββ opengraph.png # Open Graph image
βββ dist/ # Build output (generated)
βββ vite.config.ts # Vite configuration
βββ tsconfig.json # TypeScript configuration
βββ biome.jsonc # Biome linter/formatter config
βββ package.json # Dependencies and scripts
βββ wrangler.jsonc # Cloudflare Workers/Pages config
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locallynpm run fix- Auto-fix linting and formatting issuesnpm run check- Check for linting and formatting issuesnpm run ultracheck- Fix and check all issuesnpm run tsc- Type check without emitting files
This project uses:
- Biome for fast linting and formatting
- TypeScript for type safety
- Husky for pre-commit hooks
Run npm run fix before committing to ensure code quality.
The project uses Tailwind CSS 4 with a custom design system:
- Dark theme with orange accent colors (
#F6821F) - Custom fonts: Anton (headings), JetBrains Mono (monospace), Space Grotesk (body)
- Responsive design with mobile-first approach
Contributions are welcome! Feel free to:
- Open an issue for bugs or feature requests
- Submit a pull request with improvements
- Share feedback or suggestions
This project is licensed under the terms specified in the LICENSE file.
This is a community-built, satirical, open-source project. It is not endorsed by, sponsored by, or affiliated with any of the companies mentioned.
"Cloudflare", "Cloudflare Workers", "Cloudflare Pages", "Cloudflare R2", and "Cloudflare D1" are trademarks or registered trademarks of Cloudflare, Inc.
"Amazon Web Services", "AWS", and related service names are trademarks of Amazon.com, Inc. or its affiliates.
"Google Cloud", "Google", and related service names are trademarks of Google LLC.
All other product names, logos, and brands are property of their respective owners and are used for identification and comparative purposes only.
Software is provided "as is", without warranty of any kind. You are responsible for complying with each providerβs Terms of Service and Acceptable Use Policy.
Made with β€οΈ (and a healthy dose of frustration with AWS billing)
