SlangChallenge is an app focused on problem solving for a specific interview. This application was build using React and NestJS.
We’d like you to build an application which presents users with English spelling exercises. The user will be presented with the pronunciation of an English term and a pool of scrambled letters from that term’s spelling, and the user must provide the correct spelling of the term. The application should give the user feedback about their spelling before continuing on to the next exercise.
- Frontend: yarn start
- Backedn: yarn start
- React (Hooks)
- NestJS
- Axios
- Bootstrap
- Sass
- React DND
- Typescript
- Dictionary of english terms. Using this api Herokuapp
- Select one term aleatory
- Scramble the letters
- Provide pronunciation Hello World! (Speech) | Documentation For Voicerss
- Allows drag and drop letters, or by keyboard Using React DND
- Allows user keyboard input
- Block user input letters that are not avaliable on the initial list (Keyboard)
- Feedback to the user
- For correct answer show success, or check signal
- For incorrect answer show the difference between the user answer and the correct answer
- play the speech when the screen starts
- display the difference between the user’s spelling and the correct spelling.
- Responsive version
- Unit Testing
- Score page
- Implements feedback for axios response error
- Jest doesn't recognise the "Audio" methods, I had to add those:
window.HTMLMediaElement.prototype.load = () => {};
window.HTMLMediaElement.prototype.pause = () => {}; - I hade to add this '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$' in order to allow importing mp3 files on unit testing
- I couldn't until now get/set component state using Enzyme with React Hooks
- Jquery on keydown/keyup/keypress event, firing too many times. Inserted an input, so the event is fired once. For other cases I used "e.stopImmediatePropagation();"
- I couldn't find a way to "await" mouting components for testing, when those have an async method been called inside.
Possible solution: Remove async methods to an Redux action, and pass it as a props. After implement this async method using axios mocking
Following this tutorial in order to make it work
Feel free to contact me by email, or access my website for more.
MIT