Text-Editor

A text editor app that runs in the browser and meets the Progressive Web App (PWA) criteria. It includes a couple of data persistence techniques that serve as redundancy in case one of the options is not supported by the browser. The application will also function offline.

Link to GIF

Getting Started
Prerequisites
Technologies Used
Code Snippets
Learning Points
Author

Getting Started

To begin the application, use the following in command line:

npm run start

Open http://localhost:3000/ in the browser of your choice

Prerequisites

Download Node

Install node package manager (npm)

npm install -g npm

Install dependencies in package.json

npm install

Technologies Used

Code Snippets

This code snippet shows how you set up IndexedDB for data persistence

Indexed Database API is a JavaScript application programming interface provided by web browsers for managing a NoSQL database of JSON objects
Import the 'idb' package to use with IndexedDB.
Create a function that can be used to start up the database

const initdb = async () =>

Create a database named 'jate' and we will use version 1

openDB('jate', 1, {

Sets the database schema if it isn't already defined with

upgrade(db)

Create an object store for our data inside of 'jate' db and a key named 'id' which will automatically be incremented

db.createObjectStore('jate', { keyPath: 'id', autoIncrement: true });

import { openDB } from 'idb';

const initdb = async () =>
  openDB('jate', 1, {
    upgrade(db) {
      if (db.objectStoreNames.contains('jate')) {
        console.log('jate database already exists');
        return;
      }
      db.createObjectStore('jate', { keyPath: 'id', autoIncrement: true });
      console.log('jate database created');
    },
  });

Learning Points

How to use IndexedDB for data persistence
How to use Webpack (aka module bundler) to compile JavaScript modules
How to create a service worker to allow apps to continue functioning offline

Author

Elliot Park

Github

elliotpark410/Text-Editor