Project: Lighting and Laser Show Application

This project was developed for a company that provides lighting and laser shows for various events, such as concerts and outdoor parties for up to 5000 people. The application was built using the following technologies and tools:

1. Framework and Core

• ReactJS-Vite: Provides a fast and modern development environment for building React applications with improved performance and development experience.

2. 3D Graphics and Animation

• ThreeJS: A powerful 3D graphics library that enables the creation of complex 3D scenes and visual effects.
• React Three Fiber: A React renderer for ThreeJS, allowing the creation and manipulation of 3D graphics within a React application.

3. Styling

• TailwindCSS: A utility-first CSS framework that provides a highly customizable and responsive design system for styling the application.

4. Animations and Motion

• Framer Motion: A library for creating smooth and complex animations, providing an enhanced user experience with dynamic motion.

5. Email Services

• emailjs: A library used to send emails directly from the client-side application, enabling easy and efficient email communication.

6. Interactive Components

• react-tilt: A library for creating interactive tilt effects on elements, enhancing the visual appeal and user interaction.

Each of these technologies plays a crucial role in delivering a modern, dynamic, and visually impressive application tailored for large-scale events.

To start this project:

1. npm install
2. npm run dev
3. If got error for THREE run this: npm install --legacy-peer-deps three

This was in git ignore: .vscode/* !.vscode/extensions.json

colors for vsCode: { "workbench.colorCustomizations": { "activityBar.activeBackground": "#2dd459", "activityBar.background": "#e47635", "activityBar.foreground": "#15202b", "activityBar.inactiveForeground": "#15202b99", "activityBarBadge.background": "#03bbdc", "activityBarBadge.foreground": "#15202b", "commandCenter.border": "#15202b99", "sash.hoverBorder": "#2dd459", "statusBar.background": "#e9fe7d", "statusBar.foreground": "#15202b", "statusBarItem.hoverBackground": "#2dd459", "statusBarItem.remoteBackground": "#2dd459", "statusBarItem.remoteForeground": "#15202b", "titleBar.activeBackground": "#c23197", "titleBar.activeForeground": "#15202b", "titleBar.inactiveBackground": "#e9fe7d99", "titleBar.inactiveForeground": "#15202b99" }, "peacock.color": "#e9fe7d" }