Basic Requirements for Random Password Generator

Before diving into the code, we’ll look at what tools and technologies are required. This module covers the basic setup, tech stack overview, and the expected inputs and outputs of our password generator.

Basic Requirements

Before we start, make sure you have the following pre-requisites in place:

• Node.js and npm: Install Node.js (which comes with npm, the Node package manager) on your system. We will use Node and npm to create and run the React application. You can download Node from the official site. After installation, verify by running node -v and npm -v in a terminal.  
• Code Editor: A text editor or Integrated Development Environment (IDE) such as Visual Studio Code is recommended for writing and managing the project code.  
• Basic Web Knowledge: Familiarity with HTML, CSS, and JavaScript. You don’t need to be an expert, but understanding fundamentals will help (e.g., what elements, styles, and functions are).  
• React Basics: No advanced React knowledge is required (we will explain as we go), but knowing what components and states are will help (refer to Module 3 for key concepts).  
• Git and GitHub (optional but recommended): Version control using Git and having a GitHub account will be useful when we deploy the app. We will push our code to a GitHub repository later for Netlify deployment.

Tech Stack Used

In this project, we will use the following technologies and libraries:

• React – The core library for building the user interface. We will bootstrap our project using Create React App (a tool that sets up a React project with minimal configuration).  
• JavaScript (ES6) – The programming language for implementing the password generation logic and React components. We will use modern JS features like hooks, arrow functions, template literals, etc.  
• HTML & CSS – JSX in React lets us write HTML-like syntax in JavaScript, which will eventually render to real HTML in the browser. We will use basic CSS for styling our app (either as an external CSS file or inline styles for simplicity).  
• Node.js & npm – Node.js will run our development server and build toolchain. npm (or yarn) will manage our project dependencies. The Create React App uses Node/npm under the hood.  
• Netlify – A cloud platform for hosting web applications. We will use Netlify to deploy our React app for free, using its integration with GitHub for continuous deployment. Netlify is very easy to use, supporting direct deploy from a Git repo or even drag-and-drop of a build folder.

Input

In our Random Password Generator app, user input will determine how the password is generated. The inputs we plan to include are:

• Password Length: The user can specify the length of the password (e.g., a number between 8 and 32 characters). We’ll provide an input field (number type) for this.  
• Character Type Toggles: The user can choose which sets of characters to include in the password. We will have checkboxes for:
  • Uppercase Letters (A–Z)
  • Lowercase Letters (a–z)
  • Numbers (0–9)
  • Symbols (special characters like !@#$%*&, etc.)
• The user will interact with these inputs to set their desired criteria before generating the password.

These inputs give the user control over the generated password’s composition. For instance, one might exclude symbols if a certain system doesn’t allow them, or set a high length for extra security.

Output

The output of the app is a randomly generated password that meets the criteria provided by the user. Specifically, the app will display:

• Generated Password: Once the user clicks "Generate Password", the random password string appears on screen.  
• Copy to Clipboard Confirmation: We include a "Copy" button next to the password. When clicked, it will copy the password to the user’s clipboard and show a short confirmation message like “Password copied to clipboard!”  
• Dynamic Updates: If the user changes an input (like unchecking "Include Numbers" or changing the length) and regenerates, the output updates accordingly.