TypeScript Tutorial: Building a Simple Web-Based Recipe App

Written by

learnmodernjavascript

in

In today’s digital age, we’re constantly searching for recipes online. Wouldn’t it be great to have a personalized recipe application, accessible from any device? This tutorial will guide you through building a simple, yet functional, web-based recipe app using TypeScript. We’ll cover everything from setting up the project to implementing features like adding, viewing, and organizing recipes. This project is perfect for beginners to intermediate developers looking to deepen their understanding of TypeScript and web application development.

Why Build a Recipe App with TypeScript?

TypeScript offers several advantages that make it an excellent choice for this project:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process, reducing debugging time and improving code quality.
  • Code Readability: TypeScript enhances code readability and maintainability with features like interfaces, classes, and generics.
  • Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, leading to a more productive coding experience.
  • Scalability: TypeScript is designed to handle large-scale projects, making it a good choice even if you plan to expand your recipe app later.

Project Setup: Getting Started

Before we dive into the code, let’s set up our development environment. You’ll need Node.js and npm (or yarn) installed on your machine. If you don’t have them, download and install them from the official Node.js website.

1. Create a Project Directory

Open your terminal or command prompt and create a new directory for your project:

mkdir recipe-app
cd recipe-app

2. Initialize a Node.js Project

Initialize a new Node.js project using npm:

npm init -y

This command creates a package.json file in your project directory.

3. Install TypeScript

Install TypeScript as a development dependency:

npm install --save-dev typescript

4. Initialize a TypeScript Configuration File

Create a tsconfig.json file to configure TypeScript compiler options. Run the following command:

npx tsc --init

This command generates a tsconfig.json file with default settings. You can customize these settings to fit your project’s needs. For this tutorial, we’ll keep the default settings with a few modifications. Open tsconfig.json and modify the following lines:

