Setting up the Environment for our Carousel App

In this module, we will build the complete Gen-Z styled Image Carousel App from scratch using React + Vite. We'll walk through the project setup, structure, logic, animation with Framer Motion, and final styling using Tailwind CSS. You’ll follow along and build your own version just like the live app.

1) Install Node.js
First, make sure you have Node.js and npm installed. Download it from https://nodejs.org and verify:

node -v

npm -v

2) Create a React App with Vite

Open your terminal and run the following to scaffold a new React + Vite project:

npm create vite@latest genz-carousel-app -- --template react

Then:

cd genz-carousel-app

npm install

3) Start the App

Run the development server:

npm run dev

It will open at http://localhost:5173. You’ll see the default Vite + React template.