luizamedeiros / hapu-nanny-share-remake-challenge.

A simplified version of Hapu's Nanny Share website using React and styled-components. Features API post and A/B tests, as well as a responsive design.

Getting Started with React App

This project was bootstrapped with Create React App. To run it:

1. First, download and unzip the project, or run a git clone on the repository.
2. Once you have the project locally, you'll have to do a npm install or yarn install, in the project directory.
3. After you've installed the necessary modules by following the step above, you can:

yarn start or npm start

This runs the app in development mode.
Just open http://localhost:3000 to view it in the browser. The page will reload if you make edits.

yarn build or npm build

This 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.
This makes the app ready to be deployed!

See the section about deployment for more information.

Description

Challenge goal: The purpose of this challenge is to give a general idea of how React works and how it can be used to create simple reactive applications. I've implemented a simplified version of Hapu’s ‘Become a Nanny Share Host’ view. The concepts that were applied are:

• JSX;
• Components, props and state;
• Lifecycle Methods;
• Responsive design with CSS media-queries;
• API calls;
• Error handling;
• SEO & accessibility;
• A/B tests;
• Production builds.

A/B tests

When running the app, you may end up seeing one of the two following screens:

• This is the original prototype design version.
• This is the alternative version, used for the A/B test.

Since these screens are persistent for users, once you run the project, there's a chance that the screen you first get is the screen you'll always see! This is done on purpose so that the user always has the most consistent experience possible. If for some reason you'd like to see the other screen, all you have to do is clear your browser storage session, and you should be good to go.