Learn a Word Project

A simple website that allows users to learn random words by retyping the definition. In addition, a side game named "Cuppy" (inspired by Hangman) is used to grab a random word that the user has learned to review.

APIs Used

• Get a random word: https://random-word-api.herokuapp.com/word
• Get definition, part of speech, pronunciation (audio and written), and stems: https://www.dictionaryapi.com/

Frameworks/Libraries Used

• Frontend: React, Bootstrap, React Kawaii
• Backend: Django
• Database: PostgreSQL

Quick Walkthrough of the Website

• Not logged in:

  • 
  • 

• Logged in:

Screen.Recording.2022-08-29.at.2.32.00.PM.mov

• The homepage would display all the words they have learned.

Screen.Recording.2022-08-29.at.2.39.15.PM.mov

• Navigating from leaderboard (showing top 10) to home.

Screen.Recording.2022-08-29.at.2.41.53.PM.mov

• Profile page allows user to edit their avatar and change their username, email, and password.

final_630d1892bf37a200a071b20f_500059.mp4

• Randomly grab a word for the user to learn. Disable pasting and check if the user types in the definition correctly.

final_630d1b0ac2b0b300722f0960_479139.mp4

• Randomly grab a word that the user has learned before. Each wrong guess will progress to a different cup.

final_630d1c20433a7800552be615_175782.mp4

• Responsive