TypeScript Tutorial: Building a Simple Interactive Web-Based Recipe App

Written by

learnmodernjavascript

in

Are you a food enthusiast who loves to cook and wants to build a web application to manage your favorite recipes? Or perhaps you’re a developer looking for a practical project to learn TypeScript and enhance your skills? In this tutorial, we’ll walk through the process of creating a simple, interactive web-based recipe application using TypeScript. We’ll cover everything from setting up your development environment to building the core features, including adding, viewing, and editing recipes. This project will not only teach you the fundamentals of TypeScript but also provide you with a hands-on experience of building a functional web application.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to your JavaScript code. This means you can catch errors during development, before your code runs in the browser, leading to more robust and maintainable applications. Here’s why TypeScript is a great choice for this project and for web development in general:

  • Improved Code Quality: Static typing helps you avoid common JavaScript errors, such as type mismatches, leading to cleaner and more reliable code.
  • Enhanced Developer Experience: TypeScript provides features like autocompletion, refactoring, and better tooling support, making development faster and more enjoyable.
  • Scalability: TypeScript code is easier to understand and maintain, making it ideal for larger projects that can be easily scaled up.
  • Compatibility: TypeScript is a superset of JavaScript, so you can integrate it seamlessly into your existing JavaScript projects.

Project Setup

Before we start coding, let’s set up our development environment. You’ll need:

  • Node.js and npm (Node Package Manager): Used to install TypeScript and manage project dependencies.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support.

Follow these steps to set up your project:

  1. Create a Project Directory: Create a new directory for your project (e.g., `recipe-app`) and navigate into it using your terminal.
  2. Initialize npm: Run `npm init -y` in your terminal. This creates a `package.json` file, which manages your project’s dependencies.
  3. Install TypeScript: Run `npm install typescript –save-dev`. This installs TypeScript as a development dependency.
  4. Initialize TypeScript: Run `npx tsc –init`. This creates a `tsconfig.json` file, which configures TypeScript’s compiler options.
  5. Create Source Files: Create a directory called `src` where you’ll put your TypeScript files (e.g., `src/index.ts`).
  6. Create HTML file: Create an `index.html` file in the root of your project.

Your directory structure should look something like this:

recipe-app/
├── index.html
├── package.json
├── tsconfig.json
└── src/
    └── index.ts

HTML Setup

Let’s set up the basic HTML structure for our recipe app. Open `index.html` and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
        <h1>My Recipes</h1>
        <div id="recipe-list"></div>
        <button id="add-recipe-button">Add Recipe</button>
    </div>
    <script src="./dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure for our app, including a title, a container for the recipe list, and a button to add new recipes. We’ve also linked a stylesheet (`style.css`) for styling and a JavaScript file (`./dist/index.js`) which we’ll compile from our TypeScript code.

CSS Styling

Create a `style.css` file in the root of your project and add some basic styling to make the app look presentable. Here’s an example:

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

#app {
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

#recipe-list {
    margin-bottom: 20px;
}

.recipe-item {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3e8e41;
}

This CSS provides basic styling for the app, including the layout, typography, and button appearance. You can customize the styles to match your preferences.

TypeScript Implementation

Now, let’s dive into the TypeScript code. Open `src/index.ts` and start by defining the data structure for our recipes:


// Define a type for a recipe
interface Recipe {
    id: number;
    name: string;
    ingredients: string[];
    instructions: string;
}

// Initialize an array to store recipes
let recipes: Recipe[] = [];

Here, we define an interface `Recipe` with properties for `id`, `name`, `ingredients`, and `instructions`. We also initialize an array `recipes` to hold our recipe data. Next, let’s add some functions to handle recipe operations:


// Function to add a new recipe
function addRecipe(recipe: Recipe): void {
    recipe.id = recipes.length + 1;
    recipes.push(recipe);
    renderRecipes();
}

// Function to delete a recipe
function deleteRecipe(id: number): void {
    recipes = recipes.filter(recipe => recipe.id !== id);
    renderRecipes();
}

// Function to edit a recipe
function editRecipe(id: number, updatedRecipe: Partial<Recipe>): void {
    const index = recipes.findIndex(recipe => recipe.id === id);
    if (index !== -1) {
        recipes[index] = { ...recipes[index], ...updatedRecipe };
        renderRecipes();
    }
}

