TypeScript: Building a Simple Web-Based Code Snippet Manager

Written by

learnmodernjavascript

in

Are you tired of constantly searching through old projects or online resources for that perfect piece of code? Do you wish there was an easy way to store, organize, and retrieve your frequently used code snippets? If so, you’re in the right place! In this tutorial, we’ll dive into building a simple web-based code snippet manager using TypeScript. This project will not only introduce you to the power and flexibility of TypeScript but also equip you with a practical tool that can significantly boost your productivity as a developer.

Why TypeScript?

Before we jump into the code, let’s briefly discuss why TypeScript is an excellent choice for this project. TypeScript is a superset of JavaScript that adds static typing. This means you can specify the data types of variables, function parameters, and return values. This feature offers several advantages:

  • Early Error Detection: TypeScript catches potential errors during development, before runtime. This reduces the chances of bugs in production.
  • Improved Code Readability: Types make your code easier to understand and maintain. It’s clear what kind of data each variable holds.
  • Enhanced Developer Experience: TypeScript provides better autocompletion, refactoring, and navigation in your IDE.
  • Scalability: TypeScript is well-suited for large projects, making it easier to manage and scale your codebase.

Project Overview

Our code snippet manager will allow users to:

  • Add new code snippets with a title, description, and code content.
  • View a list of existing snippets.
  • Search for snippets by title or description.
  • Edit and delete snippets.

We’ll keep the design simple and focus on the core functionality to keep the tutorial manageable. We will use HTML, CSS, and JavaScript, with TypeScript for the logic.

Setting Up the Project

Let’s get started by setting up our project environment. We’ll use a simple folder structure:

snippet-manager/
├── index.html
├── style.css
├── src/
│   └── app.ts
├── tsconfig.json
└── package.json

First, create the project directory and navigate into it. Then, initialize a new npm project:

mkdir snippet-manager
cd snippet-manager
npm init -y

Next, install TypeScript and a development server (we’ll use `live-server` for simplicity):

npm install typescript live-server --save-dev

Now, let’s create the `tsconfig.json` file. This file tells the TypeScript compiler how to compile your code. Create the file and add the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration specifies that we want to compile our TypeScript code to ES5 JavaScript, use the CommonJS module system, and output the compiled files to a `dist` directory. The `strict: true` option enables strict type-checking.

Creating the HTML Structure

Let’s create our `index.html` file. This will hold the basic structure of our web app:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Snippet Manager</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Code Snippet Manager</h1>
    <div id="snippet-form">
      <h2>Add Snippet</h2>
      <input type="text" id="snippet-title" placeholder="Title">
      <textarea id="snippet-description" placeholder="Description"></textarea>
      <textarea id="snippet-code" placeholder="Code"></textarea>
      <button id="add-snippet-button">Add Snippet</button>
    </div>
    <div id="snippet-list">
      <h2>Snippets</h2>
      <input type="text" id="search-input" placeholder="Search...">
      <ul id="snippets">
        <!-- Snippets will be displayed here -->
      </ul>
    </div>
  </div>
  <script src="dist/app.js"></script>
</body>
</html>

This HTML provides the basic layout with a title, form for adding snippets, a search input, and a list to display the snippets. Notice the link to `style.css` and the script tag that points to `dist/app.js`, which will be the compiled JavaScript from our TypeScript code.

Styling with CSS

For basic styling, create a `style.css` file in the root directory. Add the following CSS:

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

.container {
  width: 80%;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

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

textarea {
  height: 100px;
}

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

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

#snippet-list ul {
  list-style: none;
  padding: 0;
}

#snippet-list li {
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

Writing the TypeScript Code

Now, let’s write the core logic in `src/app.ts`. This is where the magic happens.


// Define a Snippet interface
interface Snippet {
  id: number;
  title: string;
  description: string;
  code: string;
}

// Get references to HTML elements
const snippetForm = document.getElementById('snippet-form') as HTMLDivElement;
const snippetTitleInput = document.getElementById('snippet-title') as HTMLInputElement;
const snippetDescriptionInput = document.getElementById('snippet-description') as HTMLTextAreaElement;
const snippetCodeInput = document.getElementById('snippet-code') as HTMLTextAreaElement;
const addSnippetButton = document.getElementById('add-snippet-button') as HTMLButtonElement;
const snippetList = document.getElementById('snippet-list') as HTMLDivElement;
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const snippetsList = document.getElementById('snippets') as HTMLUListElement;

