Tech Stack Used For Temperature Converter

Before diving into code, this lesson ensures you're set up with the right tools. It covers the essential requirements like Node.js and npm, walks through the technologies being used, and explains how inputs and outputs will be handled in the app. It’s all about getting prepared, both technically and conceptually.

Basic Requirements

Before starting, ensure you have the following set up:

• Node.js and npm – Node.js is required to run and build React applications. You can download it from the official site (which includes npm, the Node package manager). Verify the installation by running node -v and npm -v in your terminal.
• Code Editor – Have a code editor like VS Code installed for writing and editing your project code. Or you can also use Command Prompt to execute this project in a simple manner.
• Web Browser – A modern browser (like Chrome or Firefox) to test the application on your local machine.
• Netlify Account – Since we will deploy the app on Netlify, make sure you have an account and are logged in. (The account is free, and the user already has one in this scenario.)

Tech Stack Used

We will use the following technologies and libraries in this project:

• React – A JavaScript library for building the user interface of the app. We will create a React app using Create React App (a comfortable toolchain for new React projects).
• HTML & JSX – We’ll write the structure of our components in JSX, which is a syntax extension of JavaScript that looks similar to HTML and is used in React to describe UI.
• CSS – We will use plain CSS for styling the application’s appearance. No external styling frameworks (like Bootstrap) are needed; we’ll keep the styling simple and include it via a CSS file.
• JavaScript (ES6+) – The conversion logic and React code will be written in modern JavaScript. We’ll take advantage of ES6 features (like arrow functions and let/const) and React’s hooks (like useState) for state management.
• Netlify – A cloud platform for hosting static sites and single-page applications. We will deploy our build output to Netlify, which provides an easy continuous deployment from GitHub and gives us a live URL for the project.

Input

In this Temperature Converter app, the input from the user will consist of:

• A numeric temperature value (which can be an integer or decimal, positive or negative) entered via a text field.
• A choice of the unit of that input value (the “from” unit), selected from a dropdown list of options: Celsius, Fahrenheit, or Kelvin.
• A choice of the target unit to convert into (the “to” unit), selected from another dropdown list of Celsius, Fahrenheit, or Kelvin.

Output

The output of the project is the converted temperature result displayed to the user. Once the user provides the required input and triggers the conversion, the app will show the temperature in the new unit.

For the above example, converting 35 °C to °F would output 95.00 Fahrenheit. We format numerical results to two decimal places for readability (e.g., 95.00 instead of 95) and include the unit for clarity. If the user attempts an invalid conversion (such as selecting the same unit for both “from” and “to”), the app will instead display an error or prompt asking the user to choose different units.