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:
- ReactJS-Vite: Provides a fast and modern development environment for building React applications with improved performance and development experience.
- 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.
- TailwindCSS: A utility-first CSS framework that provides a highly customizable and responsive design system for styling the application.
- Framer Motion: A library for creating smooth and complex animations, providing an enhanced user experience with dynamic motion.
- emailjs: A library used to send emails directly from the client-side application, enabling easy and efficient email communication.
- 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:
- npm install
- npm run dev
- 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" }