A Mad Libs-style game. Make a small app using React/Redux and Scss which asks a user some simple questions, and assembles the answers into a passable essay.
First, make sure you have a modern version of node and yarn.
Run yarn install before getting started.
Make your changes to these files, then run yarn start to run the compiler.
A new window should open; if not, you can visit your page at http://127.0.0.1:3000/. Any changes to the project files should trigger a new build, and a refresh.
- Screenshots of the app's design, in
/assets/. - The main app folder,
/src/, where you'll be making your changes. - A ducks
file,
/src/madlibs.js. This file contains the reducer, the initial state, along with some example actions. - A constants file,
/src/constants.js. It contains the questions and potential essay templates. - A helpers file,
/src/helpers.js. It contains a function with templates for a given field. - A folder for React components,
/src/components/.
- Prompts appear in the left column, and the essay preview on the right.
- Each "prompt" consists of a question and an input.
- When the user blurs the input, the app should "save" their response and update the essay preview.
- To generate the essay preview, choose one of the available templates at random.
- Changing one answer should re-roll that answer's template, but not the chosen templates of other fields.
- The user's responses in the essay preview should be bold.
- When the user has answered and blurred all questions, an "Edit" button appears.
- When a user clicks "Edit", replace both columns with a centered textarea containing the generated essay content.
- When a user clicks "Start over", they should see the original screen without any user text.
Some more details:
- Don't worry about vendor prefixes; target the latest version of Chrome.
- The app should compile without any errors.
- Create as many or as few subcomponents as you like.
- Use whatever libraries you want. (But remember: if you worked here, we would want to pay attention to payload size. Choose wisely!)
- Eyeball the margins, paddings, and colors.
Remove the node_modules directory, zip up this project directory, and send it
back to us.
Thanks for your time, and good luck! We look forward to hearing from you!