361 words
2 minutes
Job Information Visualizer

Try it out#

lacser
/
Goose-Glance-for-WaterlooWorks
Waiting for api.github.com...
00K
0K
0K
Waiting...

View UI design on Figma
See introduction page at https://glance.nuvraine.com
Download available at chrome web store

Highlights#

Decoupled and Maintainable Architecture#

Built with Redux-based global state management, enabling multiple API integrations and independently functioning UI modules. The design is highly extensible and easy to maintain.

Local AI Models#

Powered by WebLLM, allowing AI language models to run directly in the browser. Model download, deployment, and performance benchmarking all handled with a single action.

Visualized LLM Output#

Leveraged structured outputs to reliably transform AI responses into carefully designed visual cards, making complex details clear and immediately accessible.

Containerized Deployment#

Deployed the landing page on a Linux server using Podman containers, streamlining the deployment process and reducing operational complexity.

My learnings#

  • Designing and Building Complex Web Applications: Gained hands-on experience architecting a scalable and maintainable web application that supports multiple AI analysis pipelines and UI visualization components. The project involved complex coordination across the main page, extension popup, and settings pages, including inter-page communication, state persistence, and modular architecture design.

  • High-Performance Local Caching with IndexedDB: AI-driven analysis is computationally expensive, and caching results locally is critical for a smooth user experience. Through this project, I learned how to efficiently store and retrieve large volumes of data using IndexedDB.

  • Designing User-Friendly UI with Figma: Used Figma during the planning phase to design the extension’s core interfaces, improving my ability to prototype and design user-centered UIs.

  • Containerized Deployment and SEO Optimization: Deployed the project’s landing page using Podman containers, gaining practical experience with containerized operations. Additionally, I optimized multilingual SEO by exposing language options in URLs, configuring sitemap.xml and robots.txt, and leveraging tools such as Google Search Console and Bing Webmaster Tools.

Areas for Improvement#

  • Performance Optimization: A significant amount of heavy and complex logic is currently executed within an iframe injected via content scripts. When switching between job descriptions, this causes repeated reloading of state and logic, resulting in unnecessary performance overhead. A more efficient design would move state management and AI analysis logic into a service worker, allowing them to persist independently of the iframe lifecycle and improving performance.

App Screenshot#

Extension Main Interface#

Demo image for extension's main interface

Extension initialization for AI providers#

Demo image for selecting AI providers

Extension initialization for interface language#

Demo image for selecting interface language