A student-friendly dictionary app with access to more than 150,000 words, developed with secondary students, developing readers, and English Language Learners in mind. Built with React.
- Renders student-friendly definitions, synonyms, antonyms, and example sentences to support understanding of new words and build on existing schema/prior knowledge
- Spanish translation of word supports native-Spanish speakers and uses their prior knowledge to support their English language development
- Displays 4 supporting images/visual aids to further support understanding of new word
- Utlizes 3 APIs including the Merriam Webster Intermediate Dictionary API for Grades 6-8, Merriam Webster Spanish English Dictionary API, and the Pexels Image API
What was the inspiration behind this project?
The idea started with a common experience I had as a former English Teacher. My developing readers, many behind by more than 3 reading levels and some also native-Spanish speakers still learning the language, would come across a word they didn't yet know and would ask for its meaning. After some investigating and looking at context clues, I'd always have them Google the definition. However, often times, the language used in the definition was not at all student-friendly and students would read the definiton and look at me even more puzzled. The dictionary didn't help!
For this dictionary app, I've used the Merriam Webster Intermediate Dictionary API for Grades 6-8 along with 2 other APIs to render student-friendly definitions along with other supporting material to really support students in understanding a new word (with synonyms, antonyms, example sentences, spanish translations, supporting images, etc.) As Educators do, I designed this tool with multiple learning modalities so students can see the word, hear the word, associate the word with other words they know, etc. to really support their understanding and language development.
What did you learn while building this project? What challenges did you face and how did you overcome them?
I've learned so much building this app! I actually started building this app with the Merriam Webster API, but then had to scale back, use a simpler dictionary API, learn some more advanced React, and then I was able to go back to the Merriam Webster API and intergrate it completely. Needless to say, after building this app 3 different times, it's been a journey and I've grown!
For this project, I challenged myself by using not only one but three different APIs I had never used before. I had just completed my SheCodes bootcamp and wanted to build an educational tool with React, on my own, for additional practice and experience. I started by researching the Merriam Webster API documentation and I found the Merriam Webster Intermediate Thesaurus for Grades 6-8. Making the API call wasn't that difficult, however, when I began integrating the API and trying to render certain data, I hit a roadbloack because the data was really nested in the API response and I didn't quite know how to access it yet, but I knew I had to map through the data. So I did some research, asked for support, and ended up scaling back and using a simpler Dictionary App. Asking for help and reviewing other developer's code helped me so much. I learned about nested loops and learned how to access the data I needed by mapping through multiple arrays. I originally thought building this app a second time was a waste of time, but I realized as I was rebuilding it that the detour was necessary and there was something valuable to learn.
Once I understood how to map through more than 1 array to access the API data, I was able to go back to the Merriam Webster API and intergrate it completely. Rendering the example sentence was the most challenging data set to render so I was elated when I was finally able to render it! I learned that I am capable of developing a functional educational tool on my own in React. I persisted and used my resources. I created lists, small checkpoints and goals, and followed through in order to make progress. It's not perfect and the app is still a work in progress but I'm proud of what I've been able to accomplish so far at this point in my journey!
I am a former Educator, aspiring to work as a Developer for an EdTech company and this project showcases my work ethic, intentionality, persistence, and talent. Interested in working together? Let's collaborate!