https://github.com/imjustlucas/url-shortener
🔗 Elegant URL shortener built with React, Hono.js, PostgreSQL and everything else you need to turn long URLs into tiny, trackable links
https://github.com/imjustlucas/url-shortener
hono postgresql react
Last synced: 2 months ago
JSON representation
🔗 Elegant URL shortener built with React, Hono.js, PostgreSQL and everything else you need to turn long URLs into tiny, trackable links
- Host: GitHub
- URL: https://github.com/imjustlucas/url-shortener
- Owner: ImJustLucas
- Created: 2025-08-23T08:03:25.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-23T14:01:57.000Z (11 months ago)
- Last Synced: 2025-08-23T14:44:05.804Z (11 months ago)
- Topics: hono, postgresql, react
- Language: TypeScript
- Homepage:
- Size: 93.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# URL Shortener
A simple URL shortener service built with React, Hono.js, and PostgreSQL.
## Features
- ✨ Shorten long URLs to tiny URLs
- 🔄 Automatic redirect to original URLs
- 📊 Click tracking
- 🚀 Deduplication (same URL returns same short link)
- âš¡ Fast and lightweight
## Tech Stack
- **Frontend**: React + Vite + TypeScript
- **Backend**: Hono.js + TypeScript
- **Database**: PostgreSQL + Drizzle ORM
- **Infrastructure**: Docker Compose
## Getting Started
### Prerequisites
- Node.js 18+
- Docker & Docker Compose
### Installation & Setup
1. **Clone and install dependencies**
```bash
git clone
cd url-shortener
npm install
```
2. **Start the application**
```bash
npm start
```
This will:
- Start PostgreSQL in Docker
- Run database migrations
- Start the API server (port 3000)
- Start the React app (port 5173)
3. **Open your browser**
- Frontend: http://localhost:5173
- API: http://localhost:3000
### Usage
1. Enter a long URL in the input field
2. Click "Shorten URL"
3. Copy the generated short URL
4. Visit the short URL to be redirected to the original
### API Endpoints
- `POST /api/shorten` - Create a short URL
- `GET /api/urls` - List all URLs
- `GET /:slug` - Redirect to original URL
- `GET /health` - Health check
### Development
```bash
# Start only the database
docker-compose up -d
# Run database migrations
cd server && npm run db:migrate
# Start backend only
npm run dev:server
# Start frontend only
npm run dev:client
# View database
cd server && npm run db:studio
```
### Stopping
```bash
npm run stop
```
## Project Structure
```
url-shortener/
├── server/ # Hono.js API
│ ├── src/
│ │ ├── routes/ # Route definitions (Hono apps)
│ │ │ ├── url.ts # URL shortening routes
│ │ │ └── redirect.ts # Redirection routes
│ │ ├── services/ # Business logic services
│ │ │ ├── url.service.ts
│ │ │ └── redirect.service.ts
│ │ ├── db/ # Database schema & connection
│ │ └── index.ts # Main server file
│ └── package.json
├── client/ # React app
│ ├── src/
│ └── package.json
└── docker-compose.yml
```