How to Create a CAGR Calculator Web App Using Next.js, Express.js, and Node.js

How to Create a CAGR Calculator Web App Using Next.js, Express.js, and Node.js

To make a CAGR (Compound Annual Growth Rate) calculator web app, you need to work on both the frontend (using Next.js) and the backend (using Express.js). Here's a step-by-step guide on how to do it:

Frontend (Next.js):

1. Create a new Next.js app:

npx create-next-app cagr-calculator-frontend
cd cagr-calculator-frontend

2. Create a CAGR calculator component:

Create a new file called CagrCalculator.js inside the components directory:

// components/CagrCalculator.js
import { useState } from 'react';

const CagrCalculator = () => {
  const [initialValue, setInitialValue] = useState('');
  const [finalValue, setFinalValue] = useState('');
  const [years, setYears] = useState('');
  const [result, setResult] = useState('');

  const calculateCAGR = () => {
    const initialValueFloat = parseFloat(initialValue);
    const finalValueFloat = parseFloat(finalValue);
    const yearsFloat = parseFloat(years);

    const cagr = (Math.pow(finalValueFloat / initialValueFloat, 1 / yearsFloat) - 1) * 100;
    setResult(cagr.toFixed(2) + '%');
  };

  return (
    <div>
      <div>
        <label>Initial Value:</label>
        <input type="number" value={initialValue} onChange={(e) => setInitialValue(e.target.value)} />
      </div>
      <div>
        <label>Final Value:</label>
        <input type="number" value={finalValue} onChange={(e) => setFinalValue(e.target.value)} />
      </div>
      <div>
        <label>Years:</label>
        <input type="number" value={years} onChange={(e) => setYears(e.target.value)} />
      </div>
      <button onClick={calculateCAGR}>Calculate</button>
      {result && <p>CAGR: {result}</p>}
    </div>
  );
};

export default CagrCalculator;

3. Update the index.js page to use the CagrCalculator component:

Replace the content of pages/index.js with:

// pages/index.js
import CagrCalculator from '../components/CagrCalculator';

export default function Home() {
  return (
    <div>
      <h1>CAGR Calculator</h1>
      <CagrCalculator />
    </div>
  );
}

Backend (Express.js):

1. Create a new Express.js app:

Create a new directory for your backend, then navigate into it and initialize a new npm project:

mkdir cagr-calculator-backend
cd cagr-calculator-backend
npm init -y

2. Install Express.js:

npm install express

3. Create an Express server:

Create a file called server.js:

// server.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(express.json());

app.post('/calculateCAGR', (req, res) => {
  try {
    const { initialValue, finalValue, years } = req.body;
    const initialValueFloat = parseFloat(initialValue);
    const finalValueFloat = parseFloat(finalValue);
    const yearsFloat = parseFloat(years);

    const cagr = (Math.pow(finalValueFloat / initialValueFloat, 1 / yearsFloat) - 1) * 100;
    res.json({ cagr: cagr.toFixed(2) + '%' });
  } catch (error) {
    res.status(400).json({ error: 'Invalid input' });
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

4. Run the Express server:

node server.js

Testing:

Now, start your Next.js app by running npm run dev and go to http://localhost:3000. You will see the CAGR calculator page. Type in the initial value, final value, and how many years. After you click the "Calculate" button, you'll see the calculated CAGR shown under the calculator.

Make sure your Express server is running in another terminal window. When you press the "Calculate" button, the front end sends a POST request to the Express server to figure out the CAGR using the inputs you gave. The server then sends back the CAGR value, and it shows up on the front end.

Did you find this article valuable?

Support LingarajTechhub All About Programming by becoming a sponsor. Any amount is appreciated!