This repo contains our team project for Week 4 of Founders and Coders - Spellchecker!
Spellchecker is a website that lets users Hogwarts students quickly search a large list of words spells, receiving autocomplete suggestions while they type.
Elevator Pitch:
"OWLs around the corner? Mislaid your Remembrall? Flourish and Blotts sold their last copy of A History Of Magic? Don't worry - Spellchecker has your back. Just don't let Snape see you on your phone during class!"
Heroku link: https://w4-spellchecker.herokuapp.com/
GitHub repo link: https://github.com/FAC-Sixteen/spellchecker
The user needs to be able quickly find and select words from a list of suggestions while they type.
Their web browser sends requests to a remote Node.js server which retrieves the spells from a database. Striking a good balance between performance (page load speed) and user experience (real time spell recommendations) is important.
git clone [email protected]:FAC-Sixteen/spellchecker
- cd into the directory on your computer
- run
npm i
to install node modules - Run
npm start
to run the website on a nodemon local server on port 8000 (http://localhost:8000) - You can do
npm test
to run tests on handler.js
- Brainstormed ideas, picked one together
- Whiteboarded the user journey and project file structure
- Set up Node.js server
- Write tests for handler functions
- Write handler functions querying user input against dummy spell list
- Connect handler functions to the server
- Separate router and server into separate files
- Add keyboard navigation
- Make responsive and look great
- Wand cursor
- Ability for user to POST their own spells to the database
- A sparkly visual spell effect on spell selection
- Some kind of custom event for choosing an unforgivable curse
We couldn't understand why the handler function in our handler.js file wouldn't process requests. We never diagnosed the cause of the problem, but modularizing handler.js into three separate handler functions made it easier to find a workaround.
We struggled to catch all the possible 404 requests in our router.js file. Many requests that should have resulted in a 404 were not reaching our beautiful 404 page. This made us sad (until we fixed it).
Adding keyboard navigation to the autocompleted spells list was tricky - but, in the end, doable!
Apparently, most web browsers' default behaviour is to look for your favicon in the root directory. Moving it to a subfolder seems to cause problems.
Heroku deployment was trickier than expected. Our main problem was that there was a conflict with one of our dev dependencies (nodemon) we used for testing caused the Heroku app to crash. Once we spotted the error, we fixed it by removing a line from our package.json.
If we did this project again, we might try deploying a work-in-progress version to Heroku earlier on.