Build a Simple Tip Calculator App with Next.js: A Beginner’s Guide

Written by

FixTechToday

in

In the digital age, understanding how to build web applications is a valuable skill. Among the many frameworks available, Next.js has gained significant popularity for its ease of use, performance benefits, and flexibility. This guide will walk you through creating a simple yet practical project: a tip calculator app using Next.js. This project is ideal for beginners to intermediate developers, as it covers fundamental concepts like component creation, state management, and basic styling. By the end, you’ll have a functional app and a solid understanding of Next.js fundamentals.

Why Build a Tip Calculator?

A tip calculator might seem like a simple project, but it serves as an excellent learning tool. It allows you to grasp the core concepts of web development without getting overwhelmed by complex features. Here’s why building a tip calculator is a great starting point:

  • Practical Application: Everyone encounters situations where they need to calculate a tip. Your app will be useful!
  • Core Concepts: You’ll learn about handling user input, performing calculations, and displaying results.
  • Component-Based Architecture: You’ll practice creating and structuring components, a cornerstone of React and Next.js.
  • State Management: You’ll understand how to manage and update the app’s data.
  • Styling: You’ll get hands-on experience with styling your app to make it visually appealing.

This project will provide a solid foundation for more complex web development projects.

Prerequisites

Before we dive in, ensure you have the following:

  • Node.js and npm (or yarn): These are essential for running and managing your Next.js project. Download and install them from the official Node.js website.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent support for JavaScript and React.
  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these languages will make understanding the concepts much easier.

Setting Up the Next.js Project

Let’s get started by creating our Next.js project. Open your terminal and run the following command:

npx create-next-app tip-calculator-app

This command will create a new directory named “tip-calculator-app” with all the necessary files for a Next.js project. Navigate into this directory:

cd tip-calculator-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. This confirms that your project is set up correctly.

Project Structure

Before we start coding, let’s briefly look at the project structure. The key files we’ll be working with are:

  • pages/index.js: This is the main page of your application. All the code for our tip calculator will reside here.
  • styles/globals.css: This file contains global styles for your application.
  • package.json: This file lists all the dependencies and scripts for your project.

Building the Tip Calculator Components

We’ll break down the tip calculator into logical components to make our code more organized and maintainable. We will create two main components:

  • Input Fields: Where users enter the bill amount, tip percentage, and number of people.
  • Output Display: Where the calculated tip amount and total per person are shown.

1. Input Fields Component

Let’s start by modifying the `pages/index.js` file. Replace the existing code with the following:

import { useState } from 'react';

export default function Home() {
  const [billAmount, setBillAmount] = useState('');
  const [tipPercentage, setTipPercentage] = useState(15);
  const [numberOfPeople, setNumberOfPeople] = useState(1);
  const [tipAmount, setTipAmount] = useState(0);
  const [totalPerPerson, setTotalPerPerson] = useState(0);

  const calculateTip = () => {
    const bill = parseFloat(billAmount);
    const tip = parseFloat(tipPercentage) / 100;
    const people = parseInt(numberOfPeople);

    if (isNaN(bill) || isNaN(tip) || isNaN(people) || bill <= 0 || people  setBillAmount(e.target.value)}
        />
      </div>

      <div className="input-group">
        <label htmlFor="tipPercentage">Tip Percentage:</label>
        <input
          type="number"
          id="tipPercentage"
          value={tipPercentage}
          onChange={(e) => setTipPercentage(e.target.value)}
        />
      </div>

      <div className="input-group">
        <label htmlFor="numberOfPeople">Number of People:</label>
        <input
          type="number"
          id="numberOfPeople"
          value={numberOfPeople}
          onChange={(e) => setNumberOfPeople(e.target.value)}
        />
      </div>

      <button onClick={calculateTip}>Calculate</button>

      <div className="output-group">
        <p>Tip Amount: ${tipAmount.toFixed(2)}</p>
        <p>Total Per Person: ${totalPerPerson.toFixed(2)}</p>
      </div>
    </div>
  );
}

Let’s break down this code:

  • Importing `useState`: We import the `useState` hook from React. This hook allows us to manage the state of our component (the values of the input fields and the calculated results).
  • State Variables: We declare several state variables using `useState`:
    • `billAmount`: Stores the bill amount entered by the user. Initialized to an empty string.
    • `tipPercentage`: Stores the tip percentage. Initialized to 15 (%).
    • `numberOfPeople`: Stores the number of people splitting the bill. Initialized to 1.
    • `tipAmount`: Stores the calculated tip amount. Initialized to 0.
    • `totalPerPerson`: Stores the calculated total per person. Initialized to 0.
  • `calculateTip` Function: This function is triggered when the “Calculate” button is clicked. It does the following:
    • Gets the values from the input fields.
    • Parses the values to numbers using `parseFloat` and `parseInt`.
    • Validates the input to ensure numbers are valid and positive. If not, it resets the tip amount and total per person to 0.
    • Calculates the tip amount, total bill, and amount per person.
    • Updates the `tipAmount` and `totalPerPerson` state variables with the calculated results.
  • JSX Structure: The return statement contains the JSX (JavaScript XML) that defines the structure of our component.
    • A `div` with class “container” acts as the main container for the entire calculator.
    • An `h1` heading for the title.
    • Three input fields for bill amount, tip percentage, and number of people. Each input field has:
      • A `label` to describe the input.
      • An `input` element of type “number” to accept numeric input.
      • The `value` attribute, which is bound to the corresponding state variable.
      • The `onChange` event handler, which updates the state variable when the input value changes.
    • A “Calculate” button that triggers the `calculateTip` function when clicked.
    • An output section that displays the calculated tip amount and the total per person.

