fuuko08 / pwa-text-editor

A single page app that runs in browser and meets PWA criteria. App features several data persistence techniques that serve as redundancy in case one of the options is not supported by the browser. The application also functions offline.

PWA Text Editor

Table of Contents

• Descriptiom
• Instruction
• Usage
• License
• Contributing
• Questions

Description

My text editor is a single page application that runs in the browser and meets PWA criteria. The app works online and offline. I use idb, which is a lightweight wrapper around the indexedDB API. It features a number of methods that are useful for storing and retrieving data, and is used by companies like Google and Mozilla.

Live deployed link: https://jatetexteditorapp.herokuapp.com/

User story

AS A developer
I WANT to create notes or code snippets with or without an internet connection
SO THAT I can reliably retrieve them for later use

Acceptance Criteria

GIVEN a text editor web application
WHEN I open my application in my editor
THEN I should see a client server folder structure
WHEN I run `npm run start` from the root directory
THEN I find that my application should start up the backend and serve the client
WHEN I run the text editor application from my terminal
THEN I find that my JavaScript files have been bundled using webpack
WHEN I run my webpack plugins
THEN I find that I have a generated HTML file, service worker, and a manifest file
WHEN I use next-gen JavaScript in my application
THEN I find that the text editor still functions in the browser without errors
WHEN I open the text editor
THEN I find that IndexedDB has immediately created a database storage
WHEN I enter content and subsequently click off of the DOM window
THEN I find that the content in the text editor has been saved with IndexedDB
WHEN I reopen the text editor after closing it
THEN I find that the content in the text editor has been retrieved from our IndexedDB
WHEN I click on the Install button
THEN I download my web application as an icon on my desktop
WHEN I load my web application
THEN I should have a registered service worker using workbox
WHEN I register a service worker
THEN I should have my static assets pre cached upon loading along with subsequent pages and static assets
WHEN I deploy to Heroku
THEN I should have proper build scripts for a webpack application

Instruction

To download app, run to command: git clone https://github.com/fuuko08/PWA-Text-Editor.git

Run the command npm install to install packages

To start the app, run the command: npm run start:dev

Usage

• Javascript
• Webpack: Service workers, manifest.json
• IndexedDb
• Node.js
• Express.js

License

Copyright (c) 2022 fuuko08

  Permission to use, copy, modify, and/or distribute this software for any
  purpose with or without fee is hereby granted, provided that the above
  copyright notice and this permission notice appear in all copies.

  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
  WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
  MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
  ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
  WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
  ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
  OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Contributing

• Heroku
• Github

Questions

• Linkedin: https://www.linkedin.com/in/selinatpsu/

• Email: [email protected]

• Github: https://www.github.com/fuuko08

• Portfolio: https://fuuko08.github.io/React-Portfolio/