Vietnamese Guide

Overview

Vietnamese Guide is a language learning site I built with React and Gatsby. Lessons are organized by category and tag, so learners can reach the same content from different starting points depending on what they're looking for. The site also has quizzes and flashcard-style tools to practice what they've learned alongside the guide content.

Problem

Learning sites often try to do too much. The goal was to make it easy to find a lesson quickly, move between related topics without getting lost, and practice in the same place without switching tools. The content structure needed to support all three without the interface getting cluttered.

My Role

I built the site structure, front-end page templates, the content taxonomy, and the interactive study tools.

Key Features

• •Searchable guides organized by category and tag.
• •Quiz and flashcard-style study tools built into the site.
• •Email signup and contact forms.
• •Responsive reading pages with typography suited for longer study sessions.

Technical Decisions

• •Content taxonomy built with overlapping entry points so learners can reach the same lesson from categories, tags, or search.
• •Reusable React page templates keep every guide consistent without needing to style each one separately.
• •Styled Components scopes styles to each component, which prevents leakage and keeps the stylesheets easier to maintain.

Challenges Solved

• •Organizing content for learners at different levels without making the structure feel confusing for beginners.
• •Mixing long-form reading content with interactive tools (quizzes, flashcards) without either feeling out of place.
• •Keeping the page structure flexible enough to add new lesson formats, categories, or interactive elements later.

Technical Considerations

• •Generous line height and readable font sizes make the guides comfortable to read in longer sessions.
• •Search and tag filtering reduce the number of clicks needed to find a lesson, which matters when learners are mid-study.
• •Static Gatsby pages load quickly regardless of where the learner is, which is useful for an international audience.

What I Would Improve Next

• •Audio clips for pronunciation practice would be the biggest addition.
• •Quiz state and progress tracking so learners can pick up where they left off.
• •Stronger internal links between related lessons so the site feels more like a connected course than a list of guides.