Homefirst – Develop and code-Replicate in React JS for Front-end

HomeFirst is an innovative online platform that aims to revolutionize the real estate industry by providing a comprehensive suite of services for home buyers, sellers, and renters.

React

HomeFirst is an innovative online platform that aims to revolutionize the real estate industry by providing a comprehensive suite of services for home buyers, sellers, and renters.

Our Contribution

  • Initial boilerplate setup with React and Bootstrap
  • Start designing from provided simple site
  • Fix some issue and add new page after clients review

Start On: 08/05/2022

Published On: 07/16/2023

Skills: , , ,

Live demo

This is one of the most interesting projects we made using HTML5, CSS3, javaScript, and mostly React.Js. The client wants to develop and code-Replicate in React for frontend from an existing website reference.

React Job Description:

Develop and code-Replicate website in React JS for Front-end

We are an Ad Agency based in the United States that is outsourcing a project.

Project:

Replicate an existing website in React JS on the front end in both a desktop and mobile environment. TO BE CLEAR THIS MUST BE DEVELOPED ON THE FRONT END USING REACT JS. NO OTHER WAY. The backend will be controlled using a wordpress environment. We call this a Headless CMS. To be clear WORDPRESS WILL ONLY BE THE BACKEND. This website also has a blog. Develop and code-Replicate in React JS for Front-end

The website you will be recreating is :

Home

You will be changing the logo in the upper left-hand corner and the phone number will be different and the address will be different. But the functionality of the website and images will all be the same. The copy will all stay the same, except for anything relating to the location and company name. Every function on that website shall be replicated.

Very Important final delivery must:

1. You will have to pass every aspect for mobile and desktop for https://pagespeed.web.dev.

2. Have zero errors on w3cvalidtor and minimal warnings.

https://validator.w3.org

Challenges:

We faced so many challenges while making this website but we really enjoyed overcoming all these. The requirements from the client were to convert WordPress to React keeping all design and functionality the same. After converting to react page speed need to be 90%+ on desktop and 80%+ on mobile. Also, all blog posts need to be fetched from their existing WordPress inside react. So they will post in WordPress and posts will show in react front-end.

Problems:

At first, when we were building this website we ran into many problems. Most of the problems were related to animations, using the contact form on react, fetching blog posts with rest API, and performance.

Our Solutions:

We have solved the problems of animation through JavaScript and CSS.

In order to make contact work, we searched Google and found some plugins, among them we choose Formspree – (A easier solution to add forms in the front end through their API). It’s really easy to use and client were also happy with its features.

For fetching WordPress posts inside react frontend we added 2 rest API plugins to get some endpoints. The rest of the things were really easy to use.

To increase the performance of the site, the client is required to use Google’s https://pagespeed.web.dev/ site. After we checked the performance and found many problems, we solved all the problems, such as reducing the image size and reducing the size of assets. By doing this we were able to solve the performance issue of our site.