Skip to content

sanidhyy/apple-clone

Repository files navigation

Modern iPhone 15 inspired website using Three.js and GSAP animations.

Modern iPhone 15 inspired website using Three.js and GSAP animations.

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits GitHub issues GitHub pull requests Netlify Status

πŸ“” Table of Contents

‼️ Folder Structure

Here is the folder structure of this app.

apple-clone/
  |- public/
    |-- assets/
    |-- models/
    |-- apple-icon.png
    |-- favicon.ico
    |-- favicon1.png
    |-- favicon2.png
  |- src/
    |-- assets/
        |--- index.js
    |-- components/
        |--- Features.jsx
        |--- Footer.jsx
        |--- Hero.jsx
        |--- Highlights.jsx
        |--- HowItWorks.jsx
        |--- IPhone.jsx
        |--- Lights.jsx
        |--- Loader.jsx
        |--- Model.jsx
        |--- ModelView.jsx
        |--- Navbar.jsx
        |--- VideoCarousel.jsx
    |-- constants/
        |--- index.js
    |-- utils/
        |--- animations.js
    |-- App.css
    |-- App.jsx
    |-- index.css
    |-- main.jsx
  |- .eslintrc.json
  |- .gitignore
  |- index.html
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.js
  |- vite.config.js

🧰 Getting Started

  1. Make sure Git and NodeJS is installed.
  2. Clone this repository to your local computer.
  3. Install project dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps
  4. Now app is fully configured πŸ‘ and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

πŸ“· Screenshots

Modern UI/UX

Interactive Design

3D iPhone Models

Modern Animations

βš™οΈ Tech Stack

React JS Vite JS Javascript Tailwind CSS Netlify

πŸ”§ Stats

Stats for Apple Clone

πŸ™Œ Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

πŸ’Ž Acknowledgements

Useful resources and dependencies that are used in Apple Clone.

β˜• Buy Me a Coffee

πŸš€ Follow Me

Follow Me Tweet about this project Subscribe to my YouTube Channel

πŸ“š Learn More

To deepen your understanding of React.js and Netlify, explore the following resources:

For Netlify-specific information:

You're encouraged to contribute and provide feedback on Netlify's GitHub repository.

πŸ“ƒ Deploy on Netlify

The simplest way to deploy your React.js app is to use the Netlify Platform - a powerful platform for modern web projects.

Explore the Netlify deployment documentation for step-by-step instructions on deploying your React.js app on Netlify.

Happy coding, and feel free to share your thoughts and improvements with the Netlify community!

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

Star History Chart

(back to top)