gabrielavoll / okc_web_takehome

simple React.JS | Redux.JS Mad-Libs Web App

Note from Gabriela Voll

React.js | Redux.js Mad-Lib Web App ============> http://gato333.github.io/okc_web_takehome/

The final product exists at the above link AND it can be run LOCALLY by pulling down the git repository and following the instructions under How to use without any updates to the original build, and without any errors or warnings.

I didnt add any additional modules to get this web app going, since the requirements were very simple, EXCEPT gh-pages module just so I could get this web app hosted on Github Pages, it wasnt necessary and the app works fine locally without it installed BUT since this is the first time I've heard of Github Pages being able to support more complex build deployment I had to give it a go.

It wasnt asked for, but I implemented some test for the larger/more complex components and on madlibs.js (for the actions and reducer)

OkCupid Take-Home Exercise

Welcome to the OkCupid take-home exercise! This will roughly model the type of projects you'd work on at OkCupid.

This repository contains the structure of a React/Redux application, as well as a webpack setup to compile the files. We'd like you to use them to implement a feature for us.

Approach this exercise as if you worked here: make sure your code is clear and concise, and use your time wisely.

The feature

A feature of OkCupid, and one of the things that differentiates our site, is the essay -- a space for people to write about themselves on their profile. But it can be hard for users to write so freely without a prompt.

We'd like to make writing an essay easy and fun, and one idea we had is to make a Mad Libs-style game.

Your job is to make a small app using React/Redux and Scss which asks a user some simple questions, and assembles the answers into a passable essay.

How to use

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.

What's there

• 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/.

Requirements

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

When you're done

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!