This project was developed as part of the hiring process for Jungle devs. The goal was to replicate this design and apply the following concepts:

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

bootstrapped with Create React App.

In order to run the project in development mode, you can run:

It opens http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

run npm run build to create the build folder. Also, the project is already deployed in Github Pages: guidugaich.github.io/jungle-challenge

This project uses React (with Hooks), and pure CSS with media queries. I also used a third-party service for AB testing, as described in the following section

For the A/B testing I used an external library called react-lean-analytics. It lets you build the UI with an Experiment component and several Variant components within it. Then it sends the data to a web service in https://leananalytics.io/lab/ and you can see the comparison:

The Original is the variant in the design version and the Alternative is the other one in the challange's README.md. It compares the success cases (form was filled and sent) against the non-click cases (just a visit to the page). The service is free of charge and pretty simple to setup. I also researched other services that would be more suitable for production-ready applications, like firebase and optimizely. But for the purpose of this project, the one applied was simpler.

All components are in the ./src/components folder, and the components themselves are folders that contain both an index.jsx and a style.css file.

There are 2 test cases implemented, both related to the form. They check the email validation and if the correct API call was made after submitting. Tests can be checked with npm run test