Link Shortener

A simple and fast link shortener service built with React Router 7 and Hono on Val Town.

• Create shortened links with custom or auto-generated IDs
• Track click counts for each shortened link
• Responsive design with Tailwind CSS
• Client-side routing with React Router 7
• SQLite database for persistent storage

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema setup
│   │   └── queries.ts       # Database operations
│   └── index.ts             # Hono API server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React component with routing
│   │   ├── CreateLink.tsx   # Form to create short links
│   │   ├── LinkList.tsx     # List of created links
│   │   └── NotFound.tsx     # 404 page
│   ├── favicon.svg          # Site favicon
│   ├── index.html           # HTML template
│   └── index.tsx            # React entry point
├── index.ts                 # Entry point that exports the backend
└── shared/
    └── types.ts             # Shared TypeScript interfaces

• Frontend:

  • React 18.2.0
  • React Router 7
  • Tailwind CSS (via CDN)

• Backend:

  • Hono (lightweight web framework)
  • SQLite (via Val Town's SQLite API)

• Other:

  • TypeScript
  • nanoid for generating short IDs

1. Users enter a URL to shorten (with optional custom short ID)
2. The backend creates a new entry in the SQLite database
3. When someone visits the shortened URL, the backend:
   • Looks up the original URL in the database
   • Increments the click counter
   • Redirects to the original URL
4. The frontend displays statistics for all created links

This project is designed to run on Val Town. The code is organized to separate concerns between frontend and backend while sharing common types.

MIT