Skip to content

Latest commit

 

History

History
55 lines (36 loc) · 3.32 KB

README.md

File metadata and controls

55 lines (36 loc) · 3.32 KB
Raw

WordClips

URL: https://wordclips.org/

WordClips is a web tool which helps you find a:

  • Find a word in a random YouTube video
  • Find a word in a YouTube video of your choice

WordClips Random Youtube Video

WordClips Specific Youtube Video

Use cases:

  1. Language Learning:

    • Learn new words and phrases by exploring random YouTube videos.
    • Search for specific words in videos related to language learning to see how they are used in context.

  2. Content Creation:

    • Find inspiration for writing by discovering new and interesting words in various video content.
    • Generate creative ideas for content creation based on words found in random videos.

Tech stack

  • Frontend (React)
  • Backend (Node.js)
  • Database (Firebase)

Building process

This is a pet project of mine to go through the full process of building a fullstack app and actually deploying it. The primary goal was to gain insights into Firebase deployment and simultaneously create a tool with practical utility.

How do you get the transcripts?

Youtube APIs somehow dont have support for getting youtube transcripts in bulk. I found a python library called youtube-transcripts-api which made this project possible. I later found out that there is also an npm package youtube-transcripts which made this development even easier for me as my backend is Node.js based. So shoutout to above two projects.

Challenges along the way:

  1. API responses were extremely slow:

  • During the project building, I had to completely reorganize the structure of database to bring down the time to get API responses. Initially my database was structured in a way where I had to first load entire collection and then query it, based on a searchTerm. Now, each documentId is actually a word, meaning that querying is done way quicker. Beside that I introduced support for pagination.

  • To further speed this up, I could introduce word indexing. Firebase itself does not have built-in support for word indexing, but it does integrate with tools that do that. Meaning that would be potential future improvement.

  1. Mobile responsiveness:
  • Initially I did not opt into any CSS libraries as I wanted to have as little dependancies possible. As soon as I tried to optimize my app in a way that it is also usable on phones, I realized that this was a stupid idea. I therefore introduced Bootstrap and rewrote my frontend app quite a bit.

Design

For design inspiration I have to give a shoutout to v0, which is a generative user interface system by Vercel powered by AI. Even though I later decided not to opt in to shadcn/ui and Tailwind CSS libarires that they use, I did use their AI generated design as an inspiration for this project. Here you can see the design generated by v0: https://v0.dev/t/9670oQWRukC.

Improvements:

  • Implement word indexing, possibly through Algolia.
  • Expand video database for a more comprehensive search.
  • Introduce the ability to search "by term."
  • Incorporate predictive search functionality.
  • Enhance the "Find a word in a random YouTube video" page with a grid view.