michannstoner / articulate Goto Github PK

A solo final project by Michann Stoner. Original project spec can be found here.

• Description
• Setup
• Technologies
• Planning
• Reflections

Maybe you aren't feeling confident in your lexicon, maybe you're trying to tighten up that resume to sound ✨extra✨ professional, or maybe you just love words! ARTICULATE. is a word search application, where users can search for a word to see its definition, pronunciation, synonyms, or see it used in an example. Users can also add a word to their favorites, and view the favorites section to be able to come back to a word.

See it in action here!

• From your terminal, git clone this repository
• cd into the project directory
• Run $npm install to install dependencies
• Run $npm start
• Your default browser should automatically open ARTICULATE.

OR

• View deployed application here

• Once in project directory, run npx cypress open
• In the integration directory, click on the file you'd like to see the testing for
• A Cypress window should open
• Tests should run automatically

• Wireframe made using Figma

• Project planning via GitHub Projects

I was so excited to get started on this project. Initially, I struggled coming up with a "niche" enough topic, where I could get pretty specific about my users. But once I found the words API, I knew I was going to have fun with it! I built out my wireframe after finding some inspiration, and completed my project board on day one. I worked through the basics of the component structure fairly quickly, but hit a few snags with how information was coming in from the API with certain words. I spent some time analyzing the data, forming some plans, and then continued to work. I used my project board to guage how long my remaining tasks would take, and ended up completing styling and functionality before moving on to Cypress testing. All in all, I feel like I stayed on track and wrapped the project up right in the amount of time I had expected.

I'd say some wins for this project would be how quickly the data came through to be displayed on the DOM. It's been fun to observe my own progress with building React applications from scratch. Five weeks ago it was a little fuzzy and pretty slow-moving. I also really enjoyed styling this project a lot.

A challenge I encountered on this project was dealing with the data from a public API. I had to fetch my data for each search query, rather than being able to fetch all of it in componentDidMount and storing it in state, then iterating through it to find a word match. Because of that, error handling and navigation was a little different than what I've done in previous projects. Also, I found the data to be somewhat inconsistent - where some words have synonyms/examples/pronunciation, etc. and others did not, so I had to get creative with how to take care of those inconsistencies.

• Have more information in the favorites section - be able to click a word and view the details again
• An option to randomize words!
• Setting up local storage so that favorited words persist on page reload
• An audio clip of the word pronunciation
• More definition options