Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aaryancdry/apple_clone
Apple Clone Website showcasing Iphone 15
https://github.com/aaryancdry/apple_clone
gsap3 react sentry tailwindcss threejs
Last synced: 13 days ago
JSON representation
Apple Clone Website showcasing Iphone 15
- Host: GitHub
- URL: https://github.com/aaryancdry/apple_clone
- Owner: AaryanCdry
- Created: 2024-12-09T16:05:26.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-09T16:16:30.000Z (2 months ago)
- Last Synced: 2024-12-09T17:29:17.706Z (2 months ago)
- Topics: gsap3, react, sentry, tailwindcss, threejs
- Language: JavaScript
- Homepage: https://apple-clone-eight-chi.vercel.app
- Size: 37.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# Apple Website Clone
A modern and visually stunning clone of the Apple website, created with cutting-edge tools and frameworks to showcase advanced frontend development skills.
## 📝 Features
- **Smooth Animations:** Powered by GSAP and React Three Fiber for immersive user experiences.
- **3D Elements:** Integrates Three.js to render 3D models and effects.
- **Responsive Design:** Built with TailwindCSS to ensure a seamless experience across all devices.
- **Error Tracking:** Implemented with Sentry for monitoring and debugging.
- **Fast Build System:** Vite for fast development and build processes.
## 🚀 Tech Stack
- **React:** Library for building the user interface.
- **GSAP:** For rich animations.
- **Three.js & React Three Fiber:** For 3D rendering and interactivity.
- **TailwindCSS:** Utility-first CSS framework for responsive styling.
- **Vite:** Lightning-fast build tool for modern web development.
- **Sentry:** Error tracking and monitoring for enhanced reliability.
## 📦 Installation and Setup
1. Clone the repository:
```bash
git clone https://github.com/your-username/apple-website-clone.git
cd apple-website-clone
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Build for production:
```bash
npm run build
```
5. Preview the production build:
```bash
npm run preview
```
## 🛠️ Scripts Overview
- `npm run dev`: Starts the development server.
- `npm run build`: Builds the application for production.
- `npm run preview`: Previews the production build.
- `npm run lint`: Runs ESLint to check code quality.
## ✨ Key Dependencies
- **[@gsap/react](https://greensock.com/gsap/):** Smooth animations and transitions.
- **[@react-three/drei](https://github.com/pmndrs/drei):** Helpful utilities for React Three Fiber.
- **[TailwindCSS](https://tailwindcss.com/):** Quick and easy styling.
- **[@sentry/react](https://sentry.io/):** Error tracking and performance monitoring.
## 📂 Folder Structure
```
apple-website-clone/
├── src/ # Main source code
├── public/ # Static assets
├── .eslintrc.js # ESLint configuration
├── tailwind.config.js # TailwindCSS configuration
├── vite.config.js # Vite configuration
├── package.json # Dependencies and scripts
└── README.md # Project documentation
```