edysegura / html5-indexeddb

HTML5 indexedDB API

A simple CRUD app using HTML5 indexedDB API

How to run this Project

Install the dependencies:

npm install

Copy the environment sample to a .env file

NULLSTACK_PROJECT_NAME="[dev] HTML5 IndexedDB"
NULLSTACK_PROJECT_DOMAIN="localhost"
NULLSTACK_PROJECT_COLOR="#D22365"
NULLSTACK_SERVER_PORT="5000"

Run the app in development mode:

npm start

Open http://localhost:5000 to view it in the browser.

Learn more about Nullstack

Read the documentation

References

• IndexedDB - What is it, and when you should choose it
• An empty database in every pocket
• Nullstack
• Storage for the Web
• Storing images and files in IndexedDB
• IndexedDB Best Practices

html5-indexeddb's Issues

Fix WebWorker in production

Consider Nullstack for this project

https://nullstack.app/

Implement pagination

Add this example

import Dexie from "https://cdn.jsdelivr.net/npm/[email protected]/dist/dexie.mjs";

let db;

export default class TodoService {
  constructor() {
    this.initializeDB();
  }

  initializeDB() {
    db = new Dexie("todoDB");

    db.version(2).stores({
      tasks: "++id,userId,title,completed",
    });

    db.on("populate", async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos"
      );

      const jsonData = await response.json();
      await db.tasks.bulkPut(jsonData);
    });

    db.open();

    db.tasks
      .where("userId")
      .equals(10)
      .filter(item => !item.completed)
      .each((item) => console.log(item));
  }
}

Add .vscode/.extension recommendation

Add Dockerfile to use nginx

https://www.docker.com/blog/how-to-use-the-official-nginx-docker-image/

Indent HTML using 2 spaces

Create a Web Worker to create 200000 of records

Remember to use faker.js to create the records!
https://github.com/marak/Faker.js/

Implement filter

Replace Bootstrap by Tailwind

Use Dexie

https://golb.hplar.ch/2018/01/IndexedDB-programming-with-Dexie-js.html

Add unit test

Fix env. variables

Redo this project with Nullwind and the newest Nullstack version!

Add GitHub actions to deploy it on GitHub pages

https://github.com/marketplace/actions/deploy-to-github-pages

Don't seed every time the page is reloaded

Extract CSS to it's own file

Use HTML5-localStorage as example

https://github.com/edysegura/html5-localStorage