Toptop (TikTok Clone)

🗺️ Navigation

👁️ Overview

🎯 A modern TikTok clone built with React & Supabase - A comprehensive social media platform that replicates TikTok's core features including video streaming, user authentication, social interactions, real-time messaging, and content discovery.

🏆 Key Features

🎥 Video Streaming

Smooth video playback with adaptive quality and infinite scroll

⚡ Real-time Interactions

Live likes, comments, follows with instant UI updates

💬 Live Messaging

Real-time chat with media sharing and read receipts

📤 Advanced Video Upload

Seamless video upload with preview, custom thumbnails, and metadata editing

🌳 Project Structure

tiktok-clone/
├── 📁 public/                   # Static assets (index.html, images)
│
├── 📁 src/                      # Source Code
│   ├── 📁 assets/               # Fonts, icons, and other static resources
│   ├── 📁 components/           # Reusable UI components (e.g., Button, LoginForm)
│   ├── 📁 config/               # Application configuration (routes, Supabase client)
│   ├── 📁 contexts/             # React Context providers for global state
│   ├── 📁 hooks/                # Custom React hooks (e.g., useVideoData)
│   ├── 📁 layouts/              # Page layout components (e.g., DefaultLayout)
│   ├── 📁 pages/                # Main application pages (e.g., Home, Profile)
│   └── 📁 services/             # API integration layer
│
├── 📄 .env.example              # Environment variable template
├── 📄 docker-compose.dev.yml    # Development container setup
├── 📄 package.json              # Dependencies & scripts
└── 📄 tailwind.config.js        # Tailwind CSS configuration

📊 Data Flow Architecture

graph TD
    A[React Client<br/>Frontend] --> B[Supabase<br/>Backend-as-a-Service]
    B --> C[(PostgreSQL<br/>Database)]
    B --> D[Storage<br/>Video & Images]
    B --> E[Real-time<br/>Subscriptions]
    E --> F[Live Chat]
    E --> G[Presence Status]
    C --> H[User Profiles]
    C --> I[Video Metadata]
    C --> J[Social Interactions]

⚙️ System Requirements

Component	Version	Notes
Node.js	≥ 18.0.0	Required for React development
npm/yarn	Latest	Package manager
Supabase Account	Free Tier+	Backend services & database
Modern Browser	Latest	Chrome, Firefox, Safari, Edge
Docker (Optional)	Latest	For containerized development

🏃 Quick Start

⚡ One-Command Setup

git clone https://github.com/mrthinh307/tiktok-clone.git
cd tiktok-ui-supabase
npm install && npm start

📊 Detailed Setup

1. 📥 Clone Repository

git clone https://github.com/mrthinh307/tiktok-clone.git
cd tiktok-ui-supabase

2. 📦 Install Dependencies

npm install
# or
yarn install

3. 🔧 Environment Setup

# Create environment file
cp .env.example .env

# Add your Supabase credentials
REACT_APP_SUPABASE_URL=your_supabase_url
REACT_APP_SUPABASE_KEY=your_supabase_anon_key

4. 🗄️ Supabase Setup

Create a new project at supabase.com
Set up authentication providers
Create necessary database tables (SQL schema available in docs)
Configure storage buckets for videos and images

5. ▶️ Run Development Server

npm start
# or
yarn start

📍 Application: http://localhost:3000

6. 🐳 Docker Development (Optional)

# Start with Docker Compose
docker-compose -f docker-compose.dev.yml up --build

🛠️ Tech Stack

🖥️ Frontend

Technology	Purpose	Details
React 19	Framework	Latest React with concurrent features
React Router DOM	Routing	Client-side navigation
Tailwind CSS	Styling	Utility-first CSS framework
Framer Motion	Animations	Smooth animations & transitions
FontAwesome	Icons	Comprehensive icon library
Tippy.js	Tooltips	Interactive tooltip components
Axios	HTTP Client	API request handling

🗄️ Backend & Database

Technology	Purpose	Details
Supabase	Backend-as-a-Service	Authentication, database, storage
PostgreSQL	Database	Relational database via Supabase
Supabase Storage	File Storage	Video and image hosting
Supabase Real-time	Live Updates	Real-time subscriptions
Row Level Security	Security	Database-level authorization

🎨 UI & Styling

