Deployment of the Project

You’ve successfully built a fully functional image carousel app using React and Vite. Your users can now upload their own images, view them in a beautiful, animated carousel, and interact with navigation buttons and thumbnails. By the end of this module, your carousel app will be live on the web and ready to share.

Uploading Your Carousel App to GitHub

We'll start by uploading our local project to GitHub so it's safely stored and easily deployable.

Step 1: Initialize Git in Your Project

Open your terminal in the root folder of your carousel app (where package.json exists), and run:

git init

git add .

git commit -m "Initial commit"

Step 2: Create a GitHub Repository

1. Go to GitHub.com
2. Click the "+" icon → New repository
3. Name it something like carousel-app-react
4. Do not select README or .gitignore (leave it empty)
5. Click Create repository

Step 3: Push Local Code to GitHub

Back in your terminal, push your code to the new repository:

git branch -M main

git remote add origin https://github.com/your-username/carousel-app-react.git

git push -u origin main

If it’s your first time pushing to GitHub, configure your credentials:

git config --global user.name "Your Name"

git config --global user.email "your@email.com"

After pushing, your complete code will be visible on GitHub.

Deploying to Netlify

Now that your app is stored on GitHub, it's time to deploy it online using Netlify.

Step 1: Build Your App for Production

Use Vite’s build command to generate optimized files:

npm run build

This creates a dist/ folder containing everything Netlify needs to deploy your site.

Step 2: Create a Netlify Account

1. Go to Netlify
2. Sign up or log in with GitHub
3. Click Add new site → Import an existing project

Step 3: Link to Your GitHub Repository

1. Authorize Netlify to access your GitHub
2. Select the carousel-app-react repository you just pushed

Step 4: Configure Deployment Settings

In the setup screen, enter the following:

• Build command: npm run build
• Publish directory: dist

Then click Deploy Site

In a few moments, your app will be live on a temporary URL, such as:

https://your-carousel-site.netlify.app/

You can customize the URL by going to Site Settings → Change Site Name.

You’re Live!

Your carousel app is now fully functional and live on the internet. You’ve gone from building UI and functionality in React to deploying it using modern tools like GitHub and Netlify. Congratulations on completing the carousel app build and deployment!