Hoot!

Practice English with Hoot!

Comment

Inspiration

The ability to understand English is an important part of immigrants adapting in the United States, where it is intrinsically significant as an identity marker. Although many generations were able to get by, it is difficult to socially advance without more complete language skills. Based on a 2018 Pew Research Center research, people were 'bothered' by immigrants who spoke basic English, suggesting it is not sufficient to just know the language in current day. There is even evidence that people treat immigrants without an accent better than those with. Aside from the varying levels of attitudes, having a better vocabulary is generally correlated with higher intelligence and wages as well.

We were inspired to create Hoot!, an app that can help young beginner English learners and students break past this social barrier. Although there are language apps, most of them instill a complex structure that could be hard and daunting to follow. We wanted to create a platform that simplifies all external variables and make focusing on learning better vocabulary simple.

What it does

Hoot is a vocabulary flashcard app designed to help both beginner English learners and students. The main purpose is to create a simple and straightforward way to expand the user's vocabulary, while making studying enjoyable in an amusing setting. The app keeps track of a history of searched words, which is then generated into aesthetic flashcards for easy memorization. It allows users to create flashcard sets and practice at their pace, deciding what and when to learn based off individual interests and goals.

How we built it

We used repl.io to hold repositories for both the main app and testing, while running the app on Web view to fix the presentation. We used html, css and javascript to complete the website, along with a dictionary API for the data. The prototype was made on figma, and the logo illustration was also made by the vector tool on figma as well.

Challenges we ran into

For the front-end, there were positioning issues with styling the css elements to fit the format of our design, especially the rotating flashcards that required a more complex structure. There were slight mistakes in javascript that took extra time to debug, and the short timeframe overall was really rushed. While attempting to incorporate the database, there were also MySQL configuration issues that prevented a connection and stalled the progress in starting backend, where we were not too experienced with it and had to make sense of everything. We were also from different timezones completely opposite to each other, creating a 12-hour communication gap between sleeping and working too.

Accomplishments that we're proud of

We are proud of figuring out all the tools we planned to use after the prototype on figma, and complete an exact version of what we had envisioned at the start. We're also proud to successfully connect to the backend despite conflicts, with it finally working with the frontend and ending as a working project. Brian is also proud of completing his first hackathon, and glad he experienced working together.

What we learned

We learned more about using JavaScript to connect the webpages together, along with integrating APIs into the process. We also learned to implement unique CSS details like the flipping flashcards to give a smoother experience. Currently, the website is not fully responsive, but we learned to maintain its form even when in more narrow aspect ratios. All of us were introduced to using a database and how to connect backend code to the frontend for storing user information.

What's next for Hoot

  • We can add several hidden popup features on the side to better assist the user learn and use the flashcards, such as timers.
  • Use back-end to save data and add to saved words + use in flashcards
  • Improve responsive design to make responsive on all screen sizes
  • Debug dictionary to access all words and examples
  • different colored themes and flashcards

Built With

Share this project:

Updates