{"id":21097499,"url":"https://github.com/slygriyrsk/apple-web-clone","last_synced_at":"2026-02-04T21:35:55.803Z","repository":{"id":253457311,"uuid":"843565274","full_name":"Slygriyrsk/apple-web-clone","owner":"Slygriyrsk","description":"🍏 This Apple web clone is crafted to capture the essence of the original site, featuring smooth animations and eye-catching custom designs. ✨🎨","archived":false,"fork":false,"pushed_at":"2024-08-16T19:59:49.000Z","size":39032,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-20T10:42:02.589Z","etag":null,"topics":["gsap","javascript-mastery","react","sentry","tailwindcss","threejs"],"latest_commit_sha":null,"homepage":"https://orchardaura.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Slygriyrsk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-16T19:54:32.000Z","updated_at":"2024-10-22T18:10:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0f19caa-68fc-4f48-9ff0-46ae39c76274","html_url":"https://github.com/Slygriyrsk/apple-web-clone","commit_stats":null,"previous_names":["slygriyrsk/apple-web-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Slygriyrsk/apple-web-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slygriyrsk%2Fapple-web-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slygriyrsk%2Fapple-web-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slygriyrsk%2Fapple-web-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slygriyrsk%2Fapple-web-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Slygriyrsk","download_url":"https://codeload.github.com/Slygriyrsk/apple-web-clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slygriyrsk%2Fapple-web-clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29096425,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T21:05:08.033Z","status":"ssl_error","status_checked_at":"2026-02-04T21:04:53.031Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gsap","javascript-mastery","react","sentry","tailwindcss","threejs"],"created_at":"2024-11-19T22:48:30.566Z","updated_at":"2026-02-04T21:35:55.778Z","avatar_url":"https://github.com/Slygriyrsk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Screenshot 2024-08-17 010825](https://github.com/user-attachments/assets/38f77dcb-989c-4de1-a6f9-e58d7f5b4e11)\n\n# 🍏 Apple Website Clone\n\nA 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.\n\n\n## Features ✨\n\n- **Navbar**: A responsive and stylish navigation bar.\n- **Hero Section**: Eye-catching hero section with smooth animations.\n- **Features Section**: Highlighting key features with GSAP animations.\n- **Interactive Elements**: Engaging 3D graphics using Three.js.\n\n## Technologies Used 🛠️\n\n- **React**: Front-end library for building user interfaces.\n- **GSAP**: Animation library for creating smooth and complex animations.\n- **Three.js**: JavaScript library for creating 3D graphics.\n- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.\n- **Sentry**: Error tracking and performance monitoring tool.\n\n## Installation 🧑‍💻\n\n### Prerequisites\n\nMake sure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (version 14 or later)\n- [npm](https://www.npmjs.com/) (comes with Node.js) or [Yarn](https://classic.yarnpkg.com/en/docs/install/)\n\n### Clone the Repository\n\nFirst, clone the repository:\n\n  ```bash\n  git clone https://github.com/Slygriyrsk/apple-web-clone.git\n  cd apple-web-clone\n  ```\n\n### Install Dependencies\n\nUse npm or Yarn to install the necessary packages:\n\nWith npm:\n\n  ```bash\n  npm install\n  ```\n\nWith Yarn:\n\n  ```bash\n  yarn install\n  ```\n\n### Environment Variables 🌍\n\nCreate a `.env` file in the root directory and add the necessary environment variables. Example:\n\n  ```bash\n  REACT_APP_SENTRY_DSN=your_sentry_dsn\n  ```\n\n  Replace `your_sentry_dsn` with your actual Sentry DSN.\n\n## Development 🚀\n\n\nTo start the development server, run:\n\nWith npm:\n  ```bash\n  npm run dev\n  ```\n\nWith Yarn:\n  ```bash\n  yarn start\n  ```\n\nOpen `http://localhost:5173` in your browser to view the application.\n\n![Screenshot 2024-08-17 010949](https://github.com/user-attachments/assets/c9a1d4ac-7ba1-4b59-bb8a-b7225133c20f)\n\n## Building for Production 🔧\n\n\nTo create a production build, run:\n\nWith npm:\n\n  ```bash\n  npm run build\n  ```\n\nWith Yarn:\n\n  ```bash\n  yarn build\n  ```\n\nThe production build will be generated in the `build` directory.\n\n## Deployment 🌐\n![Screenshot 2024-08-17 011014](https://github.com/user-attachments/assets/00e9a689-7014-4fcf-bfd7-ca57302b2307)\n\n\n### Hosting on Vercel/Netlify\n\nDeploy your application to platforms like Vercel or Netlify by connecting your GitHub repository and following their deployment guides.\n\n### Sentry Integration\n\nTo monitor errors and performance, integrate Sentry into your React application:\n\n1.  **Install the Sentry SDK:**\n\n    With npm:\n\n    ```bash\n    npm install @sentry/react @sentry/tracing\n    ```\n\n    With Yarn:\n\n    ```bash\n    yarn add @sentry/react @sentry/tracing\n    ```\n\n2.  **Initialize Sentry in your `src/index.js` file:**\n\n    ```javascript\n    import * as Sentry from \"@sentry/react\";\n    import { Integrations } from \"@sentry/tracing\";\n\n    Sentry.init({\n      dsn: process.env.REACT_APP_SENTRY_DSN,\n      integrations: [new Integrations.BrowserTracing()],\n      tracesSampleRate: 1.0, // Adjust this value as needed\n    });\n    ```\n\n3.  **Deploy your application as described above.**\n\n## Example Code Snippets 📋\n\n\n### Navbar Component\n\nHere's a simple example of a responsive Navbar using Tailwind CSS:\n\n  ```jsx\n  import React from 'react';\n\n  const Navbar = () =\u003e {\n    return (\n      \u003cnav className=\"bg-gray-900 text-white p-4\"\u003e\n        \u003cdiv className=\"container mx-auto flex justify-between items-center\"\u003e\n          \u003ca href=\"#\" className=\"text-2xl font-bold\"\u003eApple Clone\u003c/a\u003e\n          \u003cul className=\"flex space-x-4\"\u003e\n            \u003cli\u003e\u003ca href=\"#hero\" className=\"hover:underline\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#features\" className=\"hover:underline\"\u003eFeatures\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#contact\" className=\"hover:underline\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/div\u003e\n      \u003c/nav\u003e\n    );\n  };\n\n  export default Navbar;\n  ```\n\n  ### Hero Section with GSAP Animation\n\n  Using GSAP for animations in the Hero section:\n\n  ```jsx\n  import React, { useEffect } from 'react';\n  import { gsap } from 'gsap';\n\n  const HeroSection = () =\u003e {\n    useEffect(() =\u003e {\n      gsap.from(\".hero-title\", { duration: 2, opacity: 0, y: -50 });\n    }, []);\n\n    return (\n      \u003csection className=\"hero bg-blue-500 text-white h-screen flex items-center justify-center\"\u003e\n        \u003ch1 className=\"hero-title text-5xl font-bold\"\u003eWelcome to the Apple Clone\u003c/h1\u003e\n      \u003c/section\u003e\n    );\n  };\n\n  export default HeroSection;\n```\n\n![Screenshot 2024-08-17 011058](https://github.com/user-attachments/assets/ce7d855c-c8df-4aff-8695-2f1a4ec547e8)\n\n## Contributing 🤝\n\n\nWe 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.\n\n## License 📜\n\nThis project is licensed under the MIT License. See the LICENSE file for more details.\n\n## Acknowledgments 🙌\n\n- **[React](https://reactjs.org/)**: For its efficient and powerful UI development capabilities.\n- **[GSAP](https://gsap.com/)**: For its advanced animation capabilities.\n- **[Three.js](https://threejs.org/)**: For enabling interactive 3D graphics.\n- **[Tailwind CSS](https://tailwindcss.com/)**: For its utility-first approach to CSS design.\n- **[Sentry](https://sentry.io/)**: For providing robust error tracking and performance monitoring.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslygriyrsk%2Fapple-web-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslygriyrsk%2Fapple-web-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslygriyrsk%2Fapple-web-clone/lists"}