Basic Requirements for our GenZ Carousel App

Before we start building the Image Carousel app together, it’s important to make sure your development environment is properly set up. This module will help you prepare by installing the required tools and understanding the technology stack we used to build the app.

Basic Requirements

To develop, run, and deploy the Gen-Z Image Carousel App smoothly, you’ll need the following:

Node.js allows us to run JavaScript outside the browser. It also comes with npm (Node Package Manager), which we use to install dependencies like React, Vite, and Framer Motion.

1. Node.js and npm

To verify if you have them installed, open your terminal or command prompt and run:

node -v

npm -v

2. Visual Studio Code (VS Code)

VS Code is a code editor where you’ll write and manage your project files. It includes built-in support for JavaScript, React, and live preview features.

You can download it from https://code.visualstudio.com.

3. Modern Web Browser

Use any up-to-date browser like Chrome, Firefox, Edge, or Safari to test and view your app. These support modern JavaScript and styling features.

4. Git (Optional)

Git helps track changes to your project and is useful if you want to store or share your code on GitHub.

To check if Git is installed:

git --version

If not, you can install it from https://git-scm.com.

5. Netlify Account

Once the app is complete, we’ll deploy it on Netlify—a free and beginner-friendly hosting service.

Create an account at https://www.netlify.com and you’ll be ready to publish your app online.

Tech Stack Used

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.

Input

Our app accepts user input in the form of uploaded images:

• Users can upload up to 10 images at once.
• Only image file types are allowed (JPG, JPEG, PNG, etc.).
• The uploaded images are previewed in the carousel using object URLs created with URL.createObjectURL.

If no images are uploaded, three default images are displayed from the /public/carousel folder.

Output

Once images are uploaded, the app dynamically:

• Displays the images one by one inside a large bordered container
• Allows navigation using left and right arrows
• Shows clickable thumbnails for quick navigation
• Displays smooth transitions when switching slides

Everything is styled using the same colors, fonts, and layouts defined in the original design. This helps retain a consistent look, even when the content changes based on user input.