Code Monkey home page Code Monkey logo

spellchecker's Introduction

Spellchecker

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

snep

User Story

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.

๐Ÿ’พ How to install the project

  1. git clone [email protected]:FAC-Sixteen/spellchecker
  2. cd into the directory on your computer
  3. run npm i to install node modules
  4. Run npm start to run the website on a nodemon local server on port 8000 (http://localhost:8000)
  5. You can do npm test to run tests on handler.js

๐Ÿ“ˆ Our process

  1. Brainstormed ideas, picked one together
  2. Whiteboarded the user journey and project file structure
  3. Set up Node.js server
  4. Write tests for handler functions
  5. Write handler functions querying user input against dummy spell list
  6. Connect handler functions to the server
  7. Separate router and server into separate files
  8. Add keyboard navigation
  9. Make responsive and look great

๐Ÿ•• Stretch goals

  • 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

๐Ÿ‹๏ธโ€ What we struggled with

Importing images via the server

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.

Reaching the 404 error page

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).

Keying through spells on the DOM

Adding keyboard navigation to the autocompleted spells list was tricky - but, in the end, doable!

Favicons

errors

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

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.


๐Ÿ’ก What we learned

How to make fetch requests (a shorter, newer alternative to XMLHttpRequests)

The difference between the server, the router and the handler(s)

Keeping unrelated things in separate sections makes code easier to debug

biggie

spellchecker's People

Contributors

bobbysebolao avatar starsuit avatar fweddi avatar jokosanyang avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.