https://github.com/slygriyrsk/apple-web-clone
🍏 This Apple web clone is crafted to capture the essence of the original site, featuring smooth animations and eye-catching custom designs. ✨🎨
https://github.com/slygriyrsk/apple-web-clone
gsap javascript-mastery react sentry tailwindcss threejs
Last synced: 4 months ago
JSON representation
🍏 This Apple web clone is crafted to capture the essence of the original site, featuring smooth animations and eye-catching custom designs. ✨🎨
- Host: GitHub
- URL: https://github.com/slygriyrsk/apple-web-clone
- Owner: Slygriyrsk
- Created: 2024-08-16T19:54:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-16T19:59:49.000Z (almost 2 years ago)
- Last Synced: 2025-07-20T10:42:02.589Z (11 months ago)
- Topics: gsap, javascript-mastery, react, sentry, tailwindcss, threejs
- Language: JavaScript
- Homepage: https://orchardaura.netlify.app/
- Size: 37.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍏 Apple Website Clone
A modern clone of Apple's website built using React, GSAP, Three.js, and Tailwind CSS. This project demonstrates responsive design, animations, and interactive 3D elements.
## Features ✨
- **Navbar**: A responsive and stylish navigation bar.
- **Hero Section**: Eye-catching hero section with smooth animations.
- **Features Section**: Highlighting key features with GSAP animations.
- **Interactive Elements**: Engaging 3D graphics using Three.js.
## Technologies Used 🛠️
- **React**: Front-end library for building user interfaces.
- **GSAP**: Animation library for creating smooth and complex animations.
- **Three.js**: JavaScript library for creating 3D graphics.
- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.
- **Sentry**: Error tracking and performance monitoring tool.
## Installation 🧑💻
### Prerequisites
Make sure you have the following installed:
- [Node.js](https://nodejs.org/) (version 14 or later)
- [npm](https://www.npmjs.com/) (comes with Node.js) or [Yarn](https://classic.yarnpkg.com/en/docs/install/)
### Clone the Repository
First, clone the repository:
```bash
git clone https://github.com/Slygriyrsk/apple-web-clone.git
cd apple-web-clone
```
### Install Dependencies
Use npm or Yarn to install the necessary packages:
With npm:
```bash
npm install
```
With Yarn:
```bash
yarn install
```
### Environment Variables 🌍
Create a `.env` file in the root directory and add the necessary environment variables. Example:
```bash
REACT_APP_SENTRY_DSN=your_sentry_dsn
```
Replace `your_sentry_dsn` with your actual Sentry DSN.
## Development 🚀
To start the development server, run:
With npm:
```bash
npm run dev
```
With Yarn:
```bash
yarn start
```
Open `http://localhost:5173` in your browser to view the application.
## Building for Production 🔧
To create a production build, run:
With npm:
```bash
npm run build
```
With Yarn:
```bash
yarn build
```
The production build will be generated in the `build` directory.
## Deployment 🌐
### Hosting on Vercel/Netlify
Deploy your application to platforms like Vercel or Netlify by connecting your GitHub repository and following their deployment guides.
### Sentry Integration
To monitor errors and performance, integrate Sentry into your React application:
1. **Install the Sentry SDK:**
With npm:
```bash
npm install @sentry/react @sentry/tracing
```
With Yarn:
```bash
yarn add @sentry/react @sentry/tracing
```
2. **Initialize Sentry in your `src/index.js` file:**
```javascript
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
Sentry.init({
dsn: process.env.REACT_APP_SENTRY_DSN,
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 1.0, // Adjust this value as needed
});
```
3. **Deploy your application as described above.**
## Example Code Snippets 📋
### Navbar Component
Here's a simple example of a responsive Navbar using Tailwind CSS:
```jsx
import React from 'react';
const Navbar = () => {
return (
);
};
export default Navbar;
```
### Hero Section with GSAP Animation
Using GSAP for animations in the Hero section:
```jsx
import React, { useEffect } from 'react';
import { gsap } from 'gsap';
const HeroSection = () => {
useEffect(() => {
gsap.from(".hero-title", { duration: 2, opacity: 0, y: -50 });
}, []);
return (
Welcome to the Apple Clone
);
};
export default HeroSection;
```
## Contributing 🤝
We welcome contributions from the community! Feel free to [open issues](https://github.com/Slygriyrsk/apple-web-clone/issues), [submit pull requests](https://github.com/Slygriyrsk/apple-web-clone/pulls), or offer feedback. Your input is invaluable and appreciated.
## License 📜
This project is licensed under the MIT License. See the LICENSE file for more details.
## Acknowledgments 🙌
- **[React](https://reactjs.org/)**: For its efficient and powerful UI development capabilities.
- **[GSAP](https://gsap.com/)**: For its advanced animation capabilities.
- **[Three.js](https://threejs.org/)**: For enabling interactive 3D graphics.
- **[Tailwind CSS](https://tailwindcss.com/)**: For its utility-first approach to CSS design.
- **[Sentry](https://sentry.io/)**: For providing robust error tracking and performance monitoring.