Gallery

This is a simple gallery app that fetches images from the Unsplash API and displays them in a grid. The app is built using React, TypeScript, and Vite.

Wishlist

1. introduce a way to dynamically add annotation overlay
2. use tanstack routing to separate gallery vs editor view
3. use react-hotkeys-hook to allow keyboard shortcuts for editing annotations and navigating the gallery
   1. https://react-hotkeys-hook.vercel.app/docs/intro
4. use divs instead of tables to control display of property grids
   1. make sure that the user can change the width of the column on the property grid
5. Use tree view to navigate data hierarchy
   1. https://github.com/lukasbach/react-complex-tree
6. use orama for searching the data hierarchy
   1. https://docs.orama.com/open-source/
7. allow user to add images to the gallery
   1. allow user to edit the annotations images in the gallery
   2. allow media pipe object detection to add annotations to images
8. editor quality of life
   1. allow object snapping
      1. https://konvajs.org/docs/sandbox/Objects_Snapping.html
   2. allow user to upload images as annotation overlays
   3. allow user to create a blank new sheet/canvas
      1. requires restructuring the data hierarchy/document model

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list