URL Shortener with SvelteKit & PocketBase

A complete URL shortener application built with SvelteKit and PocketBase. This example demonstrates how to build a full-stack web application with URL shortening functionality, including API endpoints for creating short URLs and redirecting to original URLs.

Features

• ✅ URL Shortening API: Create short URLs via POST /api/shorten?url=<long_url>
• ✅ URL Redirect: Visit /{short_code} to redirect to the original URL
• ✅ Hit Tracking: Automatically tracks how many times each short URL is accessed
• ✅ PocketBase Integration: Uses PocketBase as the backend database
• ✅ Type Safety: Full TypeScript support with proper type definitions

Tech Stack

• Frontend: SvelteKit with TypeScript
• Backend: PocketBase (SQLite database)
• Styling: Tailwind CSS
• Build Tool: Vite

Setup

Prerequisites

• Node.js (v18+ recommended)
• PocketBase (download from pocketbase.io)

1. Install Dependencies

npm install
# or
pnpm install

2. Set up PocketBase

1. Download and extract PocketBase from pocketbase.io

2. Create a new PocketBase project:

   ./pocketbase serve
   

3. Open the PocketBase admin panel (usually at http://localhost:8090/_/)

4. Import the database schema from .pocketbase-export.json:

   • Go to Settings → Import Collections
   • Upload/select the .pocketbase-export.json file from this repository
   • Click "Import"

3. Environment Configuration

Create a .env file in the project root:

POCKETBASE_URL=http://127.0.0.1:8090

Make sure PocketBase is running on the specified URL.

4. Start Development Server

npm run dev
# or
pnpm dev

Visit http://localhost:5173 to see the application.

API Documentation

Create Short URL

POST /api/shorten?url=<encoded_url>

Creates a new short URL for the provided long URL.

Example:

curl "http://localhost:5173/api/shorten?url=https%3A%2F%2Fexample.com"

Response:

{
  "status": 200,
  "message": "url shortened successfully",
  "shortcode": "abc123"
}

Redirect to Original URL

GET /{short_code}

Redirects to the original URL and increments the hit counter.

Example:

GET http://localhost:5173/abc123
→ Redirects to https://example.com

Database Schema

The application uses a urls collection in PocketBase with the following fields:

• id (text): Auto-generated PocketBase ID
• short_code (text): 6-character alphanumeric code
• long_url (text): The original URL
• hits (number): Number of times the short URL has been accessed
• created (date): Auto-generated creation timestamp

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Type checking and linting
• npm run format - Format code with Prettier

Project Structure

src/
├── lib/
│   ├── index.ts          # Utility functions and types
│   └── pb.server.ts      # PocketBase client configuration
├── routes/
│   ├── +page.svelte      # Main page (can be customized)
│   ├── [short_code]/
│   │   └── +server.ts    # URL redirect handler
│   └── api/
│       └── shorten/
│           └── +server.ts # URL shortening API

Deployment

1. Build the application:

   npm run build
   

2. Deploy the build/ directory to your hosting provider

3. Set the POCKETBASE_URL environment variable to point to your PocketBase instance

For production deployment, consider using SvelteKit adapters for your target platform (Vercel, Netlify, etc.).

Contributing

This is an example project demonstrating SvelteKit + PocketBase integration. Feel free to modify and extend it for your own use cases!