Pre-requisites & Tech Stack Used For Our Form Validation App

Before we begin building the Form Validation App, let’s make sure you have the right tools set up. In this module, you’ll also learn about the technologies used in this project so you understand how everything connects.

Basic Requirements

• Node.js and npm: Install Node.js (version 16 or newer). npm comes bundled with Node.js and is required to install project dependencies. You can download Node.js from nodejs.org. Vite, the tool we used to scaffold this app, requires a modern Node.js version to run correctly.
• Code Editor: Use Visual Studio Code (VSCode). It provides a built-in terminal, React-specific extensions, and IntelliSense for smoother development.
• Web Browser: Any modern browser such as Chrome, Edge, or Firefox will work to run and test the app.
• Git (Optional): If you want to store your code on GitHub or collaborate with others, install Git from git-scm.com.
• Basic Knowledge: You should be comfortable with:
  • HTML, CSS, and JavaScript (ES6 features like arrow functions, array methods, and destructuring).
  • Basic React concepts such as JSX and useState. We’ll also explain new concepts like useEffect as we build.

Tech Stack Used

• React with Vite: React is the JavaScript library used to build our app’s user interface. We used Vite instead of Create React App because it provides a faster development experience and optimized build output.
• JavaScript (ES6+): The app logic is written in modern JavaScript syntax. Features such as arrow functions, array mapping, string splitting, and object destructuring are used to handle form input and generate hobby suggestions.
• HTML and CSS
  • JSX (the HTML-like syntax inside React) is used to structure the form, inputs, and output.
  • Styling is managed in two files: App.css (custom styles for form layout, suggestions box, etc.) and global styles applied from the root.
• Node.js + npm: Node.js runs the development server. npm is used to install dependencies like React, React DOM, and Vite.
• JSON Data (hobbies.json): Instead of hardcoding hobby suggestions, we stored hobby data in a JSON file inside the public folder. The app fetches this file at runtime to generate suggestions dynamically.
• Netlify: After completing the app, we deployed it on Netlify for free hosting. This allows anyone to access the app live through a link.

Input

This app collects input from the user through a simple form:

• Name field: A text input for entering the user’s name.
• Interests field: A text input where users type their interests, separated by commas (e.g., “music, coding, fitness”).
• Submit button: On clicking this button, the form validates input and processes the interests.

React’s onChange event updates state in real-time, while onSubmit handles form submission.

Output

The outputs are dynamically displayed on the screen based on the user’s inputs and the dataset:

• Suggested Hobbies: After submission, the app compares user interests against the tags in hobbies.json. The most relevant hobbies (up to 10) are shown.
• Fallback Message: If no matches are found, the app suggests exploring general hobbies like reading, coding, music, or fitness.
• Instant Updates: Thanks to React’s state system (useState), the output appears instantly without reloading the page.

Clean UI: Suggestions are shown in a styled card below the form, making them easy to read.