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

undefinedProduction URL: https://zilink.co

🚀 Tech Stack

Frontend Framework

• undefinedSvelteKit - Full-stack framework for building web applications
• undefinedSvelte 5 - Modern reactive UI framework
• undefinedTypeScript - Type-safe JavaScript

Build Tools & Bundlers

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

Styling

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

UI Components & Libraries

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

PWA (Progressive Web App)

• undefinedService Worker - Offline support and caching
• undefinedWeb App Manifest - Installable PWA configuration
• undefinedOffline-first - Works without internet connection

Deployment

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

Development Tools

• undefinedESLint - Code linting
• undefinedPrettier - Code formatting
• undefinedsvelte-check - Svelte type checking
• undefinedTypeScript ESLint - TypeScript linting

Utilities

• undefinedqrious - QR code generation library
• undefinedjs-cookie - Cookie management
• undefinedsveltekit-search-params - URL search params management
• undefined@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

• undefinedURL Shortening - Create short, memorable links
• undefinedQR Code Generation - Generate QR codes for any URL
• undefinedLink Analytics - Track clicks, locations, and devices
• undefinedCustom Aliases - Create custom short URLs
• undefinedPassword Protection - Secure links with passwords
• undefinedLink Expiration - Set expiration dates for links
• undefinedDark/Light Mode - Automatic theme switching
• undefinedMulti-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.

---

undefinedDomain: zilink.co
undefinedStatus: Production
undefinedPWA: ✅ Enabled