Deployment and Final Touches for the Poll App

Deployment and Final Touches for the Poll App

By now, you’ve built a fully functional Poll App using React and Vite. The app allows users to create polls, vote on options, and instantly see results. You’ve also styled the interface with a clean, modern UI that makes interaction smooth and engaging.

The final step is to share your project online so others can use it. In this module, we’ll cover pushing your code to GitHub, deploying the app with Netlify, and reviewing the project’s file structure one last time.

1) Pushing Your App to GitHub

Before deployment, it’s best practice to store your code safely in a GitHub repository. This also makes it easier to share and connect with deployment services.

Step 1: Initialize Git

Open your terminal inside the project root (where package.json is) and run:

git init

git add .

git commit -m "Initial commit for Poll App"

Step 2: Create a GitHub Repository

  1. Log in to your GitHub account.
  2. Click the + icon → New repository.
  3. Name it something like react-poll-app.
  4. Leave it empty (don’t add README, .gitignore, or license).
  5. Click Create repository.

Step 3: Push Your Project

Back in your terminal, connect the repo and push:

git branch -M main

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

git push -u origin main

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

git config --global user.email "[email protected]"

Now your Poll App’s source code is live on GitHub.

2) Deploying to Netlify

Once the code is on GitHub, deploying the app online is quick with Netlify.

Step 1: Build the Project

Run the following command to create a production-ready build:

npm run build

This generates a dist/ folder containing the optimized version of your app.

Step 2: Set Up Netlify

  1. Go to Netlify and log in (or sign up).
  2. Click Add New Site → Import an Existing Project.

Step 3: Connect GitHub

  1. Authorize Netlify to access your GitHub repositories.
  2. Select your react-poll-app repo.

Step 4: Configure Build Settings

Use the following settings:

  • Build Command: npm run build
  • Publish Directory: dist

Click Deploy Site.

After a few moments, Netlify will give you a live link, e.g.:

https://my-poll-app.netlify.app/

You can change this link by going to Site Settings → Change Site Name.

Your Poll App is now live and ready to share!