These functions handle adding, deleting, and editing recipes. The `addRecipe` function adds a new recipe to the `recipes` array, assigns a unique ID, and calls the `renderRecipes` function to update the UI. The `deleteRecipe` function removes a recipe by its ID. The `editRecipe` function finds a recipe by its ID and updates it with the provided changes. The `Partial<Recipe>` type allows for partial updates. Now, let’s create a function to render the recipes in the UI:


// Function to render recipes in the UI
function renderRecipes(): void {
    const recipeList = document.getElementById('recipe-list') as HTMLDivElement;
    if (!recipeList) return;

    recipeList.innerHTML = ''; // Clear the list

    recipes.forEach(recipe => {
        const recipeItem = document.createElement('div');
        recipeItem.classList.add('recipe-item');
        recipeItem.innerHTML = `
            <h3>${recipe.name}</h3>
            <p><b>Ingredients:</b> ${recipe.ingredients.join(', ')}</p>
            <p><b>Instructions:</b> ${recipe.instructions}</p>
            <button class="edit-button" data-id="${recipe.id}">Edit</button>
            <button class="delete-button" data-id="${recipe.id}">Delete</button>
        `;
        recipeList.appendChild(recipeItem);

        // Add event listeners for edit and delete buttons
        const editButton = recipeItem.querySelector('.edit-button') as HTMLButtonElement;
        const deleteButton = recipeItem.querySelector('.delete-button') as HTMLButtonElement;

        if (editButton) {
            editButton.addEventListener('click', () => {
                // Implement edit functionality here
                const updatedName = prompt('Enter new recipe name:', recipe.name) || recipe.name;
                const updatedIngredients = prompt('Enter new ingredients (comma-separated):', recipe.ingredients.join(', '))?.split(',') || recipe.ingredients;
                const updatedInstructions = prompt('Enter new instructions:', recipe.instructions) || recipe.instructions;

                editRecipe(recipe.id, {
                    name: updatedName,
                    ingredients: updatedIngredients,
                    instructions: updatedInstructions
                });
            });
        }

        if (deleteButton) {
            deleteButton.addEventListener('click', () => {
                deleteRecipe(recipe.id);
            });
        }
    });
}

The `renderRecipes` function clears the existing recipe list and then iterates through the `recipes` array, creating HTML elements for each recipe. It also adds event listeners for the edit and delete buttons. The edit button uses prompts for simplicity, and you could replace these with a more sophisticated form. The delete button calls the `deleteRecipe` function. Next, let’s add the functionality to add new recipes:


// Function to open the add recipe form
function openAddRecipeForm(): void {
    const recipeName = prompt('Enter recipe name:') || '';
    const ingredientsInput = prompt('Enter ingredients (comma-separated):') || '';
    const instructionsInput = prompt('Enter instructions:') || '';

    if (recipeName && ingredientsInput && instructionsInput) {
        const ingredients = ingredientsInput.split(',').map(ingredient => ingredient.trim());
        const newRecipe: Recipe = {
            id: 0, // ID will be assigned in addRecipe
            name: recipeName,
            ingredients: ingredients,
            instructions: instructionsInput
        };
        addRecipe(newRecipe);
    }
}

This function uses `prompt` to get user input for recipe details and then calls the `addRecipe` function to add the new recipe to the list. The input is validated to ensure that all fields are filled. Let’s add an event listener to the “Add Recipe” button in our HTML to trigger this form:


// Event listener for the add recipe button
const addRecipeButton = document.getElementById('add-recipe-button') as HTMLButtonElement;
if (addRecipeButton) {
    addRecipeButton.addEventListener('click', openAddRecipeForm);
}

// Initial render
renderRecipes();

This code gets the “Add Recipe” button from the HTML and adds an event listener that calls the `openAddRecipeForm` function when clicked. The `renderRecipes()` function is called initially to display any pre-existing recipes. Finally, let’s compile the TypeScript code. In your terminal, run `tsc` (or `npx tsc` if you installed TypeScript locally). This will generate a `index.js` file in a `dist` folder. Now, open `index.html` in your browser. You should see the basic app structure. You can add recipes using the “Add Recipe” button, and view them. You can also edit and delete recipes.

Common Mistakes and How to Fix Them

