Building an Realtime Web Notepad App

#javascript #typescript #webdev #beginners

NotePage is a web application that allows you to easily share code, text, or any content using a unique link. You can create new note pages by simply visiting https://notepage.vercel.app. The application is built using Angular , Firebase and Vercel.

Empowering Your Digital Sharing with NotePage

The digital age has brought about an unprecedented need to share information and collaborate in real-time. Whether it's for work, study, or leisure, we often find ourselves needing a convenient platform to quickly share code, text, or any other type of content with others. NotePage is here to address this need, providing a straightforward way to share your ideas, collaborate with colleagues, or even just create a space for yourself. Let's dive into the world of NotePage and see how this web application is revolutionizing content sharing.

The Birth of NotePage

At the heart of NotePage lies simplicity. This web application was created to be an accessible and user-friendly solution for sharing information with others. It began as a response to the age-old problem of needing to send a quick piece of code, a note, or any other form of content to someone, without the hassle of setting up accounts, navigating through complex UIs, or worrying about privacy. NotePage, with its straightforward approach, aims to eliminate these barriers and empower users to share without boundaries.

Exploring the Features

Custom Pages

Creating a custom page on NotePage is as simple as visiting https://notepage.vercel.app/<your-page-name>. You can instantly set up a dedicated space for your content. No need to sign up or log in, just enter the desired page name and start sharing. NotePage provides a direct path from your thoughts to a web page.

Password Protection

Privacy is paramount in today's digital landscape. NotePage offers the option to protect your pages with passwords, ensuring that only authorized users can access your content. This feature gives you full control over who can view and interact with your shared information.

Real-time Collaboration

Real-time collaboration is the crown jewel of NotePage. When multiple users access the same page link, any changes made by one user are instantly visible to others, without requiring anyone to refresh the page. This dynamic real-time feature fosters interactive and efficient collaboration, making NotePage suitable for a variety of use cases, from co-editing code to taking real-time notes during meetings or lectures.

Shareable Links

The core idea of NotePage revolves around the simplicity of sharing. To share your content, you only need to send the unique NotePage link to others. This direct sharing method ensures that your audience can quickly access the content you want to share, without any additional steps or account requirements.

Under the Hood: Tech Stack

NotePage is more than just a user-friendly interface; it's a harmonious blend of modern technologies. Here's a peek into the tech stack that powers NotePage:

Angular: Angular, a widely used front-end framework, forms the backbone of NotePage. Its strong ecosystem and ease of development ensure a seamless user experience.
Firebase: Firebase serves as the real-time cloud database, authentication, and hosting platform. It's the engine behind NotePage's real-time collaboration capabilities, ensuring that your content updates are instantly shared with others.
Angular Material: Angular Material enhances the user interface by providing a collection of high-quality UI components. This library brings a polished and consistent look to NotePage.
Nebular: Nebular, a customizable Angular UI library and admin template, is based on Nebular. It offers sleek designs and UI components that further enhance the overall look and feel of NotePage.

Code Review

Code for realtime updating the text to database

  updateText() {
    this.updateWordAndCharacterCount();
    const routeID = this.route.snapshot.paramMap.get('id');
    const db = getDatabase();
    if (routeID) {
      update(ref(db, `${routeID}`), { text: this.text || '' })
        .then(() => {
          console.log('Text updated successfully');
        })
        .catch((error) => {
          console.error('Error updating text:', error);
        });
    } else {
      console.error('Route ID is null or undefined');
    }
  }

Enabling Tab Key inside Text Area


// Tab key functionality
onTextareaKeydown(event: KeyboardEvent) {
  // Check if the pressed key is Tab
  if (event.key === 'Tab') {
    // Prevent the default Tab behavior (e.g., moving focus to the next element)
    event.preventDefault();

    // Insert a tab character at the current cursor position
    const textarea = event.target as HTMLTextAreaElement;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;

    // Get the text before and after the cursor position
    const textBeforeCursor = textarea.value.substring(0, start);
    const textAfterCursor = textarea.value.substring(end);

    // Combine the text with a tab character at the cursor position
    const newText = textBeforeCursor + '\t' + textAfterCursor;

    // Update the textarea value
    textarea.value = newText;

    // Update the cursor position
    const newCursorPos = start + 1;
    textarea.setSelectionRange(newCursorPos, newCursorPos);
  }
}

Realtime Changing the text in UI

ngOnInit() {
      // Set up a real-time listener for changes in the database
      const db = getDatabase();
      const docRef = ref(db, this.routeId);

      // Listen for changes in a specific child ('text' in this case)
      onChildChanged(docRef, (snapshot) => {
        // console.log('Child changed:', snapshot.val());
        if (snapshot.key === 'text') {
          this.text = snapshot.val() || null;

          // Update word and character counts
          this.updateWordAndCharacterCount();
        }

      });
}

Updating the word and character count

 updateWordAndCharacterCount() {
    if (this.text) {
      // Split the text into words (using spaces as word separators)
      const words = this.text.split(/\s+/).filter((word) => word.trim() !== '');

      // Update the word count
      this.words = words.length;

      // Update the character count
      this.characters = this.text.length;
    } else {
      this.words = 0;
      this.characters = 0;
    }
  }

Code Repository

The code for NotePage is available on GitHub at https://github.com/Varshithvhegde/notepage

Varshith V Hegde

Conclusion

NotePage is a simple yet powerful web application that empowers users to share their ideas and collaborate in real-time. It's a one-stop solution for all your content sharing needs. Whether you're a student, a developer, or a professional, NotePage can help you share your ideas with others. So, what are you waiting for? Visit https://notepage.vercel.app and start sharing today!

Top comments (6)

Yishai Zehavi • Oct 30 '23

Cool idea. It'd be nice to have a code editor instead of the textarea. I'm not an Angular developer, but I saw this package. Worth checking out. Good work!