FusionTik

A source code of the tiktok downloader website.

Generate Convert Improve

Install / Use

/learn @jundy779/FusionTik

About this skill

Quality Score

0/100

README

⚡ FusionTik

Modern TikTok Downloader — Video · Photo Mode · MP3

🌸 Overview

FusionTik adalah web application modern untuk mendownload konten TikTok tanpa watermark. Dibangun dengan Next.js 15 App Router, TypeScript, dan Tailwind CSS — FusionTik menawarkan pengalaman download yang cepat, bersih, dan responsif di semua perangkat.

Tidak perlu install aplikasi. Tidak perlu login. Cukup paste link TikTok, klik Download, dan simpan konten ke perangkatmu.

Built on Next.js • Powered by Supabase • Written in TypeScript

<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif">

🏗️ Architecture Overview

graph TD
    A["User Browser - Paste TikTok URL"] -->|Submit Form| B["Next.js Frontend - app/page.tsx"]
    B -->|POST /api/tiktok| C["API Route Handler - Validate URL"]
    C -->|Try Provider 1| D["Zell API - apizell.web.id"]
    C -->|Fallback| E["Sanka API - sankavollerei.com"]
    D -->|Success| F["Parse Response - video, audio, images"]
    E -->|Success| F
    D -->|Fail| E
    E -->|All Fail| G["notifyProviderFailure - Alert System"]
    G --> H["Telegram Bot - Instant Alert"]
    G --> I["Email SMTP - Nodemailer"]
    G --> J["Webhook POST - Custom Endpoint"]
    F -->|JSON Response| B
    B -->|Show VideoPreview| K["Download UI - Progress Bar"]
    K -->|downloadWithProgress| L["TikTok CDN - Direct Download"]
    B -->|POST /api/global-stats| M["Global Counter - Increment"]
    M -->|Atomic RPC| N[("Supabase DB - global_stats")]
    M -->|Fallback| O[("JSON File - global-stats.json")]

    style A fill:#e3f2fd,stroke:#2196f3,stroke-width:3px,color:#0d47a1
    style B fill:#e8f5e9,stroke:#4caf50,stroke-width:3px,color:#1b5e20
    style C fill:#fff3e0,stroke:#ff9800,stroke-width:3px,color:#e65100
    style D fill:#f3e5f5,stroke:#9c27b0,stroke-width:3px,color:#4a148c
    style E fill:#e8eaf6,stroke:#3f51b5,stroke-width:3px,color:#1a237e
    style F fill:#e0f2f1,stroke:#00695c,stroke-width:3px,color:#004d40
    style G fill:#fce4ec,stroke:#e91e63,stroke-width:3px,color:#880e4f
    style H fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#1b5e20
    style I fill:#fff3e0,stroke:#ff9800,stroke-width:2px,color:#e65100
    style J fill:#e3f2fd,stroke:#2196f3,stroke-width:2px,color:#0d47a1
    style K fill:#fff8e1,stroke:#ff8f00,stroke-width:3px,color:#ff6f00
    style L fill:#efebe9,stroke:#795548,stroke-width:3px,color:#3e2723
    style M fill:#f5f5f5,stroke:#616161,stroke-width:2px,color:#424242
    style N fill:#d7ccc8,stroke:#5d4037,stroke-width:2px,color:#3e2723
    style O fill:#d7ccc8,stroke:#5d4037,stroke-width:2px,color:#3e2723

<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif">

🧱 Software Architecture

FusionTik menggunakan Layered Architecture dengan pemisahan yang jelas antara Presentation, Application, dan Infrastructure layer.

Layer Overview

graph TB
    subgraph PRESENTATION["Presentation Layer - Client Side"]
        P1["app/page.tsx - Main Page"]
        P2["video-preview.tsx - Download UI"]
        P3["result-card.tsx - History Card"]
        P4["stats-card.tsx - Stats Display"]
        P5["navbar.tsx - Navigation"]
    end

    subgraph STATE["State Management Layer - React Hooks"]
        S1["use-download-history - localStorage"]
        S2["use-download-stats - Personal Stats"]
        S3["use-global-stats - Global Counter"]
    end

    subgraph APPLICATION["Application Layer - Next.js API Routes"]
        A1["POST /api/tiktok - Core Downloader"]
        A2["GET/POST /api/global-stats - Counter API"]
    end

    subgraph INFRASTRUCTURE["Infrastructure Layer"]
        I1["lib/supabase.ts - DB Client"]
        I2["lib/download-utils.ts - Download Engine"]
        I3["lib/utils.ts - Utilities"]
    end

    subgraph EXTERNAL["External Services"]
        E1["Zell API - Provider 1"]
        E2["Sanka API - Provider 2"]
        E3["Supabase DB - PostgreSQL"]
        E4["TikTok CDN - Media Files"]
        E5["Telegram API - Alerts"]
    end

    PRESENTATION --> STATE
    PRESENTATION --> APPLICATION
    APPLICATION --> INFRASTRUCTURE
    INFRASTRUCTURE --> EXTERNAL

    style PRESENTATION fill:#e3f2fd,stroke:#2196f3,stroke-width:2px
    style STATE fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style APPLICATION fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style INFRASTRUCTURE fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px
    style EXTERNAL fill:#efebe9,stroke:#795548,stroke-width:2px

