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!
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:
Or paste a YouTube URL:
๐ Use our content
Don't know what to read about? ReadIndo got you covered with 5 daily articles!
๐พ Save and export word list to Anki
Step 1 Save words
From articles:
From videos:
Step 2 Export word list
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!
๐ Supports dark and light modes
๐ฑ 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.
The whole transcript is re-rendering every 200ms! Even when the same line was highlighted, the component kept re-rendering!
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.
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!
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!