When working with TypeScript, developers often encounter common pitfalls. Here’s a look at some of these, along with solutions:

  • Type Errors: TypeScript’s static typing can sometimes throw errors during development.
    • Mistake: Trying to assign a value of the wrong type to a variable.
    • Fix: Carefully check the types of your variables and ensure they match the expected types. Use type annotations (e.g., `let myVar: string = 123;`) to explicitly define the types.
  • Null or Undefined Errors: These errors can occur if you try to access a property of a variable that is null or undefined.
    • Mistake: Not checking if a variable is null or undefined before accessing its properties.
    • Fix: Use optional chaining (`?.`) and nullish coalescing operators (`??`) to handle potentially null or undefined values. For example: `const name = user?.name ?? ‘Guest’;`
  • Incorrect Module Imports: Issues with importing modules can lead to errors.
    • Mistake: Incorrectly importing modules or not having the correct module resolution settings.
    • Fix: Double-check your import statements and ensure the file paths are correct. Verify that your `tsconfig.json` file is configured correctly for module resolution.
  • Incorrect DOM Manipulation: Problems can arise when interacting with the Document Object Model (DOM).
    • Mistake: Not correctly casting DOM elements when accessing or modifying them.
    • Fix: Use type assertions (e.g., `const element = document.getElementById(‘myElement’) as HTMLDivElement;`) to specify the correct types for DOM elements.
  • Compiler Configuration Issues: Problems can also stem from incorrect settings in your `tsconfig.json` file.
    • Mistake: Not setting the correct compiler options for your project.
    • Fix: Review your `tsconfig.json` file and make sure it’s configured for your project’s needs. Pay attention to settings such as `target`, `module`, and `strict`.

Key Takeaways

In this tutorial, we’ve walked through the process of building a simple interactive web-based recipe app using TypeScript. We’ve covered the following key aspects:

  • Setting up the Development Environment: We’ve learned how to set up Node.js, npm, and TypeScript in order to prepare for the project.
  • Defining Data Structures: We created a `Recipe` interface to define the structure for our recipe data.
  • Implementing Core Functionality: We implemented functions to add, delete, and edit recipes, as well as render the recipes in the UI.
  • Adding Event Listeners: We added event listeners to handle user interactions, such as adding, editing, and deleting recipes.
  • Handling User Input: We used `prompt` to get user input for recipes.
  • Compiling TypeScript: We learned how to compile TypeScript code using the `tsc` command.

FAQ

Here are some frequently asked questions about building a recipe app with TypeScript:

  1. Can I store the recipes in local storage?
    Yes, you can easily store recipes in the browser’s local storage. This way, the recipes persist even when the user closes the browser. You’ll need to use the `localStorage` API to save and retrieve the recipe data. For example, before calling `renderRecipes()`, load the data from `localStorage`. In the `addRecipe()` function, store the updated recipes in `localStorage`.
  2. How can I improve the user interface?
    You can improve the UI using CSS frameworks like Bootstrap or Tailwind CSS. These frameworks provide pre-built components and styling options to create a more polished and responsive design. You can also use a UI library such as React, Angular, or Vue.js for a more complex and dynamic user experience.
  3. How can I add more features to my recipe app?
    You can add many more features, such as the ability to search for recipes, filter recipes by ingredients, add images, and implement a user authentication system. You can also integrate with a third-party API to fetch recipe data from external sources.
  4. How can I deploy my recipe app?
    You can deploy your recipe app to platforms like Netlify, Vercel, or GitHub Pages. These platforms allow you to deploy static websites for free. You’ll need to build your TypeScript code into a production-ready JavaScript bundle before deploying.

By following this tutorial, you’ve gained a solid foundation in building web applications with TypeScript. You can now expand on this project by adding more features and improving the user interface. Remember to practice and experiment with different concepts to deepen your understanding of TypeScript and web development.

This recipe app is just a starting point. Feel free to experiment with different features, such as adding search functionality, incorporating images, and improving the user interface. The beauty of web development lies in its iterative nature – keep building, keep learning, and keep refining your skills. With each project, you’ll gain valuable experience and become more proficient in TypeScript and web development. Continue to explore, experiment, and enjoy the process of creating functional and engaging web applications. Your journey into the world of web development will be filled with new discoveries and exciting opportunities. Embrace the challenges, celebrate the successes, and always strive to enhance your abilities. The world of web development is constantly evolving, so stay curious, keep learning, and enjoy the ride.

More posts