PARROT: CONTEXTUAL SPANISH VOCABULARY COACH

Tech Venture Bootcamp Project

Parrot is a Chrome extension that helps users learn Spanish vocabulary seamlessly as they browse the web.

Project Overview

Provide a brief overview of the project you worked on

Parrot is a language learning Chrome extension that integrates vocabulary practice into the user's normal browsing routine. The extension scans the visible text on the current webpage, selects suitable words for learning in Spanish, and shows them to the user in a short quiz format.

By connecting vocabulary to what the user is already reading, Parrot helps them learn new words in context, without needing to switch to a separate app or lesson.

Purpose of the project

What inspired or motivated you to choose this particular project?

The project was motivated by the challenge that busy professionals, especially expats, face when trying to learn a foreign language.

The panel of judges for the hackathon were expats from English speaking countries, and I overheard some of them talking about how they struggled to find time to learn Spanish despite living in Spain. That conversation immediately caught my attention as a real and valuable problem to solve, and it inspired me to build something that would fit language learning into their existing routines.

Technical Details

Could you explain the technical aspects of your project? What software, tools do you use?

The project was developed as a full stack application.

  • Chrome extension: Built using HTML, CSS and JavaScript.
  • Backend API: Implemented with Flask in Python, connecting to AI language models provided by OpenAI.

The system architecture consists of the following components:

  • Content Script (content.js): Scans the webpage content and sends the extracted text to the backend server.
  • Backend Server (server/app.py): Processes the text using AI to select a word and generate multiple choice quiz options.
  • Popup Interface (popup.html, popup.js): Provides the user interface for enabling or disabling the extension and configuring basic settings.
  • Background Script (background.js): Manages the overall state and behavior of the extension in the browser.

Challenges and Solutions

Were there any significant challenges you encountered during the project, and how did you overcome them? Can you share a specific problem-solving moment that stands out in your project?

One major challenge was the time constraint. We had only one weekend to go from idea to working product, and I had never built or designed a Chrome extension before. On the day of the presentation, we still did not have a proper UI for the project.

That same week, OpenAI released its GPT 4 vision model, and I decided to experiment with it. I took a sheet of paper, sketched the extension interface I had in mind, uploaded a photo of the drawing to ChatGPT, and it produced a near replica of the UI in HTML, CSS and JavaScript that I could adapt into our codebase.

This moment taught me a valuable lesson about leveraging AI as a development tool, especially when working under pressure and learning new technologies at the same time.

Collaboration and Teamwork

How was the process of collaborating with other students or team members on this project? How did teamwork contribute to the success or progress of your project?

The collaboration process was very smooth. Once we aligned on the initial product idea and goals, we quickly broke down the project into tasks that matched each teammate's strengths.

Throughout the weekend, we worked together in a conference room, focusing on our individual responsibilities while constantly checking in with each other. Whenever someone ran into a problem or wanted to brainstorm a feature, we would pause and collaborate to find a good solution.

This way of working played a crucial role in our first-place result. It allowed each person to take pride in their own contributions while creating an environment where collaboration, urgency, and high standards were shared by the whole team.

Learning and Takeaways

What key lessons or skills did you gain from working on this project?

Building this project and participating in the hackathon was a pivotal moment in my journey as a developer. Before this experience, I did not really see myself as a strong developer who could build real world applications, especially in such a short time frame.

After completing the project, presenting it and winning first place, my confidence as a developer increased significantly. I also gained practical skills in building Chrome extensions, designing and implementing APIs, working with generative AI APIs, and using AI as a tool to support and accelerate my development process.

Future Development

Do you have plans for further development or improvement of your project in the future?

Parrot itself was a short lived project, so I do not currently plan to continue developing it further. However, the skills and lessons I gained from building it have stayed with me. Having this experience and project in my portfolio gave me the confidence to pursue my thesis topic, which follows a similar idea of building a tech venture around AI, but with much higher stakes and a broader scope.

Additional information

Links and resources

Pictures

  • A presentation in a modern workspace featuring a speaker and a large screen with a cartoonish illustration.