// Initialize an array to store snippets
let snippets: Snippet[] = [];
let nextSnippetId = 1;

// Function to add a new snippet
function addSnippet(title: string, description: string, code: string): void {
  const newSnippet: Snippet = {
    id: nextSnippetId++,
    title: title,
    description: description,
    code: code,
  };
  snippets.push(newSnippet);
  renderSnippets();
  saveSnippetsToLocalStorage();
  clearForm();
}

// Function to render snippets in the list
function renderSnippets(): void {
  snippetsList.innerHTML = ''; // Clear the list
  const searchTerm = searchInput.value.toLowerCase();

  const filteredSnippets = snippets.filter(snippet =>
    snippet.title.toLowerCase().includes(searchTerm) || snippet.description.toLowerCase().includes(searchTerm)
  );

  filteredSnippets.forEach(snippet => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      <strong>${snippet.title}</strong><br>
      <small>${snippet.description}</small><br>
      <pre><code>${snippet.code}</code></pre>
      <button data-id="${snippet.id}" class="edit-button">Edit</button>
      <button data-id="${snippet.id}" class="delete-button">Delete</button>
    `;
    snippetsList.appendChild(listItem);

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

    if (editButton) {
      editButton.addEventListener('click', () => editSnippet(snippet.id));
    }
    if (deleteButton) {
      deleteButton.addEventListener('click', () => deleteSnippet(snippet.id));
    }
  });
}

// Function to clear the form
function clearForm(): void {
  snippetTitleInput.value = '';
  snippetDescriptionInput.value = '';
  snippetCodeInput.value = '';
}

// Function to edit a snippet
function editSnippet(id: number): void {
  const snippetToEdit = snippets.find(snippet => snippet.id === id);
  if (snippetToEdit) {
    snippetTitleInput.value = snippetToEdit.title;
    snippetDescriptionInput.value = snippetToEdit.description;
    snippetCodeInput.value = snippetToEdit.code;

    // Remove the old add button and add a save button
    addSnippetButton.style.display = 'none';
    const saveButton = document.createElement('button');
    saveButton.id = 'save-snippet-button';
    saveButton.textContent = 'Save Snippet';
    snippetForm.appendChild(saveButton);

    // Event listener for save button
    saveButton.addEventListener('click', () => {
      saveSnippet(id);
    });
  }
}

// Function to save an edited snippet
function saveSnippet(id: number): void {
  const snippetIndex = snippets.findIndex(snippet => snippet.id === id);
  if (snippetIndex !== -1) {
    snippets[snippetIndex].title = snippetTitleInput.value;
    snippets[snippetIndex].description = snippetDescriptionInput.value;
    snippets[snippetIndex].code = snippetCodeInput.value;
    renderSnippets();
    saveSnippetsToLocalStorage();
    // Remove the save button and bring back the add button
    const saveButton = document.getElementById('save-snippet-button');
    if (saveButton) {
      saveButton.remove();
    }
    addSnippetButton.style.display = 'block';
    clearForm();
  }
}

// Function to delete a snippet
function deleteSnippet(id: number): void {
  snippets = snippets.filter(snippet => snippet.id !== id);
  renderSnippets();
  saveSnippetsToLocalStorage();
}

// Function to save snippets to local storage
function saveSnippetsToLocalStorage(): void {
  localStorage.setItem('snippets', JSON.stringify(snippets));
}

// Function to load snippets from local storage
function loadSnippetsFromLocalStorage(): void {
  const storedSnippets = localStorage.getItem('snippets');
  if (storedSnippets) {
    snippets = JSON.parse(storedSnippets);
    nextSnippetId = Math.max(...snippets.map(snippet => snippet.id), 0) + 1;
    renderSnippets();
  }
}

// Event listeners
addSnippetButton.addEventListener('click', () => {
  addSnippet(
    snippetTitleInput.value,
    snippetDescriptionInput.value,
    snippetCodeInput.value
  );
});

searchInput.addEventListener('input', renderSnippets);

// Load snippets from local storage when the page loads
loadSnippetsFromLocalStorage();

Let’s break down this code:

  • Snippet Interface: Defines the structure of a code snippet (id, title, description, code).
  • HTML Element References: Gets references to the HTML elements we’ll be interacting with. The `as HTMLInputElement` syntax is called “type assertion”, and it’s essential for telling TypeScript the specific type of an HTML element.
  • Snippets Array: An array to store our snippets.
  • addSnippet Function: Creates a new snippet object, adds it to the `snippets` array, renders the list, saves the snippets to local storage, and clears the form.
  • renderSnippets Function: Clears the existing list, filters the snippets based on the search input, iterates through the snippets, creates list items with the snippet data, and appends them to the list. It also adds event listeners for edit and delete buttons.
  • clearForm Function: Clears the input fields in the form.
  • editSnippet Function: Populates the form with the snippet’s data, adds a “Save” button and event listener for saving.
  • saveSnippet Function: Updates the snippet with the edited data, renders the snippets, saves snippets to local storage, resets the form, removes the save button, and shows the add button.
  • deleteSnippet Function: Removes a snippet from the array and re-renders the list and saves to local storage.
  • saveSnippetsToLocalStorage Function: Saves the `snippets` array to the browser’s local storage. This allows us to persist the data even if the user closes the browser.
  • loadSnippetsFromLocalStorage Function: Loads the snippets from local storage when the page loads.
  • Event Listeners: Adds event listeners to the “Add Snippet” button and the search input, calling the appropriate functions when events occur.

Compiling and Running the App

Now, let’s compile the TypeScript code and run our application. Open your terminal in the project directory and run the following command:

tsc

This command will compile your `app.ts` file into `dist/app.js`. If you followed the setup steps correctly, there should be no errors. Next, start the development server:

live-server

This will start a local server and open your application in your browser. You should see the basic form and list. Start adding snippets, and you’ll see them appear in the list. The snippets will also persist across browser refreshes thanks to local storage.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Type Errors: TypeScript will highlight type errors during development. Always pay attention to these errors and fix them. For example, if you try to assign a number to a string variable, TypeScript will flag this error.
  • Incorrect Element References: Make sure you are referencing the correct HTML elements. Use the browser’s developer tools to inspect the elements and verify their IDs. Type assertions (`as HTMLInputElement`) are crucial for telling TypeScript what type of element you are working with.
  • Incorrect Event Listener Usage: Ensure event listeners are correctly attached to the elements and that the correct functions are called when an event occurs.
  • Local Storage Issues: Be careful when working with local storage. Make sure you are stringifying your data when saving and parsing it when loading. Also, consider error handling for cases where local storage might be unavailable.
  • Missing or Incorrect Imports: If you’re using external libraries, make sure you have imported them correctly. In our simple example, we don’t need imports, but with more complex projects, you’ll need to use import statements.

Enhancements and Next Steps

This is a basic implementation of a code snippet manager. You can enhance it with more features:

  • Code Highlighting: Integrate a code highlighting library (e.g., Prism.js, highlight.js) to make your code snippets more readable.
  • Code Formatting: Integrate a code formatting library (e.g., Prettier) to format the code snippets automatically.
  • Tags/Categories: Add the ability to tag snippets for better organization.
  • Import/Export: Allow users to import and export snippets.
  • User Authentication: Implement user authentication to secure the snippet manager.
  • Advanced Search: Implement more advanced search features, such as searching by tags or keywords.
  • Responsive Design: Make the application responsive so that it works well on different devices.

Key Takeaways

  • TypeScript adds static typing to JavaScript, improving code quality and readability.
  • Interfaces define the structure of objects, making code more organized.
  • Event listeners allow you to respond to user interactions.
  • Local storage provides a way to persist data in the browser.

FAQ

  1. Why use TypeScript instead of JavaScript? TypeScript offers several advantages, including early error detection, improved code readability, and better developer experience. It’s especially beneficial for larger projects.
  2. How do I handle errors in TypeScript? TypeScript helps you catch errors during development. Use the browser’s developer tools to debug your code and fix any issues.
  3. Can I use this code snippet manager in production? The example provided is a basic implementation. You would need to add features like user authentication, improved error handling, and security measures before deploying it to production.
  4. What are some alternatives to local storage? For more complex applications, you can use a backend database to store your data. This allows for more robust data management and sharing across multiple devices.
  5. How can I deploy this application? You can deploy the application by hosting the HTML, CSS, and JavaScript files on a web server or using a platform like Netlify or Vercel.

You’ve now built a functional code snippet manager using TypeScript! You’ve learned the basics of TypeScript, including interfaces, types, and event listeners. You’ve also learned how to use local storage to persist data and how to structure a simple web application. The skills you’ve acquired in this tutorial will serve you well as you continue your journey in web development. Remember to explore the enhancements and next steps suggested above to further develop your skills and create a more robust and feature-rich application. Keep experimenting, keep learning, and keep coding – the possibilities are endless.

More posts