Deployment and Final Touches For Our Form Validation App

By now, you’ve built a complete Form Validation and Hobby Suggestion App in React using Vite. The app allows users to enter their name and interests, validates the input, and then generates hobby suggestions by matching against a dataset stored in hobbies.json. You’ve also styled the app with a clean UI using App.css.

The last step is getting your project online so anyone can try it. In this module, we’ll cover pushing your project to GitHub, deploying it to Netlify, and reviewing how the files fit together.

1) Pushing Your App to GitHub

Before you deploy, your code should be stored in a safe place online. GitHub is the standard choice.

Step 1: Initialize Git
Open a terminal in the root folder of your app (where package.json is). Run:

git init

git add .

git commit -m "Initial commit"

Step 2: Create a GitHub Repository

• Go to GitHub
• Click the + icon → New repository
• Name it something like hobby-form-react
• Keep it empty (no README, .gitignore, or license)
• Click Create repository

Step 3: Push Your Project
Back in your terminal, connect your app to GitHub:

git branch -M main

git remote add origin https://github.com/your-username/hobby-form-react.git

git push -u origin main

If this is your first push, you may need to configure Git:

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

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

After this, your code will appear on GitHub.

2) Deploying to Netlify

Now that your code is on GitHub, let’s make the app live with Netlify.

Step 1: Build the Project
Vite prepares your code for deployment with:

npm run build

This creates a dist/ folder containing the production-ready version of your app.

Step 2: Set Up Netlify

• Go to Netlify
• Sign up for a free account or log in
• Click Add New Site → Import an Existing Project

Step 3: Connect GitHub

• Authorize Netlify to access GitHub
• Select your hobby-form-react repository

Step 4: Configure Build Settings
Use the following settings:

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

Click Deploy Site. Netlify will build and give you a live link like:

https://my-hobby-form.netlify.app/

You can rename it under Site Settings → Change Site Name, for example:

https://jaishree-hobby-suggestions.netlify.app/

Your app is now online.

3) Reviewing the Project Structure

Before we finish, let’s quickly recap how the files in your project come together:

• App.jsx: Main React component that handles state, form validation, and hobby suggestion logic.
• App.css: Styles that control the layout, form design, and suggestion cards.
• hobbies.json: Dataset of hobbies stored in the public/ folder, fetched when the app loads.
• index.html & main.jsx: Boilerplate files created by Vite to bootstrap the React app.
• dist/: Folder generated after npm run build, used by Netlify to serve the live app.

With this, you’ve completed your form validation and hobby suggestion app — fully deployed and ready to share.