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- Make sure Git and NodeJS is installed.
- Clone this repository to your local computer.
- Install project dependencies using
npm install --legacy-peer-depsoryarn install --legacy-peer-deps - Now app is fully configured 👍 and you can start using this app using either one of
npm run devoryarn dev.
NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
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.
Useful resources and dependencies that are used in Apple Clone.
- @gsap/react: ^2.1.0
- @react-three/drei: ^9.102.6
- gsap: ^3.12.5
- react: ^18.2.0
- react-dom: ^18.2.0
- three: ^0.162.0
- @react-three/eslint-plugin: ^0.1.1
- @types/react: ^18.2.67
- @types/react-dom: ^18.2.21
- @vitejs/plugin-react: ^4.2.1
- autoprefixer: ^10.4.18
- eslint: ^8.57.0
- eslint-config-prettier: ^9.1.0
- eslint-config-standard: ^17.1.0
- eslint-plugin-import: ^2.29.1
- eslint-plugin-react: ^7.34.0
- eslint-plugin-react-hooks: ^4.6.0
- eslint-plugin-react-refresh: ^0.4.5
- eslint-plugin-tailwindcss: ^3.15.1
- postcss: ^8.4.36
- prettier: ^3.2.5
- tailwindcss: ^3.4.1
- vite: ^5.1.6
To deepen your understanding of React.js and Netlify, explore the following resources:
- React.js Documentation - delve into React.js features, concepts, and API.
- React Official Tutorial - an interactive tutorial to get hands-on experience with React.
For Netlify-specific information:
- Netlify Documentation - learn about Netlify's features, deployment options, and more.
- Getting Started with Netlify and React - a guide on deploying React applications on Netlify.
You're encouraged to contribute and provide feedback on Netlify's GitHub repository.
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!
You can also give this repository a star to show more people and they can use this repository.