A fully responsive vertical video feed app inspired by Instagram Reels and Facebook Shorts. Built using React.js, Tailwind CSS, and Context API. Optimized for smooth performance, mobile-first design, and modern UX behavior.

• Frontend: React.js (with Vite)
• Styling: Tailwind CSS
• Global State: React Context API
• Icons: Lucide React
• Optimizations: React.memo(), useCallback(), IntersectionObserver()
• Mock API: JSON files & local state

• One video per full-screen view (snap scrolling)
• Auto-play when in view, pause when out
• Functional video seekbar, with showing the length of the video
• Tap to toggle:
  • Play/Pause (with central overlay icon)
  • Mute/Unmute (top-left icon)
• Responsive to mobile, tablet, and desktop

• Hashtag + Creator Name + Follow button
• Reel title + 3-line clamped description
• Right side:
  • Like (with optimistic UI)
  • Comment count
  • Share
  • Tip/Earnings
  • Three-dot menu

• Fixed bottom navbar (Home, Shorts, Add, Search, Profile)

• Dummy login screen using localStorage
• Blocks access to feed unless logged in
• Logout resets app state

• ✅ React.memo, useCallback for render optimization
• ✅ IntersectionObserver for auto video playback
• ✅ Optimistic UI updates for like button
• ✅ Lazy video loading (only load when in view)
• ✅ Smooth icon transitions and responsive UX

. ├── eslint.config.js ├── .gitignore ├── index.html ├── package.json ├── package-lock.json ├── public │   ├── data │   │   ├── reels-page-1.json │   │   ├── reels-page-2.json │   │   └── reels-page-3.json │   └── vite.svg ├── README.md ├── src │   ├── App.jsx │   ├── assets │   │   └── react.svg │   ├── components │   │   ├── BottomNav.jsx │   │   ├── FollowButton.jsx │   │   ├── LikeButton.jsx │   │   ├── LoadingScreen.jsx │   │   ├── ReelCard.jsx │   │   └── VideoSeekbar.jsx │   ├── context │   │   └── ReelsContext.jsx │   ├── hooks │   │   └── useInView.js │   ├── index.css │   ├── main.jsx │   ├── pages │   │   └── LoginPage.jsx │   └── services │   └── reelService.js └── vite.config.js 10 directories, 25 files 

Prantik Ghosh
Frontend Web Developer | React.Js Developer GitHub: @tbs96

This project meets all requirements from the assignment PDF — including bonus features.