How to vibe codeBitly

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the full-stack web application.

• GitHubfree

  Source code control and deployment pipeline integration.

AI coding tools

• Claude Code

  Autonomous terminal coding agent capable of scaffolding multi-file features and handling bug fixes end-to-end.

• Cursor

  AI-native code editor for iterative UI styling and fine-grained React component adjustments.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS and configure the Neon Postgres database schema using Drizzle ORM or Prisma.

   Create a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS. Configure Drizzle ORM to connect with Neon Postgres. Define the database schema with three tables: users, links (id, original_url, short_code, custom_back_half, user_id, created_at, clicks_count), and clicks (id, link_id, ip_address, user_agent, referrer, country, timestamp). Ensure proper foreign key constraints, indexes on short_code for high-speed lookups, and set up a basic layout with sidebar navigation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication Setup

   Implement authentication using better-auth to manage user sessions and protect dashboard routes.

   Integrate better-auth into the Next.js application supporting email/password and GitHub OAuth sign-in. Create the necessary auth API routes and database tables. Add protected dashboard routes for authenticated users to view and manage their shortened links, and ensure unauthenticated users are redirected appropriately.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03URL Shortener Core & Redirect Engine

   Build the core link shortening logic, custom back-half validation, and high-performance redirect middleware.

   Implement the URL shortening engine. Create an API endpoint /api/shorten that accepts an original URL and an optional custom back-half. Generate a secure random 6-character short code if no custom back-half is provided. Build a Next.js middleware or dynamic route handler at /[code] that performs an instant lookup in Neon Postgres, logs the click event asynchronously (storing UA, referrer, and IP), and executes a 301 HTTP redirect to the original destination URL. Handle missing or expired codes with a clean 404 page.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Analytics Dashboard & Event Tracking

   Develop the analytics view to visualize click counts, geographic distributions, and referral sources over time.

   Build a comprehensive analytics dashboard page for each shortened link. Query the clicks table to display total click counts, activity over time charts (using Recharts), geographic country breakdowns, and referrer sources. Ensure queries are efficient and optimized with proper database indexes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05QR Code Generator Module

   Add dynamic QR code generation capabilities with color customization and image export options.

   Create a QR code generator feature using a React QR library. Allow users to enter a destination URL or select one of their existing short links, customize dot colors, add foreground elements, and preview the QR code in real-time. Provide download functionality for PNG and SVG formats.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Link-in-Bio Landing Page Builder

   Implement a simple mobile-friendly landing page creator where users can curate and display multiple links.

   Build a Link-in-Bio page builder allowing users to create custom mobile-friendly landing pages. Users should be able to add a profile picture, title, bio, and multiple ordered link buttons pointing to external URLs or their short links. Create a public public page route /bio/[username] to render these landing pages cleanly on mobile and desktop viewports.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Bitly