Counter App Requirements & Tech Stack

Before starting development, ensure you have the following tools and environments in place. We will use React (JavaScript) as the main technology, along with Node.js and npm for tooling.

Basic Requirements

• Node.js and npm: You must install Node.js (version ≥ 14) on your machine. This also provides the npm package manager. Create React App requires Node 14 or newer. You can download Node.js from nodejs.org.
• Code Editor: Use a command prompt or IDE for coding (e.g., VSCode, Sublime, Atom).
• Web Browser: A modern browser (Chrome, Firefox, Edge, etc.) to run and test the app.
• (Optional) Git: To push your project to GitHub, ensure Git is installed.
• Basic knowledge of HTML/CSS/JavaScript: Since React uses JS and JSX, you should be comfortable with JavaScript fundamentals and basic web markup.

Tech Stack Used

• React – the core front-end library (v16+ or v18) for building the app’s UI.
• Create React App (CRA) – a tool to bootstrap the React project with zero configuration. We will use create-react-app to set up the initial codebase.
• JavaScript (ES6+) – for writing component logic (using modern syntax like imports, arrow functions, etc.).
• HTML/CSS – for the structure and styling of the app.
• Netlify – a cloud platform for hosting the built application. We’ll push our code to GitHub and connect it to Netlify for continuous deployment.

Input

In this app, the input comes from user actions (mouse clicks on buttons). There are three buttons in the UI, but no text fields or form inputs. Each button has an onClick event handler that updates the app state. In other words, the only “input” is the user clicking Increment, Decrement, or Reset.

Output

The output is the number displayed on the screen (the counter value) and how it changes when buttons are clicked. Initially, the counter will show 0.

When the user clicks “Increment”, the counter value increases by 1; “Decrement” decreases it by 1; “Reset” sets it back to 0. The page dynamically updates to show the new count.

We will also display some explanatory text (like a title “Counter App”) so the user knows what the app does.