Break the Barrier

Inspiration

We were inspired by the classic kid's show The Electric Company, which made learning the English language engaging and enjoyable. We combined the notion of learning with our interest in Web Development and appreciation for Korean culture to create a project that is educational, interactive, and fun!

What it does

Break the Barrier is a site that teaches foreign languages (in this case, Korean) to learners with disabilities by using the Orton-Gillingham approach, which separates words into syllables. The site displays a Korean vowel, displays an English word with a similar-sounding syllable, then displays the Korean character for the vowel as well as an example word. Each word or syllable is hidden behind a button that the user must click to reveal each step, increasing the learner's engagement. To ensure multisensory learning, the word or syllable is read aloud upon reveal.

How we built it

We used JavaScript and React to create the backend and frontend of the website, npm package manager to locally host the site, and tried to implement the Tailwind framework and howler.js audio library.

Challenges we ran into

All four team members have very limited coding experience (two of us are Engineering students) and we had to teach ourselves JavaScript and React during the hackathon. We have no experience with Web Development but we were interested in creating a site. We were unable to get the hower.js audio to fully work and ending up omitting that portion of the demo.

Accomplishments that we're proud of

We learned basic JavaScript and CSS and were able to create working buttons using a flexbox, as well as a nice-looking website with simple functionality. The words pop up nicely and we taught ourselves how to use Tailwind to create simple animations for some buttons.

What we learned

We learned everything we know so far about JavaScript, React, and WebDev in one hackathon. We also have a better understanding of git and how to used git and GitHub to create a collaborative workflow.

What's next for Break the Barrier

Given more time and had we had more experience with the language, frameworks, and libraries, we would have implemented sound cues that would read each word or syllable. We'd like to host Break the Barrier as a fully-functional website with its own domain. We also would have created two drop-down menus to change the languages, as well as increased our database of comparable words and syllables or maybe pass in text-to-speech or Google Translate api.

Built With

• canva
• davinciresolve
• devpost
• github
• howler
• javascript
• npm
• react
• trailwind
• vscode