About | Technologies | How to run | How to create builds
This is a simplified version of Hapu’s ‘Become a Nanny Share Host’ landing page. The concepts applied were:
- JSX;
- Components, props and state;
- Lifecycle Methods;
- Responsive design with CSS media-queries;
- API calls;
- Error handling;
- Loading states;
- SEO & accessibility;
- A/B tests;
- Production builds.
- Typescript
- React.js
- Optimizely
-
- You must have Node.js installed on your computer
- You must have Git installed and configured on your computer.
- Also, you need to have a package manager either NPM or Yarn.
- Clone the repository:
$ git clone https://github.com/LuhBezerra/hapu.git
- Running the Application:
$ cd hapu
# Installing project dependencies.
$ yarn # or npm install
# Start the web application
$ yarn start # or npm start
The test performed consists of changing the Title and Description of the Hero section, in order to identify which of the texts best encourages user registration on the site.
The trigger of the event is on the 'Become a Nanny Share Host' button, as shown in the screenshot below:
-
The platform used to collect the test data was Optimizely, so to proceed with the execution it is necessary to register on the following platform: https://app.optimizely.com/
-
Now that you are registered, go to Settings and copied the development SDK key
-
Back to the code, create a file called .env and with the following variables:
REACT_APP_OPTIMIZELY_KEY=<your_SDK_key>
REACT_APP_USE_OPTIMIZELY=true
#With that the application will be ready to run the tests
- 2.1 The key of the flag has to be: textherosection
-
Click on the flag > Default Variables > + > Variable Key > Default Value 3.3 Name of Variable Key:
hero_text
3.4 In Default Value copy this code:
{
"title": "Easily create or join a local nanny share with Hapu",
"description": "Hapu is Airbnb for nanny share. Share your home, nanny and costs and create new flexible, affordable solutions in childcare."
}
main_text
- 4.2. Variables
{
"title": "Easily create or join a local nanny share with Hapu",
"description": "Hapu is Airbnb for nanny share. Share your home, nanny and costs and create new flexible, affordable solutions in childcare."
}
- 4.3 Go to again + > Name >Variables
- 4.3.1 Name:
secundary_text
- 4.3.2. Variables
{
"title": "Create the childcare you need at a price you can afford",
"description": "Connect with other local families to share a nanny from as low as $10.00/hr each. Create your family profile today to get started."
}
5.1 The name of the flag has to be:
registerInNannyShare
Congratulations! Now you can run the tests, so let's go
- Go back to the created flag
-
- Put Percentage Included
- Put Metrics(registerInNannyShare)
- Put Deliver Variations (main_text, secundary_text)
-
Turn on the flag
!!! Is very important that the names of the variables are as described above for the test to work !!!
-
If all goes well, your application's console will be like this:
-
To see the results, go to optimizely's Reports tab!
The hosting platform will be Vercel, so you need to have an account on it (preferably your own github)
- Import github project
- Select 'PERSONAL ACCOUNT'
- Enter the environment variables
- Ready! Now your application is online 🎉 🎉