Introduction
I built a browser-based curl command generator using React.
In this article, I’ll introduce the app, explain how to use it, share the background behind the development, and talk about the challenges and lessons learned along the way.
▶ App URL: https://d249wz41volo8p.cloudfront.net
Overview
This application is a tool that automatically generates curl commands for sending HTTP requests.
By simply entering the method, URL, headers, and body, the corresponding curl command is generated instantly.
How to Use
- Select the HTTP method (e.g., GET, POST).
- Enter the request URL.
- Add headers, body, or authentication info as needed.
- Choose additional options (e.g.,
-i,-L,-v,-k) using checkboxes. - The curl command is generated and displayed in real time based on your input.
- Click the Copy button to copy it to your clipboard.
Use Cases
✅ Quickly test API requests.
✅ Generate multiple curl commands for different scenarios.
✅ Learn and review how to write curl commands and use common options.
Features
- Real-time curl command generation based on input.
- Common options can be easily selected with checkboxes.
- Add or remove multiple headers dynamically.
- Supports Basic Authentication and Bearer Tokens.
- Light / Dark mode switching supported.
- Language switching (Japanese / English) supported.
Technologies Used
Frontend
| Category | Technology |
|---|---|
| Language | TypeScript |
| Library | React |
| Styling | Tailwind CSS, Shadcn UI |
| Icons | lucide-react |
| State Management | React Hooks (useState, useEffect) |
| Development Env | Docker, Docker Compose |
| Hosting | S3 + CloudFront |
Backend
None (frontend-only architecture)
System Architecture
Why I Built This
Recently, I started using curl more often at work. Since I wasn’t very familiar with it, I found myself repeatedly asking:
- How do I specify the method again?
- How do I set headers?
- What does this option do?
I had to look things up every time.
Wouldn’t it be convenient if curl commands could be built just by selecting options in a UI?
That idea led me to build this app.
Another reason was that I thought I could reuse parts of the code from a previous project:
my “.gitignore behavior checker” app.👇
https://dev.to/a-k-0047/i-built-a-gitignore-behavior-checker-app-with-react-a31
What I Focused On
Reusing Code from .gitignore Checker
I tried to be efficient by reusing layouts, components, and logic from my previous app.
The language-switching feature (Japanese/English) was also reusable, which saved a lot of development time.
Implementing Dark Mode
I wanted to try something new in this project, so I added dark mode.
Unifying almost all UI with shadcn/ui made dark mode support straightforward.
Since shadcn/ui exposes component styles directly through code, I was able to match my custom components to its style and maintain a consistent design easily.
Testing Generated Curl Commands
For verifying the generated curl commands, I used:
It was helpful for testing various options and authentication patterns.
Using AWS CDK
I used AWS CDK to create and manage the hosting environment (S3 + CloudFront).
I previously created these resources manually via the AWS console, but automating them made things much easier.
What I Learned
Reusing Code Matters
Reusing code from my .gitignore checker app significantly reduced development time.
I also wrote this app with reuse in mind—features like dark mode and AWS CDK configuration will be useful in future projects.
You Learn a Lot by Actually Using What You Built
It sounds obvious, but using your own tools reveals many areas for improvement.
For example, I originally placed the “Copy” button inside the command output area,
but long commands would overlap with the button.
So I moved it outside the text area.
By actually using the app, I found many design and layout tweaks that made it more user-friendly.
Getting feedback from others would be ideal, but first ensuring you can use your app comfortably is a great start.
Future Plans
New Features
- More curl options
- Saving generated commands
- Running commands directly from the UI
Deployment Automation
I automated resource creation with AWS CDK, but deployment is still manual.
I’d like to automate it using GitHub Actions.
Closing Thoughts
There are already many curl generators out there, so I wondered whether it was worth building one myself.
But in the end, I learned a lot and built reusable components and infrastructure that will help in future projects.
I’m glad I took the time to build it, and I’d like to continue applying what I learned.
▶ App
https://d249wz41volo8p.cloudfront.net
▶ GitHub Repository
https://github.com/a-k-0047/curl-generator-front
💬 How about you?
- Have you ever built a small tool like this for your workflow? How did it go?
- What kind of features would you add to a curl generator like this?
- Do you usually write curl commands by hand, or do you use tools to help?
Top comments (1)
Hi ak0047,
Really sharp little project. Love how you packaged it with S3 + CloudFront — lightweight build, production-ready delivery. Clean UI, useful output. Nice work. 💯