whatapalaver / anagram_react

A React Interpretation of Anagram Challenge

Anagram Solver - React Frontend

This is the second part to a tech test where we were asked to demonstrate our JavaScript abilities with a simple anagram challenge. The part 1 test was completed in Node.js and fully TDD's with Jasmine. This version just takes that code with minimal tweaking, to demonstrate an interactive frontend.

Currently hosted on Heroku Anagram Solver

Original Challenge Instructions

Imagine you are in a work environment, and a colleague has asked you to create a simple interactive application which can solve anagrams.

For a word entered by the user, generate a list of all possible anagrams contained in this wordlist.

For instance, if the user enters paste, your program should produce the results pates, peats, septa, spate, tapes, and tepas.

Consider especially how we will know if your code is correct, without having to run it exhaustively against the entire word list.

You may also wish to consider how your code handles edge cases such as hyphenated words.

User Stories

---

As a player
Who fancies cheating at scrabble
I would like to generate a list of anasgrams for a given word

As a player
Who likes a flashy interface
I would like a 60's styled web app

As a player
Who may need to cheat on the go
I would like a responsive design

Discussion relating to the React Challenge

You can see a full discussion of the anagram coding logic in the README to the part 1 test

Additional issues with React

I struggled to handle the text file with the allowable wordlist so initially mocked it up with a very small array. That significantly removes the joy of playing with the app. I have managed to connect to the local text file but loading is very slow and it causes the browser to complain about the handling time.

I also need to correct the error on display of the individual results that occurs because I haven't added unique id's for each item.

To Use

• Clone or fork this project git clone https://github.com/Whatapalaver/anagram_react.git
• Change into the directory cd anagram_react
• Install dependencies npm install

Shout Outs

After deployment to Heroku I faced some memory exceptions relating to an unoptimised build. This article by Jeremy Gottfried proved to be useful in explaining how to easily set up an express server to serve a minified production build.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.