Learn Indonesian with ReadIndo!

Learn Indonesian with ReadIndo!

ยท

5 min read

It's Candy Again!

Hello Hashnoders! After having so much fun building MoodPraiser for the #harperdbhackathon, and here I am again for the #auth0hackathon!

Big thanks to Hashnode for hosting these events and this time 'round I even persuaded friends to join in the fun. ๐ŸŽ‰ Hopefully we'll get to see their articles soon!

What is ReadIndo?

ReadIndo is a tool to help you learn Indonesian through reading text and videos of your choice!

Live Demo / GitHub Repository

Why ReadIndo?

Goal

Fill in the gaps for Indonesian learners by bringing our own content to the table.

The story

I started to learn Indonesian in 2020 because I wanted to chat with Jade Suntoro ๅฎ‹็Ž‰็พŽ in Indonesian. Compared to the popular languages, such as English, German, Japanese, etc., there are comparably fewer resources to learn Indonesian.

Why not build a tool that benefits all Indonesian learners? So here we are!

Tech Stack

  • Auth0 - User authentication that's super easy to integrate!
  • MongoDB - The database.
  • Next.JS - The React framework for production.
  • Chakra UI - UI development that's just deadly simple.
  • Vercel - Deployment for the app, where the app lives.

Features and Usage

๐Ÿ“– Bring your own content

Paste free text to get started:

Bring your own content

Or paste a YouTube URL:

paste a YouTube URL

๐Ÿ“š Use our content

Don't know what to read about? ReadIndo got you covered with 5 daily articles!

Use our content

๐Ÿ’พ Save and export word list to Anki

Step 1 Save words

From articles:

Save words from articles

From videos:

Save words from videos

Step 2 Export word list

image.png

Step 3 Import to Anki

Anki is a program that makes remembering things easy! Best of all, it's free and has been one of the best solutions for studying vocabulary with spaced repetition.

Just go ahead and click on "Import File", select the CSV and follow the screenshot below and you're good to go!

Anki settings

๐ŸŒ“ Supports dark and light modes

Supports dark and light modes

๐Ÿ“ฑ Responsive on all devices

Responsive on all devices

Challenges and Tidbits

Auth0 Integration

Auth0 has the best documents when it comes to integration! I was using Next.js and it directly leads you to their quickstart guide. All you need to do is follow the steps and within 5 minutes, you're all set up. Auth0 provides everything you need and the developer experience was super smooth.

Performance issues with the interactive transcripts

TL;DR - React.memo to the rescue

One of the main features of ReadIndo is interactive transcripts when watching videos. How do we know which line to highlight? The case here was that the code checks the video duration every 200ms and checks for the correct line to display. The UI had a small lag so I decided to tick the "Highlight updates when components render." box in React Developer Tools and was amazed at what I saw.

React developer tools

The whole transcript is re-rendering every 200ms! Even when the same line was highlighted, the component kept re-rendering!

react.no.memo.gif

So here I encountered the perfect case where React.memo could make all the difference.

export default React.memo(
  // One line of transcript
  TranscriptElement,
  (prevProps, nextProps) => prevProps.isPlaying === nextProps.isPlaying
);

If the current line is playing in the video, then isPlaying will be true. Pretty straightforward and obvious. ๐Ÿคฃ

So we only need to re-render when isPlaying changes, and voila, instant improvement as we can see below.

react.memo.gif

Code quality

Maintaining high standards of code quality has always been hard in hackathons due to the time limit. I kept it minimal by choosing the right languages and tools.

TypeScript definitely has been the game-changer:

  • TypeScript keeps everything defined and explicit
  • TSLint to keep the coding style consistent

Vercel has been the gatekeeper as it will actually run the lint command during the build and make sure everything passes before deploying. So if the build fails, then no new deploys. Therefore, we definitely have to get it fixed in order to ship a new version.

FAQ

Is ReadIndo for me?

If you're interested in learning Indonesian, then yes!

Will ReadIndo support languages other than Indonesian?

The short answer is no.

A case that might be possible is I'm using it to learn other languages but don't worry, all of the code is open-sourced, and feel free to go ahead and extend the project to your needs!

Is my data secure?

The only thing we currently save is your word list. Passwords go through Google if you choose Google login and Auth0 if you register an account with them. ReadIndo doesn't store any user data.

Feel free to ask about anything in the comments below!

Roadmap and User Wishlist

  • Save words with context - Save the word with the current sentence to help users understand it better.
  • Video catalog - Sometimes we just don't know what to watch, so having a catalog is useful.
  • Community features - Learning alone is not as fun as learning with a community, just like writing blogs isn't fun unless we're doing it together on Hashnode!
  • Multi-language support - Support languages other than Indonesian, but this one definitely will be a wait because the goal of this project was to help Indonesian learners since resources are more limited.

Contribution and Beyond

ReadIndo is an open-source project and licensed under the terms of the MIT license. You're more than welcome to contribute ideas, report issues or send in pull requests.

Feel free to take it to the next level if needed! Extend ReadIndo to other languages you're learning by forking the project and share with me all the cool things you've added!

GitHub Repository

That's All Folks!

If you read this far, you must have some interest to learn Indonesian, right? ๐Ÿฅบ

Let's learn a language other than JavaScript or Python today at ReadIndo!

Leave your thoughts or feedback about the project and don't forget to check out all the other amazing projects for the #auth0hackathon! You'll be amazed at what the Hashnode community can build in a month.

That's it for now and I'll see you in another Hashnode blog post. Thanks for reading and supporting me through my blogging journey!

ย