zilink.co

A modern, Progressive Web App (PWA) for creating shortened links and QR codes with analytics tracking. Built with SvelteKit and deployed at zilink.co.

🌐 Domain

Production URL: https://zilink.co

🚀 Tech Stack

Frontend Framework

• SvelteKit - Full-stack framework for building web applications
• Svelte 5 - Modern reactive UI framework
• TypeScript - Type-safe JavaScript

Build Tools & Bundlers

• Vite 6 - Next-generation frontend build tool
• SvelteKit Vite Plugin - Svelte integration for Vite

Styling

• Tailwind CSS 4 - Utility-first CSS framework
• @tailwindcss/forms - Form styling plugin
• @tailwindcss/vite - Tailwind Vite plugin

UI Components & Libraries

• @lucide/svelte - Beautiful icon library
• svelte-french-toast - Toast notifications
• mode-watcher - Dark/light mode management
• tailwind-merge - Merge Tailwind classes efficiently

PWA (Progressive Web App)

• Service Worker - Offline support and caching
• Web App Manifest - Installable PWA configuration
• Offline-first - Works without internet connection

Deployment

• Vercel - Serverless deployment platform
• @sveltejs/adapter-vercel - Vercel adapter for SvelteKit

Development Tools

• ESLint - Code linting
• Prettier - Code formatting
• svelte-check - Svelte type checking
• TypeScript ESLint - TypeScript linting

Utilities

• qrious - QR code generation library
• js-cookie - Cookie management
• sveltekit-search-params - URL search params management
• @fontsource/inter - Inter font family

📱 PWA Features

zilink.co is a fully functional Progressive Web App with the following capabilities:

• ✅ Installable - Can be installed on mobile and desktop devices
• ✅ Offline Support - Service worker caches assets for offline access
• ✅ Fast Loading - Optimized caching strategy for quick page loads
• ✅ App-like Experience - Standalone display mode with custom theme
• ✅ Responsive Design - Works seamlessly across all device sizes

PWA Configuration

The app includes:

• Web App Manifest (static/manifest.json)
• Service Worker (src/service-worker.ts)
• PWA icons (64x64, 192x192, 512x512)
• Theme colors and background colors
• Standalone display mode

🎯 Features

• URL Shortening - Create short, memorable links
• QR Code Generation - Generate QR codes for any URL
• Link Analytics - Track clicks, locations, and devices
• Custom Aliases - Create custom short URLs
• Password Protection - Secure links with passwords
• Link Expiration - Set expiration dates for links
• Dark/Light Mode - Automatic theme switching
• Multi-language Support - Internationalization ready

📦 Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🛠️ Development

# Type checking
npm run check

# Watch mode type checking
npm run check:watch

# Linting
npm run lint

# Format code
npm run format

📁 Project Structure

svelte-front/
├── src/
│   ├── lib/
│   │   ├── components/     # Reusable components
│   │   │   ├── blocks/    # Block components
│   │   │   └── ui/        # UI components
│   │   ├── services/      # API services
│   │   ├── types/         # TypeScript types
│   │   └── utils/         # Utility functions
│   ├── routes/            # SvelteKit routes
│   │   ├── [id]/          # Dynamic route for short links
│   │   └── qr-code/       # QR code page
│   ├── service-worker.ts  # PWA service worker
│   └── app.css            # Global styles
├── static/                # Static assets
│   ├── manifest.json      # PWA manifest
│   └── icons/             # App icons
└── package.json

🔧 Configuration

SvelteKit

• Adapter: Vercel (for serverless deployment)
• Preprocessor: Vite

Vite

• SvelteKit plugin
• Tailwind CSS plugin
• Search params plugin

TypeScript

• Strict mode enabled
• Path aliases configured

🌍 Environment Variables

Create a .env file in the root directory:

# Add your environment variables here

📝 License

Private project - All rights reserved

👨‍💻 Development

Built with ❤️ using SvelteKit and modern web technologies.

Domain: zilink.co
Status: Production
PWA: ✅ Enabled