This project is a clone of Apple’s iPhone 15 Pro website, built using React.js and Tailwind CSS. The site features smooth animations, interactive 3D models, responsive design, and even error monitoring along side live analytical monitoring with Sentry all inspired by the sleek look and feel of Apple’s official product pages.
I created this by following along (and making tweaks of my own) with the YouTube tutorial: Build and Deploy an Apple Website with React | Beginner Three.js & GSAP Tutorial by JavaScript Mastery. Big credit to them for providing such a solid foundation. 🙌
- React.js
- Three.js
- React Three Fiber
- React Three Drei
- GSAP (Greensock)
- Vite
- Tailwind CSS
- Sentry (Error Monitoring & Analytics)
-
Smooth GSAP Animations Subtle, fluid animations that bring the page to life and enhance the user experience.
-
Interactive 3D Model Rendering Rotate and explore the iPhone 15 Pro in different colors and sizes with the help of Three.js + R3F.
-
Custom Video Carousel A lightweight, GSAP-powered video carousel that mimics Apple’s clean transitions.
-
Error Monitoring & Live Analytics Integrated Sentry (sentry.io) for continuous error tracking and real-time insights.
-
Fully Responsive Works seamlessly across desktops, tablets, and mobile devices.
-
Reusable Code Architecture Organized and scalable project structure for easier updates and customization.
Clone the repo and install dependencies:
git clone https://github.com/BackBenchDreamer/iphone15-site-clone.git
cd iphone15-site-clone
npm installRun the development server:
npm run dev
This project was heavily referenced from JavaScript Mastery’s tutorial. I’ve learned a lot about GSAP, Three.js, and modern React architecture through it, while adding my own tweaks and styling.
If you’re a beginner in 3D web development, I highly recommend checking out their work.