{
  "compilerOptions": {
    "target": "es5",  // Or "es6", "esnext" depending on your browser support needs
    "module": "commonjs", // Or "esnext", "amd" depending on your module system
    "outDir": "./dist",  // Where compiled JavaScript files will be placed
    "rootDir": "./src",  // Where your TypeScript source files are located
    "strict": true, // Enable strict type checking
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

These settings configure TypeScript to compile your code into JavaScript, specify the output directory, and enable strict type checking.

5. Create Source and Dist Directories

Create two folders inside your project directory: src (for your TypeScript source files) and dist (where the compiled JavaScript files will be outputted). If you have followed the above steps correctly, the `tsconfig.json` file should automatically create the `dist` folder upon the first build.

mkdir src
mkdir dist

Building the Recipe App: Core Concepts

Now, let’s start building the core functionality of our recipe app. We’ll start by defining the data structure for a recipe and then create components to manage and display recipes.

1. Define the Recipe Interface

Create a file named src/recipe.ts and define an interface to represent a recipe:

// src/recipe.ts
interface Ingredient {
  name: string;
  amount: string;
}

interface Recipe {
  id: number;
  name: string;
  description: string;
  ingredients: Ingredient[];
  instructions: string[];
}

export default Recipe;

This interface defines the structure of a recipe, including its ID, name, description, ingredients, and instructions. The Ingredient interface is nested within the Recipe interface to represent the structure of each ingredient.

2. Create a Recipe Manager Class

Create a file named src/recipeManager.ts to manage recipes. This class will handle adding, retrieving, and updating recipes.


// src/recipeManager.ts
import Recipe from './recipe';

class RecipeManager {
  private recipes: Recipe[] = [];
  private nextId: number = 1;

  addRecipe(recipe: Omit<Recipe, 'id'>): Recipe {
    const newRecipe: Recipe = {
      id: this.nextId++,
      ...recipe,
    };
    this.recipes.push(newRecipe);
    return newRecipe;
  }

  getRecipe(id: number): Recipe | undefined {
    return this.recipes.find((recipe) => recipe.id === id);
  }

  getAllRecipes(): Recipe[] {
    return this.recipes;
  }

  updateRecipe(id: number, updates: Partial<Recipe>): Recipe | undefined {
    const index = this.recipes.findIndex((recipe) => recipe.id === id);
    if (index === -1) {
      return undefined;
    }
    this.recipes[index] = { ...this.recipes[index], ...updates };
    return this.recipes[index];
  }

  deleteRecipe(id: number): boolean {
    const index = this.recipes.findIndex((recipe) => recipe.id === id);
    if (index === -1) {
      return false;
    }
    this.recipes.splice(index, 1);
    return true;
  }
}

export default RecipeManager;

This class encapsulates the logic for managing recipes. It uses an array to store recipes and provides methods to add, retrieve, update, and delete recipes. The Omit<Recipe, 'id'> type is used to ensure that the user does not provide an ID when creating a new recipe; the ID is managed internally.

3. Implement the User Interface (UI)

For simplicity, we’ll implement a basic UI using HTML and JavaScript. Create an index.html file in the root directory:


<!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"> <!-- Link to your CSS file -->
</head>
<body>
    <h1>Recipe App</h1>

    <div id="recipe-form">
        <h2>Add Recipe</h2>
        <label for="recipe-name">Recipe Name:</label>
        <input type="text" id="recipe-name" name="recipe-name"><br>

        <label for="recipe-description">Description:</label>
        <textarea id="recipe-description" name="recipe-description"></textarea><br>

        <label for="ingredient-name">Ingredient Name:</label>
        <input type="text" id="ingredient-name" name="ingredient-name"><br>

        <label for="ingredient-amount">Ingredient Amount:</label>
        <input type="text" id="ingredient-amount" name="ingredient-amount"><br>

        <button type="button" id="add-ingredient">Add Ingredient</button>
        <ul id="ingredients-list"></ul><br>

        <label for="instructions">Instructions:</label>
        <textarea id="instructions" name="instructions"></textarea><br>

        <button type="button" id="add-recipe">Add Recipe</button>
    </div>

    <div id="recipe-list">
        <h2>Recipes</h2>
        <ul id="recipes">
            <!-- Recipes will be displayed here -->
        </ul>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure for the recipe app, including form elements for adding recipes and a section to display existing recipes. Note that we link to a CSS file (`style.css`) for styling and include the compiled JavaScript file (`dist/index.js`) at the end of the body.

Create a file named style.css in the root directory, with the following basic styles:


body {
  font-family: sans-serif;
  margin: 20px;
}

h1, h2 {
  margin-bottom: 10px;
}

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

input[type="text"], textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

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

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

#recipes li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

This CSS file provides basic styling for the HTML elements.

4. Implement the Main Application Logic

Create a file named src/index.ts. This file will contain the main application logic, including event listeners and UI updates.


// src/index.ts
import RecipeManager from './recipeManager';
import Recipe from './recipe';

const recipeManager = new RecipeManager();

const recipeNameInput = document.getElementById('recipe-name') as HTMLInputElement;
const recipeDescriptionInput = document.getElementById('recipe-description') as HTMLTextAreaElement;
const ingredientNameInput = document.getElementById('ingredient-name') as HTMLInputElement;
const ingredientAmountInput = document.getElementById('ingredient-amount') as HTMLInputElement;
const addIngredientButton = document.getElementById('add-ingredient') as HTMLButtonElement;
const ingredientsList = document.getElementById('ingredients-list') as HTMLUListElement;
const instructionsInput = document.getElementById('instructions') as HTMLTextAreaElement;
const addRecipeButton = document.getElementById('add-recipe') as HTMLButtonElement;
const recipesList = document.getElementById('recipes') as HTMLUListElement;

let ingredients: { name: string; amount: string }[] = [];

function renderIngredients() {
  ingredientsList.innerHTML = '';
  ingredients.forEach((ingredient) => {
    const li = document.createElement('li');
    li.textContent = `${ingredient.name}: ${ingredient.amount}`;
    ingredientsList.appendChild(li);
  });
}

addIngredientButton.addEventListener('click', () => {
  const name = ingredientNameInput.value;
  const amount = ingredientAmountInput.value;
  if (name && amount) {
    ingredients.push({ name, amount });
    renderIngredients();
    ingredientNameInput.value = '';
    ingredientAmountInput.value = '';
  }
});

addRecipeButton.addEventListener('click', () => {
  const name = recipeNameInput.value;
  const description = recipeDescriptionInput.value;
  const instructions = instructionsInput.value;

  if (name && description && ingredients.length > 0 && instructions) {
    const newRecipe: Omit<Recipe, 'id'> = {
      name,
      description,
      ingredients,
      instructions: instructions.split('n'),
    };
    const addedRecipe = recipeManager.addRecipe(newRecipe);
    renderRecipes();

    // Clear the form
    recipeNameInput.value = '';
    recipeDescriptionInput.value = '';
    ingredients = [];
    renderIngredients();
    instructionsInput.value = '';
  }
});

function renderRecipes() {
  recipesList.innerHTML = '';
  recipeManager.getAllRecipes().forEach((recipe) => {
    const li = document.createElement('li');
    li.innerHTML = `<h3>${recipe.name}</h3>` +
      `<p>${recipe.description}</p>` +
      `<p><strong>Ingredients:</strong></p>` +
      `<ul>${recipe.ingredients.map(ing => `<li>${ing.name}: ${ing.amount}</li>`).join('')}</ul>` +
      `<p><strong>Instructions:</strong></p>` +
      `<ol>${recipe.instructions.map( (instruction, index) => `<li>${index + 1}. ${instruction}</li>`).join('')}</ol>`;
    recipesList.appendChild(li);
  });
}

This file handles user interactions, adds event listeners to the buttons, collects data from the input fields, and uses the RecipeManager to add and display recipes. It also includes functions to render the list of ingredients and the list of recipes.

Running and Testing the Application

Now that you’ve written the code, it’s time to compile and run the application.

1. Compile the TypeScript Code

Open your terminal and navigate to your project directory. Run the following command to compile your TypeScript code into JavaScript:

tsc

This command will compile all TypeScript files in the src directory and output the corresponding JavaScript files into the dist directory. You should see a new index.js file (and potentially other files if you have additional TypeScript files).

2. Open the Application in Your Browser

Open the index.html file in your web browser. You should see the basic UI of the recipe app, including the form to add recipes and the area to display recipes.

3. Test the Functionality

Try adding a recipe:

  1. Enter a recipe name and description.
  2. Add ingredients by entering their name and amount, and clicking the “Add Ingredient” button.
  3. Add instructions. Each instruction should be on a new line.
  4. Click the “Add Recipe” button.

The recipe should now be displayed in the recipe list. Verify that the recipe name, description, ingredients, and instructions are displayed correctly. You can add multiple recipes and verify that they are all displayed.

Advanced Features and Improvements

Now that you have a basic recipe app, you can extend it with additional features and improvements:

  • Recipe Editing: Implement functionality to edit existing recipes. This would involve adding edit buttons to each recipe and providing a form to modify the recipe details.
  • Recipe Deletion: Add functionality to delete recipes. This would involve adding delete buttons to each recipe and removing the recipe from the list when the button is clicked.
  • Local Storage: Persist the recipes in local storage so that they are not lost when the user closes the browser. Use localStorage.setItem() and localStorage.getItem() to save and retrieve recipes.
  • Search Functionality: Add a search bar to allow users to search for recipes by name or ingredient.
  • Styling and UI Enhancements: Improve the app’s visual appearance by adding more CSS styles, using a CSS framework (like Bootstrap or Tailwind CSS), and improving the user interface.
  • Error Handling: Implement error handling to provide feedback to the user when something goes wrong (e.g., invalid input).
  • More Input Validation: Add more input validation to ensure data integrity.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • TypeScript Compilation Errors: If you encounter compilation errors, carefully review the error messages and the TypeScript code. Make sure you have the correct types, and that you’re using the correct syntax. Use your IDE’s error highlighting to help you find the errors.
  • Incorrect File Paths: Double-check the file paths in your import statements and in the <script> tag in your index.html file.
  • Browser Caching: If you’re not seeing your changes in the browser, try clearing your browser’s cache or opening the developer tools and disabling the cache.
  • Typographical Errors: Typos are a common source of errors. Carefully check your code for any typos, especially in variable names and function names.
  • Incorrect HTML Structure: Ensure your HTML structure is correct, with proper opening and closing tags. Missing or misplaced tags can cause unexpected behavior.

Summary/Key Takeaways

You’ve successfully built a simple web-based recipe app using TypeScript! You’ve learned how to set up a TypeScript project, define interfaces, create classes to manage data, and build a basic user interface. This project provides a solid foundation for building more complex web applications with TypeScript. Remember to practice and experiment with different features to deepen your understanding. Consider adding features like recipe editing, deletion, and local storage to enhance the app. By continuously building and experimenting, you’ll become proficient in TypeScript and web development.

FAQ

1. Can I use a different module system?

Yes, in your tsconfig.json file, you can change the module option to use a different module system like esnext or amd, depending on your project’s needs.

2. How can I deploy this app online?

You can deploy your app using platforms like Netlify, Vercel, or GitHub Pages. These platforms allow you to deploy static websites easily. You would typically build your project (using tsc) and then deploy the contents of the dist directory.

3. What are some good IDEs for TypeScript development?

Visual Studio Code (VS Code) is a popular and excellent choice for TypeScript development, offering great support for TypeScript, including autocompletion, error checking, and refactoring. Other options include WebStorm and Sublime Text with TypeScript plugins.

4. How do I handle more complex data (e.g., images)?

To handle more complex data, such as images, you would need to store the image files and their paths. You can add a field to the Recipe interface to store the image path (e.g., imagePath: string). In your UI, you would use an <img> tag to display the image, using the imagePath as the src attribute. For more advanced image handling (e.g., uploading images), you would need to implement an image upload mechanism, often involving a backend server.

5. How can I improve the UI/UX of the app?

To improve the UI/UX, you can apply CSS for styling, use a CSS framework like Bootstrap or Tailwind CSS to speed up styling, and implement features like responsive design to make the app work well on different devices. You can also add animations, transitions, and other UI elements to enhance the user experience.

The journey of learning TypeScript and building web applications is filled with exciting discoveries and challenges. This recipe app is just the beginning. The skills you’ve gained in this tutorial can be applied to a wide range of web development projects, from simple personal projects to complex professional applications. Remember to continuously practice, experiment with different technologies, and never stop learning. Each line of code you write, each bug you fix, and each new feature you implement brings you closer to becoming a proficient software engineer. Embrace the process, and enjoy the satisfaction of creating something useful and valuable. The world of software development is constantly evolving, offering endless opportunities to learn and grow. Keep exploring, keep building, and keep pushing your boundaries. With dedication and perseverance, you’ll be amazed at what you can achieve.

More posts