The Looking-Glass Reptarsrage

Electron application to browse various website content from one app. Built for development practice only.

README

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)

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