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

Stargazers

Grzegorz Leoniec avatar

Watchers

James Cloos avatar

spellchecker's Issues

TESTS!

YOU HAVE THEM!

AND THEY'RE PASSING!

๐Ÿ’ฏ

I think you implemented them in a really DRY and effective way too. Very impressed.

394?

What is the reference to 394 at the bottom right of page? could this number change based on spell?

Potentially include more descriptive error logs

Just a small recommendation, but sometimes it can be worth including a small amount of your own descriptions when logging errors.

E.g. In the handler routes:

const handleHomeRoute = (req, res) => {
        fs.readFile(
            path.join(__dirname, "..", "..", "public", "index.html"),
            (error, file) => {
                if (error) {
                    console.log(error);
                    return;
                }
                res.writeHead(200, {
                    "Content-Type": "text/html"
                });
                res.end(file);
            }
        );
    }

The error section could become

 if (error) {
                    console.log("Error in the handleHomeRoute function: ", error);
                    return;
                }

As long as you include a comma after the string you can include the two arguments in console.log
Like I said it's just a minor thing, but sometimes the extra context can help because the errors themselves aren't always the most specific.
๐Ÿ˜„

Readme is amazing!

It is thorough, clear, contains a description, installation, and info about your process. Love it!!

Also that elevator pitch ๐Ÿ‘

Spell lingers

Not sure if it was intentional but the spell that was last clicked stays there even when the input field is cleared
Screenshot 2019-03-29 at 10 43 29
Maybe you could clear the ul element containing them when the user clicks a new key?

Congrats everyone!!

I'm really impressed overall! Your project is clean and well thought through. There are tests, BEM, and a lot of great ideas! Much cleaner than projects we managed to do in our time ๐Ÿ˜‰

Procfile

I saw that you had problems with Heroku, was the Procfile used to help fix that? I see that it's simply for starting your node server, although as far as I'm aware it shouldn't be needed as long as your start script in the package.json file is correct (as it seems to be). Did it not work without the Procfile?

event.which vs event.key

if (event.which === 40) {

event.which is an old deprecated property. You'll probably find it easier to use event.key. This actually gives you a string representation of the character rather than a keyCode (e.g. `"ArrowDown", "Enter", "Escape" etc)

Error-handling on the server

If you run into a JS error on the server it's important to still send a response back to the browser. Otherwise the request will just hang until the browser eventually gives up and times out (usually >30s).

Since you just return here you're swallowing this error. It would be better to set a 500 status and send some error HTML. You can see an example of this in another group's project:

https://github.com/FAC-Sixteen/Wonder3-V2/blob/c9d89d1f5cb67b29915412fe1086ccd316f8c0ad/src/handler.js#L29

What is the lumos header for?

I see this in the index.html:

<header>
      <h1 class="">Lumos!</h1>
    </header>

But don't see it appear anywhere on the page. Does it have a purpose?

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.