NotMyself / ReactNorris

A Sample Application for the SSDUG Front End Face Off

ReactNorris

A Sample Application for the SSDUG Front End Face Off.

Getting Started

1. Install Node v8.2.1 or Above.
2. Install Visual Studio Code, the Insiders Edition is highly recommended.
3. Clone the repository: git clone https://github.com/NotMyself/ReactNorris.git
4. Change directory into the cloned repository cd ReactNorris.
5. Restore packages: npm install.
6. Open the directory in Visual Studio Code: code ..
7. Open the integrated terminal: ctrl ~.
8. Start the development server: npm start.

A browser window should open and display the site.

Note: You can also continuously run the unit tests by opening another terminal window and running the command npm test.

Requirements & Implementations

1. The UI must be built on Bootstrap 4.0.
   • ReactNorris uses reactstrap, a set of Bootstrap 4 based React components.
2. I must be able see the available categories from https://api.chucknorris.io.
   • The home page features a Bootstrap based dropdown button. This button defaults to Random. The user can see the list of categories in the dropdown list.
3. I must be able to select an available category, and retrieve a Chuck Norris joke from the selected category.
   • The user can select any of the categories of Chuck Jokes from the dropdown list. Clicking the button will display a random joke from that category.
4. I want to make a random joke appear every so many (5?) seconds on the website.
   • The user can flip the toggle switch below the Joke Card to automatically refresh with a new random joke from the selected category every 5 seconds.
5. I want to be able to toggle the random joke train on/off with a stylish switch. (Must use a 3rd party component)
   • Toggle switch makes this functionality happen. It uses react-switch a third party React component.
6. I must be able to search jokes with free text
   • Click the Search menu item to view the search page. The user can enter text and click the search button. All results will be displayed.
7. I must be able to see an image of Chuck Norris or digital representation of Chuck Norris.
   • The Joke Card display shows the image associated with the joke from the api results. Sadly, the image does not appear to change.

Demo