Tec App

You can see our live link here

Problem

Kids getting bored while searching English vocabulary in dictionaries in an ordinary way and without visual pictures.

Solution

Tec App with a special character "Tec", that enable kids to have an enjoyable journey to learn English vocabulary with colorful pictures and right pronounciation for words. With an attractive design for boys and girls in different ages.

Brief Description

Tec App is built for children who gets bored with the academic way of learning English, so we made it more funny. When a user searches for a word, he will get a picture discripes his word and an audio that pronounces the word correctly. The app keeps the words that the user searched about inhistory page and gives him the ability to clear his saved words. Also users will find a robot talking to them in a funny way and that could make it more interesting for kids.

Wireframes:

1- Home Page:

2- Who Is Tec Page:

3- Search Page:

4- History Page:

Figma Link:

This link showcases a general overview of the project that team members designed.here

User Story

As a user I want to learn new vocabs in a fun way and gain information without getting bored, so I need a valuable and funny source. In Tec App I can:

• Find a robot talking to me in an interesting way and takes me to the search page.
• Write any word in the search bar.
• See a picture that describes my word.
• Listen to the pronunciation of my word.
• Listen again to the pronunciation many times.
• Find my words saved in the history page to revise them.
• Clear history by clicking Remove All button.
• Return to the home page through the house icon.

User Journey

This application consists of four pages:

• Home Page: When the user open the application he will be in the home page that includes Tec robot greeting him/her and two buttons to interact. The first button -Who is Tec- takes him to About page that gives a brief description of the application and he can start using the app by clicking Let's start button. The second button in home page -Learn with tec- moves the user directly to search page.
• Search Page: In search page you can write your word in the search bar and you will see a picture describing the word and an audio to learn you how to pronounce it; in addition, there is a button -Listen Again- allows the user to replay the pronunciation of the word. Else, you can either return to home page by clicking the house icon or move to next page -History- on clicking your words' button.
• History Page This page contains the previous words which the user searched about before arranged. There is remove all button to clear all the history. Also from here he can step back to search page through the arrow icon or return to home page by clicking the house icon.

The Way of installation the project to run it locally:

• git clone
• cd Tec Application
• go live server

Tech Stack:

• HTML
• CSS
• Javascript (DOM and Localstorage)
• API

Team Members:

We are four developers:

• Ahmad Sabbah
• Noor Abunamus
• Ahmed Hamouda
• Ahmed Sinwar

Supervised By : Alaa Taima