JoakimTeixeira/idiom-frontend

Site for English learning

Idiom Frontend

Final Project - Matrix 3rd edition - Frontend

The Matrix 3.0 Project proposes to teach the English language.

Interface - Front-end

Below are the interfaces from which the user can use to learn english. The system is based on flashcards (Space Repetition System), with audio and text support.

Login / Signup

In this interface, the user have 2 options: login or signup. This system uses token authentication with OAuth, to connect with a server written in Java.

Audio List

Here, the user have the list of audios that he's learning.

Features:

• English Title
• Portuguese Title
• Action: Acess audio

Main Learning Hall

After selection the phrase from the list, the user can interact with it.

Features:

1. Go back to audio list
2. Listen to audio
3. Add bookmark, Advance 3 seconds in audio, Go back 3 seconds in audio
4. Audio speed
   • Decrease audio speed
   • Current audio speed
   • Increase audio speed
5. Show/hide keyboard shortcuts
6. Show/hide bookmark list
7. Bookmark list
   • Bookmark start
   • Bookmark end
   • Actions: play audio or delete bookmark
8. Audio subtitles
   • Show/hide Portuguese text
   • Show/hide English text
   • Show/hide all text

Keyboard shortcuts

In this popup, the user can see all the system's shortcuts

Features:

1. Decrease audio speed
2. Increase audio speed
3. Go backwards 3 seconds of audio
4. Play / pause audio
5. Go forwards 3 seconds of audio
6. Add a marker

Server - Back-end

You can check out the server development in this repostory: Idiom Backend