Pixie is a lightweight, modern URL shortener that transforms long URLs into short, shareable links with magical simplicity. Built for both anonymous users who need quick link shortening and authenticated users who want comprehensive link management, Pixie offers an intuitive experience across all devices.
Pixie is powered by a carefully selected stack of modern web technologies that ensure performance, scalability, and developer experience:
Frontend Framework
- Next.js 15 with App Router for server-side rendering and optimal performance
- React 19 with TypeScript for type-safe component development
UI & Design System
- TailwindCSS for utility-first styling with dark mode support
- shadcn/ui components built on Radix UI primitives for accessibility
Authentication & Database
- NextAuth.js v5 (beta) for OAuth authentication with Google and GitHub providers
- Prisma ORM for type-safe database operations
- PostgreSQL as the primary database (inferred from Prisma setup)
Core Features:
- ✅ Anonymous link creation on homepage
- ✅ User authentication with Google and GitHub
- ✅ Authenticated link management
- ✅ Link editing and deletion
- ✅ Click tracking and analytics
Dashboard Features:
- ✅ Create new short URLs with custom aliases
- ✅ Grid and list view modes
- ✅ Sort links by date, clicks, or short URL
- ✅ Copy short links and QR codes
- ✅ Link association for anonymous users after login
Homepage Features:
- ✅ Instant URL shortening without registration
- ✅ Local storage persistence for anonymous links
- ✅ One-click copy functionality
Requirements:
- Node.js (+v18.x) installed.
- pnpm installed.
- Visual Studio Code with recommended extensions.
Steps:
-
Fork this project.
-
Clone the repository:
git clone https://github.com/@username/pixie.git- Install dependencies:
# Install pnpm globally if you don't have it:
npm install -g pnpm
# Install dependencies:
pnpm install- Create a .env file with the following content:
# Database
DATABASE_URL="your-postgresql-url-here"
# NextAuth.js
AUTH_SECRET="your-auth-secret-here"
# GitHub Provider
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"
# Google Provider
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
# App URL
NEXT_PUBLIC_PAGE_URL="http://localhost:3000"Database Setup:
- Use Neon or Supabase which are supported on Vercel.
- Update the
DATABASE_URLwith your database credentials from your chosen provider.
Authentication Setup:
- Set up the database:
# Generate Prisma client
pnpm dlx prisma generate
# Run database migrations
pnpm dlx prisma db push- Run the development server:
pnpm devOpen http://localhost:3000 with your browser 🚀
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.