The Looking-Glass

Description

A client for use with the looking glass service application. Electron application to browse various website content from one app.

⚠ Built for development practice only. ⚠

Install

Install the dependencies with npm.

cd looking-glass
npm install

Starting Development

Start the app in the dev environment. This starts the renderer process in hot-module-replacement mode and starts a webpack dev server that sends hot updates to the renderer process:

npm run dev

Test

Run unit tests using the jest-cli via npm scripts:

# unit tests
npm run test

# watch
npm run test --watch

# test coverage
npm run test --coverage

NOTE: More on the jest-cli here: https://jestjs.io/docs/en/cli

Packaging for Production

To package apps for the local platform:

npm run package

Release

1. Run npm run release to run the semver release process
2. Run git push --follow-tags origin <branch>
3. Craft a new draft release on GitHub with the tag created in Step 1
4. Create a PR and merge changes
5. Publish the GitHub release

TODO (In no particular order)

• Top Bar
• Modal Controls
• Gallery Nav
• Search
• Sort
• Modules
• Auth
• Themes
• Local file system
• Breadcrumbs
• Settings Page
• Error Handling + Images
• Route Transitions
• Fix item tags
• Fetch item tags
• Handle video + image loading errors
• Prev/next button hiding + search hiding
• Hide sort/filter buttons when necessary
• Use skeletons instead of spinner for Masonry
• Use skeletons instead of spinner for Filters
• Use skeletons instead of spinner for Modules
• Add snackbar (toasts) for End of scroll + Errors + Download
• Video volume sync
• Update all zustand syntax
• Use route for modal: https://stackblitz.com/github/remix-run/react-router/tree/main/examples/modal?file=src/App.tsx
• Pause videos when modal opens
• Start modal video at same time (maybe pause when zooming instead of showing poster?)
• End of scroll indidicator
• Avoid fetching more when navigating back
• Masonry title popovers
• Unit tests
• Integration tests

Links:

• tailwind css
• react router
• react query
• react-spring
• @use-gesture
• bootstrap svg icons
• undraw svg art
• tailwind elements
• hero icons