Tiktok UI Clone
TikTok UI clone built with ReactJS, Axios, and Redux. The project replicates TikTok’s modern interface, including video feed, user interactions, and state management. Axios handles API requests while Redux manages global state for smooth and scalable performance.
🧩 Features
🔐 User Authentication
- Registration/Login: Authentication system with email/password
- Session Management: JWT token with Redux Persist
- Security: Token-based authentication with Axios interceptors
🎥 Video & Content
- Video Viewing: Custom video player with full controls
- Autoplay: Automatic video playback on scroll
- Volume Control: Volume control and mute/unmute functionality
- Video Quality: Support for multiple video formats
- Full Screen: Full-screen viewing mode
📤 Upload & Management
- Video Upload: Video upload with preview
- Video Editor: Basic cutting and editing
- Thumbnail: Automatic thumbnail generation
- Caption & Hashtags: Add descriptions and hashtags
- Privacy Settings: Privacy settings (Public/Private)
👥 Social Interactions
- Follow/Unfollow: Follow other users
- Like/Unlike: Like videos with animations
- Comments: Real-time commenting system
- Share: Share videos across platforms
- User Profiles: Personal pages with detailed information
🔍 Discovery & Search
- Search: Search users and videos with debounce
- For You Page: Recommended video feed
- Following Feed: Videos from followed users
- Trending: Trending hashtags and videos
- Live Streaming: Live stream page (UI)
📱 Additional Features
- Responsive: Mobile, tablet, desktop support
- PWA Ready: Progressive Web App capabilities
- Dark/Light Mode: Theme switching
- Lazy Loading: Performance optimization with lazy loading
- Infinite Scroll: Infinite scrolling with Intersection Observer
💡 Technologies used
Frontend Core
- React 18.2.0: Main library for UI
- React Router Dom 6.8.1: Routing and navigation
- Redux Toolkit 1.9.3: State management
- Redux Persist 6.0.0: Persist Redux state
Styling & UI
- Sass: CSS preprocessor
- CSS Modules: Scoped styling
- Normalize.css: CSS reset
- ClassNames: Dynamic CSS classes
- FontAwesome: Icon library
Video & Media
- React Video Player: Custom video controls
- Lottie React: Animations
- React Draggable: Drag and drop interactions
Utilities & Performance
- Axios: HTTP client
- Tippy.js: Tooltips and popovers
- React Intersection Observer: Viewport detection
- React Visibility Sensor: Element visibility detection
- Lodash Debounce: Performance optimization
Development Tools
- React App Rewired: Custom webpack config
- Babel Module Resolver: Import path resolution
- ESLint: Code linting
- SASS: Advanced styling
🌐 Source Code
🚀 Developed by DuKang.