Tech Stack Used for the Carousel App

Here’s a breakdown of all the technologies used to build the carousel:

1. React.js (with Vite): React is a JavaScript library for building interactive user interfaces using reusable components. We use Vite as our build tool because it is much faster and easier to set up than older tools like Create React App.

We write all of our app’s logic using modern JavaScript features like:

• Arrow functions
• Destructuring
• Template literals
• Event handling
• Array methods like map

These make the code cleaner and easier to manage.

2. HTML and CSS: The app structure is made with HTML elements inside JSX (React’s HTML-like syntax), while styling is done through custom CSS.

We use:

• A black background for a sleek modern look
• Cyan-blue accent colors for borders, buttons, and titles
• Smooth transitions and animations for better interactivity
• Custom fonts via Google Fonts

All of this comes together to create a fun, Gen-Z themed user interface.

3. Framer Motion

This library powers our carousel’s animations. It makes image transitions smooth when switching between slides.

We use:

• motion.img for animated images
• AnimatePresence for smooth slide-in and slide-out effects

4. Node.js and npm

Besides running the app locally, npm is used to install all our third-party packages like React, Framer Motion, and Vite.

5. Netlify

Once the app is ready, we use Netlify for deployment. It’s perfect for React apps and supports drag-and-drop or Git-based deployments.