Architecture

About the Project: Polyglot

Inspiration

The inspiration for Polyglot came from the need to bridge language gaps and simplify information overload while browsing online. Whether encountering foreign languages or lengthy content, the challenge of understanding and summarizing information in real time motivated us to build a tool that makes global content more accessible and digestible.

What We Learned

Through the development of Polyglot, we gained:

React and Vite Proficiency: Mastering these tools for creating a fast, modular, and efficient frontend.
Browser Extension Development: Understanding how to utilize Chrome's built-in APIs to interact with webpages dynamically.
Problem-Solving for UX: Designing a user interface that is both functional and user-friendly within the constraints of an extension environment.

How We Built It

Frontend: Built using React with Vite to ensure a lightweight and blazing-fast user experience. The interface is designed to be intuitive, allowing users to highlight text and get summaries or translations instantly.
Backend: Powered by Vanilla JS, enabling efficient API integrations for summarization and translation services while handling data securely and quickly.
Chrome APIs: We leveraged Chrome's built-in APIs for interacting with webpages, enabling the extension to seamlessly detect and process selected text.
Toolchain: Combined modern web technologies to ensure smooth development, debugging, and deployment processes.

Challenges We Faced

Performance Optimization: Balancing React's reactivity with the lightweight requirements of a Chrome extension.
Text Contexts: Ensuring accurate translations and summaries while handling idiomatic expressions and complex grammar structures across languages.
Integration of APIs: Coordinating multiple APIs for translation and summarization while maintaining speed and reliability.
Cross-Site Compatibility: Testing and resolving conflicts to ensure the extension works on a wide variety of websites.
User-Centric Design: Crafting a minimalist UI that enhances user workflows without becoming intrusive or over-complicated.

Conclusion

Polyglot represents our commitment to making the web more accessible and user-friendly. By blending cutting-edge technologies like React, Vite, and Tailwind with Chrome's robust APIs, we created a tool that breaks down barriers to understanding, helping users navigate and engage with content globally and efficiently.