Pre-requisites of the Project

Let’s set the stage for development. In this module, we’ll walk through the tools, technologies, and inputs/outputs required to build and run our BMI Calculator.

Basic Requirements

Before starting, ensure you have the following set up:

• Node.js and npm: React development requires Node.js and its package manager npm. Install the latest Node.js from its official website (which comes with npm). You can verify the installation by running node -v and npm -v in a terminal.
• Code Editor: An IDE or text editor like VS Code is recommended for writing and managing your code.
• Web Browser: A modern browser (like Chrome or Firefox) to run and test the application on http://localhost:3000 during development.
• Netlify Account: To deploy the app, sign up for a free account on Netlify. We will use Netlify to host the app online.
• Git and GitHub (optional but recommended): If you plan to deploy via GitHub, you should have Git installed and a GitHub account, so you can push your project code to a repository for Netlify to fetch.

Tech Stack Used For BMI Calculator

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

• React: The core library for building the user interface of our BMI Calculator. We’ll use modern React features like JSX and Hooks (e.g., useState) to manage state.
• JavaScript (ES6+): The programming language for React. We’ll write functional components and arrow functions in modern JavaScript.
• HTML & CSS: JSX allows us to write HTML-like syntax in JavaScript. We will use basic HTML structure in JSX and apply CSS for styling our components (e.g., styling the input fields, button, and result display).
• Create React App: A comfortable React project setup tool. We’ll use create-react-app to bootstrap our project with all necessary configurations.
• Netlify: A cloud platform for deployment. We will build the app for production and deploy it to Netlify, which will host our app and provide a live URL. (Netlify offers easy integration with GitHub for continuous deployment, making the deployment process straightforward)

Input

Our BMI Calculator will take the following inputs from the user:

• Weight – The person’s weight in kilograms. (This will be entered as a number in an input field, e.g., 70 for 70 kg.)
• Height – The person’s height in centimeters. (This will be another numeric input, e.g., 170 for 170 cm.)

Output

The BMI Calculator will produce the following outputs:

• BMI Value: After clicking the calculate button, the app displays the calculated Body Mass Index. The BMI is typically shown to one or two decimal places (for example, 22.5). The formula used is BMI = weight (kg) / [height (m)].
• Weight Category: Based on the BMI value, the app will also display a category or status. The categories are generally defined as:
  • Underweight – for BMI less than 18.5
  • Normal weight – for BMI between 18.5 and 24.9
  • Overweight – for BMI between 25 and 29.9
  • Obese – for BMI 30 or greater.

The app will determine which range the calculated BMI falls into and show the corresponding status. This helps users understand the implication of their BMI number (e.g., a BMI of 28 would show “Overweight”).