Skip to content

Stop paying SEVENTEEN DIFFERENT BILLS for your shitty todo app. Stop pretending you're an infra genius when you're just bleeding money.

License

Notifications You must be signed in to change notification settings

mynameistito/justfuckingusecloudflare

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

59 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Just Fucking Use Cloudflare

Just Fucking Use Cloudflare

A satirical, high-performance landing page dedicated to saving developers from AWS egress hell and infrastructure complexity by advocating for the Cloudflare ecosystem.

React Vite TypeScript Tailwind CSS

🎯 About

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.

Cloudflare Key Features

  • ⚑ 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

πŸš€ Quick Start

Prerequisites

  • Node.js 18+ (or Bun)
  • npm, yarn, pnpm, or bun package manager

Installation

  1. Clone the repository:

    git clone https://github.com/mynameistito/justfuckingusecloudflare.git
    cd justfuckingusecloudflare
  2. Install dependencies:

    npm install
    # or
    bun install
  3. Run the development server:

    npm run dev
    # or
    bun run dev
  4. Open http://localhost:3000 in your browser

The development server will automatically reload when you make changes.

πŸ“¦ Build for Production

Build the project for production:

npm run build
# or
bun run build

The optimized build output will be in the dist directory, ready for deployment.

Preview Production Build

To preview the production build locally:

npm run preview
# or
bun run preview

☁️ Deploy to Cloudflare Pages

This project is optimized for Cloudflare Pages deployment. The build configuration is already set up for seamless deployment.

Quick Deploy

  1. Push your code to GitHub, GitLab, or Bitbucket
  2. In the Cloudflare Dashboard, go to Workers & Pages > Create application > Pages
  3. Connect your repository
  4. Configure build settings:
    • Build command: npm run build
    • Build output directory: dist
    • Root directory: / (leave empty)
  5. Click Save and Deploy

Your site will be live in seconds! πŸŽ‰

Manual Deployment

You can also deploy manually using Wrangler:

npm install -g wrangler
wrangler pages deploy dist

πŸ› οΈ Tech Stack

πŸ“ Project Structure

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

πŸ§ͺ Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build locally
  • npm run fix - Auto-fix linting and formatting issues
  • npm run check - Check for linting and formatting issues
  • npm run ultracheck - Fix and check all issues
  • npm run tsc - Type check without emitting files

🎨 Development

Code Quality

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.

Styling

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

🀝 Contributing

Contributions are welcome! Feel free to:

  • Open an issue for bugs or feature requests
  • Submit a pull request with improvements
  • Share feedback or suggestions

πŸ“„ License

This project is licensed under the terms specified in the LICENSE file.

βš–οΈ Legal

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.

πŸ”— Links


Made with ❀️ (and a healthy dose of frustration with AWS billing)

About

Stop paying SEVENTEEN DIFFERENT BILLS for your shitty todo app. Stop pretending you're an infra genius when you're just bleeding money.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published