Introducing Flashnode: AI-Powered Flashcards for Hashnode Articles

Introduction 👋

Do you ever come across blog posts that teach you something new but struggle to remember the key points? Whether you're a developer looking for new ideas or a student like me relying on Hashnode as a learning resource, it can be challenging to retain all that valuable information.

Flashnode is here to help! This new Chrome extension uses ChatGPT to generate custom flashcards based on any Hashnode article. With Flashnode, you can test your understanding and retain information more effectively.

Background 💡

Like many others, I’m always excited to learn new things from blogs written by experienced and passionate developers. Unfortunately, I often struggle to remember key concepts. This inspired me to develop a tool that could help readers like myself retain more information from Hashnode articles.

Initially, I created Quiznode, a Chrome extension that generates multiple-choice quizzes using ChatGPT. While it was a great learning experience, it wasn't quite a finished product. The biggest issue was that the multiple-choice options were sometimes ambiguous and misleading. With limited free time, I shelved Quiznode, thinking I might revisit it someday...

Then, I saw the 'AI for Tomorrow Hackathon' banner on Hashnode and clicked 'Participate.' This motivated me to try again. Although I created Quiznode before the hackathon, I decided to start fresh while keeping the main idea. The key change? Switching from multiple-choice quizzes to flashcards, making it easier for ChatGPT to generate accurate content.

Development 🛠️

Planning

I started by brainstorming feature ideas:

• Blurring the blog page (to prevent "cheating"🤓)

• Generating questions using ChatGPT

• Displaying questions as flashcards

• Allowing users to store the flashcards

Next, I considered how users could review saved flashcards. I wanted to keep the extension simple, focusing on flashcards for the current article. So, I decided to create an accompanying web app where users can view all saved flashcards grouped by article.

With these ideas in mind, I opened up Obsidian and used the Excalidraw plugin to draw sketches of the extension and web app.

Then, I moved to Figma to create simple UI designs.

With a clear vision, I used the Kanban plugin in Obsidian to outline the tasks ahead.

Finally, I opened up VSCode and started coding💻.

Building the Extension

The flashcards generating process can be summarized as follows:

1. Get the host and slug from the article's URL.

2. Use this information to fetch the markdown of the article using Hashnode API.

3. Use the markdown with a prompt to get questions and answers (which are then displayed as 'flashcards') from ChatGPT via the OpenAI API.

For storage, I used chrome.storage, which is preferred for Chrome extensions. Also, an extension I found super useful is Storage Area Explorer. This extension provides GUI for chrome.storage in devtools.

Building the Web App

Although it might have been overkill, I used NextJS for the web app. This allowed me to create an API route to handle OpenAI requests (without an additional Express app) and try out Shadcn UI (which is easy to set up with NextJS). Because I had used Tailwind before, I was able to quickly build the web UI.

To transfer flashcards from chrome.storage to the web app, I set the "externally_connectable" manifest property to include my web app's URL. This allowed communication between the web app and the extension. The web app sends a message to the extension, which retrieves the flashcards from chrome.storage and sends them back.

How To Use Flashnode ⚡

Using Flashnode is simple. Just read a Hashnode article, open the extension, and let it generate flashcards for you.

You can also open the extension using a keyboard shortcut Ctrl + Shift + F.

To review flashcards from previous articles, visit the Flashnode web app, where all your flashcards are clearly arranged by article. Need to re-read the article? No problem, each flashcard set includes a link to the corresponding article.

User Interface 🎨

Flashnode extension

I aimed for a simple, user-friendly design with three main states:

👉 Loading

👉 Flashcards

👉 End screen

Users can choose not to save the current flashcards by toggling the switch button in the top right-hand corner.

If users revisit an article with saved flashcards, the extension displays the saved flashcards instead of generating new ones (indicated by the missing 'save' toggle switch).

If the user is not on a page containing a Hashnode article, the extension icon turns grey, and clicking it shows a popup with links to the Flashnode web app and Hashnode.

Flashnode web app

The web app includes a responsive sidebar that displays all article titles, each with a badge indicating the number of flashcards associated with the article.

Next to the title of the current set is a Hashnode logo linking to the article. The 'more' button shows a popover with a 'Delete' button to delete the flashcard set.

I also implemented dark mode using Shadcn UI and next-themes.

Benefits 💪

Here are the top three benefits of using Flashnode:

👉 Improved retention

• By converting article content into flashcards, Flashnode helps users retain information more effectively.

👉 Interactive learning

• Flashcards provide an interactive way to engage with content, making learning more enjoyable. The process of answering questions keeps you actively involved and reinforces your understanding.

👉 Convenience

• With Flashnode, there's no need to switch between different apps. Everything you need is right in your browser.

I believe this makes the app beneficial to all types of users - from students like myself to professionals, and really anyone who loves to learn😀

Possible Improvements📈

While I'm pleased with the final result, there are a few improvements I'd like to make in the future:

🌙 Dark mode for the extension

• Currently, dark mode is only enabled for the web app. I would like to add dark mode to the extension as well and synchronize it with the web app for a consistent user experience.

📝 Rich text

• Right now, the flashcards display questions and answers as plain text. Adding features like bullet lists and code snippets would definitely enhance the user experience by making the information clearer and more organized.

🤖 Experiment with different prompts

• Here is the prompt I am currently using:

`I have a markdown of a technical blog post. Please read the post and generate a set of questions and answers based on the content of the blog post. Try to keep your answer brief but to the point.

Example format:

Q: [Your question here]
A: [Your answer here]

Markdown file content:

# ${title}

${markdown}`

• While this prompt works sufficiently well, I haven't explored other prompts. In the future, I plan to experiment with different prompts to see if any work better.

✏️ Allow users to edit the flashcards

• Another feature I would like to add is the ability for users to edit individual flashcards, allowing for more personalized and accurate study material

Conclusion 📜

In this post, I shared my experience building an app for Hashnode's 'AI for Tomorrow Hackathon.' It was a rewarding journey that taught me a lot of new skills and concepts. Although I haven't published my app, you can try it locally by following the instructions in my repository.

Thank you for taking the time to read about Flashnode! Any feedback or questions are welcome🙂