Morioh
Login
Jack Downson

Jack Downson

3 years ago

A vocabulary tool for ESL teachers to increase student's audible/reading comprehension

Vocab Tiles

A vocabulary tool for ESL teachers to increase student’s audible/reading comprehension.

The problem: How to remotely teach basic vocabulary and simple phrases to Literacy students

This app helps students to learn and practice vocabulary that may have been taught in class, but which they have not yet mastered.

Students who are completely new to a language, and especially those whose prior knowledge differs highly from the target language, cannot read the directions in the target language. So the app plays audio of a word, and the student simply taps or clicks the tile that shows the correct word.

This app is most useful to students who can both see and hear, but the word also appears above the tiles, so deaf students can also benefit. It is also useful for teachers to see the students’ progress. The app will keep track of students’ average score per category as well as per quiz and display them in an admin area that only the teacher can access.

Stack

We used Vue.js are the UI frameworks with Nuxt for SSR. We use Express to write the REST API which connect to the PostgrSQL database running in a Docker instance. We used Google’s Firebase to handle user authentication and implemented a QR scanner to make logins simpler for illiterate students.

  • VueJS: A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
  • Vuex: Centralized State Management for Vue.js.
  • NuxtJS: An intuitive VueJS frameworks which allows SSR, amoung many other features.
    • Content: Nuxt Content lets you write in a content/ directory and fetch your Markdown, JSON, YAML, XML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.
    • ExpressJS: A fast, unopinionated, minimalist web framework for node. The underlying HTTP server frameworks used by Nuxt.js to serve our app which can be hooked into to setup a REST API.
  • Axios: A promise based HTTP client for the browser and node.js
  • Vuesax: Component library for for Vue.js 2.
  • Tachyons: Rapid CSS prototyping. For the hackathon this is great, but we’ll probably remove it in prod and hand write the custom CSS+

Demo

Youtube

Screenshots

Download Details:

Author: NoahCardoza

Source Code: https://github.com/NoahCardoza/VocabTiles

#vue #vuejs #javascript

A vocabulary tool for ESL teachers to increase student's audible/reading comprehension
2.25 GEEK