Technology	Purpose	Details
Custom TikTok Fonts	Typography	Authentic TikTok design
SCSS Modules	Styling	Component-scoped styles
Desktop-First Design	UI Layout	Optimized for desktop use
Custom Animations	UX	Smooth micro-interactions

🔧 Development Tools

Technology	Purpose	Details
Create React App	Build Tool	Development & build setup
React App Rewired	Configuration	Webpack customization
Babel Module Resolver	Imports	Absolute import paths
Docker	Containerization	Development environment
ESLint	Code Quality	JavaScript/React linting

🗝️ Core Features

🖥️ User Interface

🏠 Home Feed

For You algorithm-based content
Following feed for subscribed users
Infinite scroll with preloading
Video autoplay with sound control
Video autoscroll mode
Keyboard navigation (↑/↓ arrows)

👤 User Profiles

Customizable profile information
Video portfolio with tabs (Videos, Liked, Reposts)
Follower/Following lists
Social sharing options
Profile editing capabilities

🎥 Video Features

📤 Upload System

Drag & drop video upload
Custom thumbnail generation
Description with hashtags & mentions
Progress tracking
Video preview before publishing

▶️ Video Player

Adaptive video quality
Smooth playback controls
Volume control with persistence
Fullscreen support
Loading state management

👥 Social Features

👍 Interactions

Like/Unlike videos with animation
Follow/Unfollow users
Save videos to favorites
Share videos (social platforms)
Comment system

💬 Real-time Messaging

1-on-1 chat conversations
Media sharing (images, videos)
Read receipts
Typing indicators
Online presence status

🔐 Authentication & Security

Supabase Auth: Email/password registration and login
Protected Routes: Authenticated-only areas
Row Level Security: Database-level permissions
Session Management: Automatic token refresh
Password Reset: Email-based password recovery

🔬 Production Deployment

🌐 Frontend Deployment

# Build for production
npm run build

# Serve build files
npx serve -s build -l 3000

☁️ Recommended Hosting

Platform	Best For	Setup
Vercel	React Apps	`vercel --prod`
Netlify	Static Sites	Drag & drop build folder
Firebase Hosting	Google Stack	`firebase deploy`
AWS Amplify	AWS Integration	Connect GitHub repo

🐳 Docker Production

# Build production image
docker build -f Dockerfile.prod -t tiktok-clone .

# Run production container
docker run -p 80:80 --env-file .env tiktok-clone

🔧 Environment Variables

# Production environment
REACT_APP_SUPABASE_URL=your_production_supabase_url
REACT_APP_SUPABASE_KEY=your_production_anon_key
REACT_APP_ENVIRONMENT=production

📊 Performance Optimization

Code Splitting: Automatic route-based splitting
Image Optimization: WebP format with fallbacks
Caching Strategy: Service worker for offline support
Bundle Analysis: npm run build includes size analysis

👨‍💻 Developer

Duy Thinh
Solo Dev

🏹 Aim Towards

🎓 Learning & Development Purpose

This TikTok Clone project serves as an educational journey focused on skill development and knowledge accumulation through hands-on experience.

🎯 Learning Goals

📚 Knowledge Building: Mastering modern React ecosystem, Supabase backend services, and real-time applications
💪 Skill Development: Problem-solving, code quality, performance optimization, and industry best practices
🔧 Practical Experience: Working with full-stack development, video streaming, and social media features

🌟 Personal Growth

🎯 Persistence

Overcoming technical challenges and debugging complex issues without giving up

🚀 Independence

Self-researching solutions and developing autonomous problem-solving capabilities

📈 Continuous Learning

Staying updated with new technologies and improving skills daily

💫 Key Achievements

"Learning by building - turning knowledge into practical skills"

💡 Made with ❤️ for the TikTok Clone community

⬆️ Back to Top • 🐛 Report Bug • ✨ Request Feature

🌟 Star this repo if you found it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 173 Commits
public		public
src		src
.babelrc		.babelrc
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
.prettierrc		.prettierrc
CONTRIBUTING		CONTRIBUTING
Dockerfile.dev		Dockerfile.dev
LICENSE		LICENSE
README.md		README.md
config-overrides.js		config-overrides.js
docker-compose.dev.yml		docker-compose.dev.yml
jsconfig.json		jsconfig.json
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js

License

mrthinh307/toptop

Folders and files

Latest commit

History

Repository files navigation