How To Clone A Famous Job Board Website using Velo by Wix

All right, I'm curious if my skills can strike it rich.

I think I've come up with an extraordinary idea.

It has to do with the apps that can be recreated in Wix. Although you won't build a Clubhouse for Gen Z (no offense), Wix is still great for constructing the go-to website we use every day.

Any guesses? Job boards. Those have experienced a swell in demand due to the current pandemic.

Here are some latest reports about the current job market in the US, Canada, and Europe.

On that note, let me debut my website, which is a clone of monster.com.

For sure, you might get other results by making tweaks like replacing colors and logos. But I'm trying to get as close as possible to the original. But you can still make some amendments with Wix. Just a few clicks required.

So let's upload some icons first.

Here's the header menu.

Now let's get some help from Wix Apps.

Wasn't much helpful, so I'll make it from scratch.

Building Container Box

Here you're - the first box is ready. Yep, it wasn't a breeze, but it was worth it. You see - virtually anything can be done in this builder.

I'm adding a sign-up here. But we won't add logic into it since my goal is to make a just visual clone of Monster.

It's very easy to do a subscribe form as well. But we'll change it into a job search form.

I've moved the final version to the footer.

Notification bar

by using onClose event - we'll hide it

Then, I'll make a hero unit block.

Now, let's make it even cooler.

I think you'd agree that image adds like 5x beauty to this block.

Just copypasting labels and the large part of website style is complete.

Then, I'm adding a button.

This section looks really shiny with a video player.

I also combined both a new video and cover image for the VideoBox element from Velo.

Some more videos.

After then, I'm just copypasting. I'll apply changes a bit later.

Let's get down to new sections.

Again, it's time to copypaste blocks. And I don't even have to think about flexboxes or grid systems. Soon web developers will vanish.

Mom, look, I'm a designer now.

I'm starting a new section aka recommendations from clients. I'm also adding some quick on-hover animation. But having gray logos is a worldwide standard, so...

Ok, major part is done. Let's do some code!

If we want to display some real jobs, we need to connect our website with some sources. There can be a few different ways to do it. Like we can just download some XML file, and parse it. Very simple. More advanced way will require parsing RSS feeds(yes, it's still used in our modern web) and use it. It even will add some "dynamic" to our static website. For sure, the best way will be to create some sort of backend system. And our website will eat data from it. All magic will be handled by backend and we'll get an updated feed by CRON, for example. But I don't want to do a backend server. So no magic here :(

I will use the same workflow as I did in my previous article. Will grab some data that available for public use.

I'll make an empty block(aka skeleton) with some #ids that I can use for selectors. It will help me to append data to our website.

I'll use on page load method, but maybe better to have a button like "refresh jobs" or "load more" button that will do another round of search.

I'll use one basic online tool. it's called RSS2JSON.

here you can see how it parsing rss stuff.

https://rss2json.com/#rss_url=https%3A%2F%2Fwww.jobs.ac.uk%2Fjobs%2Ftechnical%3Fformat%3Drss

it can be also called via API. we will use it

https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.jobs.ac.uk%2Fjobs%2Ftechnical%3Fformat%3Drss

I was thinking about importing lodash, but it's not easy to include stuff from cdn. Or I didnt find the best way to do that.


import {getJSON} from 'wix-fetch';
// wix-fetch is the API we provide to make https calls in the backend


function getMeSomeData() {
  
  const API = "https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.jobs.ac.uk%2Fjobs%2Ftechnical%3Fformat%3Drss";

  getJSON(API)
    .then((json) => {

      let { items } = json

      items.map((currElement, index) => {

        // console.log("The current iteration is: " + index);
        //console.log("The current element is: " + currElement);
        //console.log("\n");

        $w("#jobId_"+index).text = currElement.id;

        $w("#card_companyname"+index).text = currElement.name;

        $w("#card_job_info"+index).text = currElement.description;

        $w("#job"+index).href = currElement.link;

        $w("#datePostedMeta"+index).text = currElement.pubDate;

        $w("#button_apply_now"+index).value = currElement.link;

      });

      $w("jobs-sections").show();


  })
  .catch(err => console.log(err));


}

I agree with you, it's a pretty simple version that can be improved.

Now let's add some homepage links. Those will be helpful for SEO too.

Adding a form that Monster uses for sending app links via SMS. We won't add it, but if you know how to use Twillio API - it's not so hard at all.

Here's the footer with even more links.

And voila, here we have it - a Monster-like clone.

This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to enter here and take a shot at winning $1000 every month, from March 1st, 2021 to May 31st, 2021