2. Output Display Component

The output display component is already integrated within the `pages/index.js` file. It displays the calculated tip amount and total per person. We are using the `toFixed(2)` method to format the numbers to two decimal places for a cleaner look.

3. Styling the App

To make the app look better, let’s add some basic styling. Open `styles/globals.css` and add the following CSS:

/* styles/globals.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: center;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
  text-align: left;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}

button:hover {
  background-color: #45a049;
}

.output-group {
  margin-top: 20px;
  font-weight: bold;
}

This CSS provides basic styling for the container, headings, input fields, and the button. It centers the calculator on the page, adds some padding, and improves the overall visual appeal.

Running and Testing the App

Save the changes to `pages/index.js` and `styles/globals.css`. Your Next.js development server should automatically update the app in your browser. If not, refresh the page.

Now, test your tip calculator:

  1. Enter a bill amount.
  2. Enter a tip percentage.
  3. Enter the number of people.
  4. Click the “Calculate” button.

You should see the calculated tip amount and the total amount per person displayed below the button. Try different values to ensure it’s working correctly.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Input Types: Make sure your input fields are of type “number”. This ensures that the browser provides number input controls.
  • Missing or Incorrect State Updates: Double-check that you’re correctly updating the state variables using the `set…` functions (e.g., `setBillAmount`).
  • Incorrect Calculations: Carefully review your calculation logic in the `calculateTip` function. Ensure you’re converting the input values to the correct data types (using `parseFloat` and `parseInt`) and that the calculations are accurate.
  • CSS Issues: If the styling isn’t working as expected, check your CSS file for any syntax errors or incorrect class names. Also, ensure you haven’t overridden any styles from other sources.
  • Browser Caching: Sometimes, your browser may cache an older version of your code. Try clearing your browser’s cache or hard-refreshing the page (Ctrl + Shift + R or Cmd + Shift + R) to ensure you’re seeing the latest changes.
  • Console Errors: Open your browser’s developer console (usually by pressing F12) to check for any JavaScript errors. These errors can provide valuable clues about what’s going wrong.

Enhancements and Next Steps

Once you’ve built this basic tip calculator, consider adding these features to enhance it:

  • Tip Percentage Buttons: Add buttons for common tip percentages (e.g., 10%, 15%, 20%) to make it easier for users to select a tip.
  • Error Handling: Improve error handling to provide more user-friendly messages when invalid input is entered. For example, display a message if the bill amount is negative.
  • Customization Options: Allow users to customize the currency symbol or the number of decimal places for the output.
  • Accessibility: Ensure the app is accessible to users with disabilities by adding appropriate ARIA attributes.
  • Mobile Responsiveness: Make the app responsive so it looks good on different screen sizes.
  • Use a Component Library: Integrate a component library like Material UI or Ant Design for a more polished UI.

Key Takeaways

In this tutorial, you’ve learned how to create a simple tip calculator app using Next.js. You’ve gained experience with:

  • Setting up a Next.js project.
  • Creating and structuring components.
  • Managing state with the `useState` hook.
  • Handling user input.
  • Performing calculations.
  • Basic styling with CSS.

This project is a great starting point for learning Next.js and web development fundamentals. By building this app, you’ve taken your first steps toward becoming a more proficient web developer. Keep practicing, experimenting, and building more projects to enhance your skills. The more you code, the better you’ll become!

FAQ

Q: What is Next.js?

A: Next.js is a React framework for production. It enables features like server-side rendering and static site generation, making it ideal for building performant and SEO-friendly web applications.

Q: Why use `useState`?

A: The `useState` hook is used to manage the state of a React component. It allows the component to re-render whenever the state changes, updating the UI with the new data.

Q: How do I deploy my Next.js app?

A: You can deploy your Next.js app to various platforms, including Vercel (which is recommended, as it’s built by the creators of Next.js), Netlify, and other cloud providers. The deployment process generally involves pushing your code to a repository and configuring the platform to build and deploy your application.

Q: How can I improve the app’s performance?

A: Next.js provides several performance optimizations, such as code splitting, image optimization, and static site generation. You can also optimize your code by using memoization and minimizing unnecessary re-renders.

Building this tip calculator is just the beginning. The world of web development is vast and constantly evolving. Embrace the learning process, explore new technologies, and never stop experimenting. Your journey as a developer is a continuous process of learning, building, and refining your skills. With each project, you’ll gain valuable experience and become more confident in your ability to create amazing web applications. The possibilities are endless; all you need is curiosity and the willingness to learn.

More posts