Fr4n0m photo Francisco Rodríguez
Back to project
Project Post 11/5/2026

TikTok Clone

Clon de Tiktok

Clon de TikTok construido con React + Vite, orientado a una demo visual con datos mockeados y arquitectura lista para conectar Supabase.

GitHub Web

Stack

HTML CSS TypeScript Vite React Supabase Jest ESLint Vercel Git GitHub

📱 Descripción

Clon de TikTok construido con React + Vite, orientado a una demo visual con datos mockeados. La integración de Supabase está preparada en código, pero la demo pública está desacoplada de conexión real.

🚀 Demo: https://tiktok-clone-five-phi.vercel.app/

🧩 Tecnologías

  • React 18
  • TypeScript 5
  • Vite 5
  • Wouter
  • Supabase (@supabase/supabase-js)

✨ Funcionalidades principales

  • Feed vertical con autoplay por intersección (scroll-snap estilo móvil).
  • Tabs Following y For You con indicador activo y transición lateral animada.
  • Acciones de vídeo mockeadas:
    • Like y bookmark con toggle visual y contador +1 / -1.
    • Panel de comentarios con entrada animada y datos mock.
    • Panel de share con acciones visuales mock.
    • Botón de usuario que navega al perfil.
  • Páginas sociales completas con datos mock: Friends, Inbox, Profile (incluye Recent videos con proyectos del portfolio).
  • Upload mock funcional: selección por drag & drop, publicación en el feed, persistencia en localStorage sin backend real.
  • Aviso de privacidad: los datos no salen del navegador.

🧠 Arquitectura de datos

  • mock por defecto para demo y entorno local.
  • supabase disponible para integración real cuando se habilite.
  • Servicios desacoplados por fuente de datos en src/services/videos.

🔧 Variables de entorno

VITE_DATA_SOURCE=mock        # default
# VITE_DATA_SOURCE=supabase
# VITE_SUPABASE_URL=...
# VITE_SUPABASE_KEY=...

🛠️ Instalación y ejecución

git clone https://github.com/Fr4n0m/tiktok-clone.git
cd tiktok-clone
npm install
npm run dev

📦 Scripts

Script Descripción
npm run dev entorno de desarrollo
npm run build build de producción
npm run preview previsualización del build
npm run lint análisis estático
npm run test tests

🤝 Contribuciones

¿Quieres mejorar el proyecto? Las PRs son muy bienvenidas.

  1. Haz fork del repositorio.
  2. Crea una rama de feature/fix.
  3. Realiza cambios pequeños y atómicos.
  4. Abre una Pull Request con contexto claro y capturas si aplica.

📄 Licencia

Este proyecto está bajo licencia MIT. Consulta LICENSE.

More related posts

No more related posts.