Article Structure

• Introduction: I graduated from being tech muggle!
• Pain Points and Solutions
• Development Process: The Birthplace of Vibe Coding Magic
  1. Forget it, just drop a prompt first
  2. Use AI's magic to tackle AI! Analyzing the logic of Claude's code
  3. Is it really just one click away!? One-click deployment of MongoDB database
  4. Let it run! Trying to configure variables to connect the database and the code
  5. Debug! Debug! Debug!
• Reflections from a Vibe Coding Beginner
• References

Introduction: I graduated from being a tech novice!

On March 21, 2025, I officially escaped my “tech novice” identity, stepped through the doors of Vibe Coding Academy, and became an AI coding intern!

The catalyst for this was that while sorting external links across different marketing channels in my company, I realized that there was no tool available that could simultaneously provide “completely customized branded URLs” and “simplified tracking processes.” In fact, I faced this pain point during my first B2B marketing job, and many digital marketers often encounter similar issues.

In the past, due to a lack of familiarity with technical details like DNS redirects, along with the unavailability of suitable MarTech (marketing technology) tools to lower the threshold for self-development, such issues typically required intervention from the technical team. For someone without a programming background, developing a “custom tool” that met specific needs was almost a fantasy; one could only begrudgingly settle for existing solutions.

However, through AI collaboration tools like Cursor and Claude, as well as low-code platform services like Zeabur, even those without a programming background can complete development and deployment in a short period of time.

This time, I attempted to develop a fully customized URL shortener using a Zeabur template. During the process, I used Claude AI to generate code, stored URL data in MongoDB, and deployed it to Zeabur with a single click. In just 2-3 hours, I had created a functioning little tool that effectively addressed the initial pain points.

Pain Points and Solutions

Before diving into the practical details, let’s discuss two major limitations of existing URL shortening services:

1. Inability to Fully Customize Domains

Most URL shortening services still carry the platform's branding. For example, the most well-known one, Bitly, isn’t pure enough for brand marketing (or for someone like me who has OCD).

I wanted to use a completely customized domain like https://deploy.zeabur.app/buildtemplate.

2. Basic Link Management Features

• While these services provide basic analytics interfaces, they often require additional use of Google Sheets to manage UTM parameters and then use Campaign Builder to create tracking links.
• Over time, not only does this process become cumbersome, but it may also affect data accuracy due to human error.

To integrate the three key functions of “generation,” “management,” and “tracking” of links, while also addressing the need for custom short URLs, I spent 3 hours chatting with Claude to develop a short URL generator that allows for domain customization, which includes a basic click data tracking mechanism. This allows users to store redirect data using MongoDB and view the effectiveness of short URLs in the backend.

Development Process: The Birthplace of Vibe Coding Magic

1. Forget it, just drop a prompt first

During the development of the URL shortener, I didn’t write any code by hand; instead, I gradually generated the necessary programming logic through dialogue with Claude AI. I had no experience in Node.js development, let alone in connecting databases.

2. Use AI's magic to tackle AI! Analyzing Claude's code logic

Next, I fed the code back to GPT to understand the logic behind Claude's code:

• URL Shortening Logic: Claude implemented a method crypto.randomBytes(3).toString('hex') that created a random 6-character ID for the shortened URL, ensuring low collision rates.
• MongoDB Model Design: Using mongoose, I set up the schema for shortUrl and originalUrl, allowing the application to store and query URL information.
• Redirect Handling and Click Count Update: An API was established that automatically looks up records in MongoDB and redirects each time the short URL is accessed, simultaneously updating the click data.
• Express Routing Design: app.post("/shorten") allows users to submit URLs while app.get("/:shortId") handles redirect requests, forming a complete API structure.
• Error Handling and Security: AI also helped supplement error handling logic, such as URL format checks and responses for non-existent short URLs, ensuring system stability.

Once the logic was clarified, I clicked into the Dashboard, selected the server, chose to deploy from Github, and then deployed the code online!

3. Is it really just one click away!? One-click deployment of MongoDB database

With the code ready, I began researching how to complete the other settings needed to get the code running. Having never studied database management in college, I had no idea how to handle environmental settings. I casually searched the Zeabur website and found that they indeed had officially maintained templates.

I clicked Deploy, selected the server, and the database was created directly—truly just a matter of “clicking once”! (At that moment, seeing the dashboard redirect was so quick that I was puzzled? Seriously??)

4. Let it run! Trying to configure variables to link the database and the code

Once in the project backend, I entered the variable section to add MongoDB’s environment variable key and value, and the code started running!

5. Debug! Debug! Debug!

I thought everything was perfect, but little did I know that the first connection attempt failed. After checking the logs filled with red error codes in the backend, I realized I had made a ridiculously silly naming mistake lol. I hadn’t paid attention earlier, and the code I uploaded to Github was completely out of order in terms of correct naming and hierarchy, resulting in a failure to run the corresponding code.

After making adjustments, the code finally ran! (I even announced it in the team channel lol)

Reflections from a Vibe Coding Beginner

Although this URL shortener is still in a very rudimentary MVP stage, in my imagination (and my pursuit of an extremely smooth workflow), its scalability is tremendous. In the future, I hope to further develop this tool into:

• Integrated Management: Enabling links to be generated and managed all in one interface, while consolidating the UTM library.
• Data Analysis: Combining Google Data Studio or Metabase to provide more detailed data insights.
• A/B Testing Functionality: Allowing different versions of the short URL to direct to different pages, testing the performance of marketing materials.

This experience with Vibe Coding has made me realize that even without a technical background, it is possible to use AI and low-code platforms like Zeabur to create your own digital marketing tools and achieve marketing automation. I look forward to exploring more application scenarios within Zeabur that allow marketers to create personalized MarTech solutions with greater independence.

References

• Review of URL Shortener to Avoid Duplicate Short URLs
• Google URL Shortener links will no longer be available
• URL Shortener - Implementation Notes
• MongoDB Official Documentation