🎵 TikTok Activity Viewer

An interactive and modern viewer to explore your TikTok activity with an elegant dark mode interface.

✨ Features

📑 Tab System

• ❤️ Like List: All videos you've liked
• ⭐ Favorite Videos: Your bookmarked favorite videos
• 🎵 Favorite Sounds: Saved favorite sounds
• ✨ Favorite Effects: Saved favorite effects

🎮 Navigation Controls

Keyboard

• Enter: Load current video/item
• W or ↑: Go to previous item
• S or ↓: Go to next item
• Numbers: Directly input item number

Git pages

https://john00-dev.github.io/tiktok_activity/

Buttons

• ▶️ Load: Load specified item
• ⬆️ Previous: Navigate to previous item
• ⬇️ Next: Navigate to next item
• 📋 Show/Hide Full List: Toggle complete item list

📋 List Visualization

Each tab includes a button to view the complete list of items:

• Videos (Like List and Favorite Videos):

  • Scrollable list with all videos
  • Item number and date
  • "▶️ View" button that loads video in player
  • Auto-scroll to player on selection

• Sounds and Effects:

  • Scrollable list with all items
  • Item number and date
  • "🔗 Open" button that opens link in new tab

🚀 Installation

Prerequisites

• Local web server or any HTTP server
• JSON file with your TikTok data

File Structure

project/
C:.
│   Index.html          #principal HTML
│   README.md
│   
└───json-backend
    │   README.md
    │   
    ├───src
    │   │   main.py
    │   │   merger.py
    │   │   validator.py
    │   │
    │   ├───api
    │   │       merged_tiktok_activity.json #DB
    │   │
    │   ├───test
    │   │       counter.py
    │   │
    │   └───__pycache__
    │           merger.cpython-314.pyc
    │           validator.cpython-314.pyc
    │
    └───tiktok_activity_history
        ├───TikTok_Data_2023-10-25
        │       user_data_tiktok.json
        │
        ├───TikTok_Data_2024-06-30
        │       user_data_tiktok.json
        │
        └───TikTok_Data_2024-12-30
                user_data_tiktok.json

Setup

1. Place your JSON file at:

   ../json-backend/src/api/merged_tiktok_activity.json

2. Required JSON structure:

{
  "Activity": {
    "Favorite Effects": {
      "FavoriteEffectsList": [
        {
          "Date": "YYYY-MM-DD HH:mm:ss",
          "EffectLink": "https://m.tiktok.com/share/stickers/detail/..."
        }
      ]
    },
    "Favorite Sounds": {
      "FavoriteSoundList": [
        {
          "Date": "YYYY-MM-DD HH:mm:ss",
          "Link": "https://m.tiktok.com/h5/share/music/..."
        }
      ]
    },
    "Favorite Videos": {
      "FavoriteVideoList": [
        {
          "Date": "YYYY-MM-DD HH:mm:ss",
          "Link": "https://www.tiktokv.com/share/video/..."
        }
      ]
    },
    "Like List": {
      "ItemFavoriteList": [
        {
          "Date": "YYYY-MM-DD HH:mm:ss",
          "Link": "https://www.tiktokv.com/share/video/..."
        }
      ]
    }
  }
}

3. Start a local server:

   # use live server in vs code
   

4. Open your browser at http://localhost:5500

📦 Download

Quick Start Package

Download the complete package:

Steps to use:

1. Download or clone this repository
2. Place your TikTok activity JSON file in json-backend/src/api/ or merge your TikTok activity JSON with main.py, this create a new merged_tiktok_activity.json
3. Rename your file to merged_tiktok_activity.json
4. Open index.html with a local server
5. Enjoy exploring your TikTok activity!

Alternative: Single File Setup

If you want to use a single HTML file without external dependencies:

1. Download index.html
2. Modify line 131 to point to your JSON file location:

   fetch("YOUR_JSON_FILE_PATH_HERE")

3. Open with a local server

🎨 Design

Dark Theme

• Deep blue/purple gradient background
• Transparent containers with glassmorphism effects
• Vibrant gradient buttons with hover effects
• Custom scrollbars

Responsive

• Mobile device adaptive
• Controls reorganize on small screens
• Videos maintain 9:16 aspect ratio

🎯 Usage

Navigation by Number

1. Enter the item number you want to view
2. Press Enter or click ▶️ Load
3. Navigate with W/S or ↑↓ arrows

Navigation by List

1. Click 📋 Show/Hide Full List
2. Visually explore all items
3. Click ▶️ View or 🔗 Open depending on type

Tab Switching

• Click tabs in the header to switch sections
• Each tab maintains its independent state

🛠️ Technologies

• HTML5: Semantic structure
• CSS3: Animations, gradients, glassmorphism
• JavaScript (Vanilla): Application logic without frameworks
• TikTok Embed API: Embedded video player

📱 Compatibility

• ✅ Chrome/Edge (recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Mobile devices

🔒 Privacy

• All data is processed locally in your browser
• No information sent to external servers
• Videos load directly from TikTok

🐛 Troubleshooting

JSON doesn't load

• Verify the file path is correct
• Make sure to use an HTTP server (not file://)
• Check browser console for errors

Videos don't play

• Verify links are valid
• Some videos may be private or deleted
• Check that JSON format is correct

Keys don't work

• Make sure the page is focused
• W/S work globally
• ↑↓ only work when input is focused

📝 License

This project is open source and available under the MIT License.

🎁 Bonus: Getting Your TikTok Data

To get your TikTok activity data:

1. Open TikTok app or website
2. Go to Settings and Privacy → Account → Download your data
3. Select JSON format
4. Request your data
5. Wait for TikTok to prepare your file (may take a few days)
6. Download and extract the ZIP file
7. Locate user_data.json or similar activity file
8. Place it in the correct folder and rename if necessary

---

Made with ❤️ to explore your TikTok activity