✂️ Snip — URL Shortener

A fast, lightweight URL shortener with click analytics, custom aliases, and link expiry. Built with Node.js, Express, and PostgreSQL.

---

🚀 Live Demo

🔗 snip-url-alpha.vercel.app

📸 Preview

---

🛠️ Tech Stack

Layer	Technology	Hosted On
Frontend	HTML, CSS, JavaScript	Vercel (free)
Backend	Node.js + Express	Hugging Face Spaces (free)
Database	PostgreSQL	Neon (free)

---

📁 Project Structure

snip/
├── client/
│   ├── index.html
│   ├── style.css
│   └── app.js
├── server/
│   ├── index.js         # Entry point
│   ├── routes/
│   │   └── url.js       # API routes
│   ├── controllers/
│   │   └── urlController.js
│   └── db/
│       ├── index.js     # DB connection
│       └── schema.sql   # Table definitions
├── assets/
│   └── preview.webp     # UI Demo
├── .env.example
├── .gitignore
└── package.json

---

⚙️ Getting Started

Prerequisites

• Node.js v18+
• PostgreSQL v15+

Installation

1. Navigate to the project directory

cd snip

2. Install dependencies

npm install

3. Set up environment variables

cp .env.example .env

Then fill in your .env file:

PORT=3000
DATABASE_URL=postgresql://user:password@localhost:5432/snip
BASE_URL=http://localhost:3000
CORS_ORIGIN=http://localhost:3000

4. Set up the database

psql -U your_user -d snip -f server/db/schema.sql

5. Start the server

npm run dev

Visit http://localhost:3000 in your browser.

---

🗺️ Deployment Map: Where to Upload What

This project is optimized for a 100% free stack. Here is the exact mapping:

1. Database (Neon.tech)

Files Used: server/db/schema.sql

• Action: Copy the content of server/db/schema.sql and run it in the Neon SQL Editor to create your table.
• Result: You get a DATABASE_URL (connection string).

2. Backend (Hugging Face Spaces)

Files Used: server/, Dockerfile, package.json

• Action: Create a new Space on Hugging Face with Docker SDK. The GitHub Action (.github/workflows/deploy-hf.yml) auto-deploys on every push to main.
• Environment Variables (add as Secrets/Variables in Space settings):
  • DATABASE_URL: Your Neon connection string (secret).
  • BASE_URL: Your HF Space URL (e.g., https://username-snip-url-backend.hf.space).
  • CORS_ORIGIN: Your Frontend URL (e.g., https://snip.vercel.app).
• Result: You get a Backend URL (e.g., https://username-snip-url-backend.hf.space).

3. Frontend (Vercel)

Files Used: client/

• Action:
  1. Update client/app.js: Set const API_BASE_URL to your Hugging Face Space backend URL.
  2. Deploy the client folder to Vercel.
• Result: You get a live Frontend URL.

---

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.