Component Interaction Diagram

graph LR
    subgraph PAGE["app/page.tsx"]
        FORM["Form Input"]
        RESULT["Result Display"]
        HIST["History Section"]
        STATS["Stats Section"]
    end

    subgraph HOOKS["React Hooks"]
        UDH["useDownloadHistory"]
        UDS["useDownloadStats"]
        UGS["useGlobalStats"]
    end

    subgraph COMPONENTS["Components"]
        VP["VideoPreview"]
        RC["ResultCard"]
        SC["StatsCard"]
    end

    subgraph API["API Routes"]
        TK["POST /api/tiktok"]
        GS["GET/POST /api/global-stats"]
    end

    subgraph LIB["Libraries"]
        DU["download-utils"]
        SB["supabase client"]
    end

    FORM -->|submit| TK
    TK -->|response| RESULT
    RESULT --> VP
    VP --> DU
    HIST --> RC
    STATS --> SC
    PAGE --> UDH
    PAGE --> UDS
    PAGE --> UGS
    UDH -->|localStorage| UDS
    UGS -->|fetch| GS
    GS --> SB
    PAGE -->|increment| GS

    style PAGE fill:#e3f2fd,stroke:#2196f3
    style HOOKS fill:#e8f5e9,stroke:#4caf50
    style COMPONENTS fill:#fff3e0,stroke:#ff9800
    style API fill:#f3e5f5,stroke:#9c27b0
    style LIB fill:#efebe9,stroke:#795548

Data Flow Diagram

flowchart LR
    subgraph INPUT["Input"]
        URL["TikTok URL"]
    end

    subgraph VALIDATION["Validation"]
        REGEX["Regex Check - tiktok.com"]
    end

    subgraph FETCH["Data Fetching"]
        Z["Zell Provider"]
        S["Sanka Provider"]
        PARSE["Parse and Normalize - title, creator, videos, audio, images"]
    end

    subgraph RESPONSE["Response"]
        VIDEO["Video Response - MP4 + Audio"]
        IMAGE["Image Response - Photos + Audio"]
    end

    subgraph STORAGE["Storage"]
        LS["localStorage - history and stats"]
        DB[("Supabase - global_stats")]
    end

    subgraph DOWNLOAD["Download"]
        BLOB["Blob with Progress Bar"]
        OPEN["window.open fallback"]
    end

    URL --> REGEX
    REGEX -->|valid| Z
    REGEX -->|invalid| ERR["Error 400"]
    Z -->|success| PARSE
    Z -->|fail| S
    S -->|success| PARSE
    S -->|fail| ALERT["Alert System - Telegram/Email"]
    PARSE --> VIDEO
    PARSE --> IMAGE
    VIDEO --> LS
    IMAGE --> LS
    VIDEO --> DB
    IMAGE --> DB
    VIDEO --> BLOB
    IMAGE --> BLOB
    BLOB -->|CORS ok| BLOB
    BLOB -->|CORS fail| OPEN

    style INPUT fill:#e3f2fd,stroke:#2196f3,color:#0d47a1
    style VALIDATION fill:#fff3e0,stroke:#ff9800,color:#e65100
    style FETCH fill:#f3e5f5,stroke:#9c27b0,color:#4a148c
    style RESPONSE fill:#e8f5e9,stroke:#4caf50,color:#1b5e20
    style STORAGE fill:#efebe9,stroke:#795548,color:#3e2723
    sty

Related Skills

docs-writer

98.9k

`docs-writer` skill instructions As an expert technical writer and editor for the Gemini CLI project, you produce accurate, clear, and consistent documentation. When asked to write, edit, or revie

model-usage

333.3k

Use CodexBar CLI local cost usage to summarize per-model usage for Codex or Claude, including the current (most recent) model or a full model breakdown. Trigger when asked for model-level usage/cost data from codexbar, or when you need a scriptable per-model summary from codexbar cost JSON.

Design

Campus Second-Hand Trading Platform \- General Design Document (v5.0 \- React Architecture \- Complete Final Version)1\. System Overall Design 1.1. Project Overview This project aims t

arscontexta

2.8k

Claude Code plugin that generates individualized knowledge systems from conversation. You describe how you think and work, have a conversation and get a complete second brain as markdown files you own.

jundy779

View profile

View on GitHub

GitHub Stars9

CategoryContent

Updated19d ago

Forks6

jundy779/FusionTik

Languages

TypeScript

Security Score

75/100

Audited on Mar 5, 2026

No findings