Launch a blockchain-based data marketplace in under 1 hour

Learn how to fork Ocean Market and get your own data marketplace up and running in 9 steps

Sections
1. Introduction 
2. Before You Begin 
3. Required Prerequisites 
4. Quickstart: data marketplace up and running in under 1 hour! 
   4.1 Fork Ocean Market
   4.2 Clone the market locally
   4.3 Install the dependencies
   4.4 Run your Market fork for the first time 
   4.5 Change your Market Name 
   4.6 Change the Logo
   4.7 Change the Styling 
   4.8 Change the Fee Address 
   4.9 Build and host your Data Marketplace
5. Conclusion
6. Further Reading

1. Introduction

Have you ever thought about monetising the data that your organisation generates? You might imagine that this involves dealing with data brokers, but with Ocean you can sell your data directly to your customers with no third party in-between. Ocean makes this all super easy for you with some pretty cool tech under the hood.

Using Ocean Market is already a big improvement on the alternatives that are out there, but it gets even better. Ocean Market is completely open-source and made freely available under the Apache 2 license. This means that you can fork Ocean Market and set up your own data marketplace in just a few steps. This guide will walk you through the process, you’ll be surprised how easy it is. No prior blockchain knowledge is required!

2. Before You Begin

If you’re completely unfamiliar with Ocean Market or web3 applications in general, you will benefit from reading these guides first:

1. To use your clone of Ocean Market, you’ll need a wallet. We recommend getting set up with metamask.
2. You’ll also need some Ocean tokens on a testnet to use your marketplace.
3. When you have the testnet tokens, have a go at publishing a data asset on Ocean Market.
4. Now run through the process of consuming a data asset on Ocean Market.

3. Required Prerequisites

Make sure that you have all of the necessary prerequisites:

1. Git. Instructions for installing Git can be found here.
2. Node.js can be downloaded from here (we’re using version 16 in this guide)
3. A decent code editor, such as Visual Studio Code
4. You’ll need a Github account to fork Ocean market via Github.

In addition to the above list, knowledge of CSS will help you make a quick start to adjusting the styling and prior experience with React will help but isn’t required.

4. Quickstart: Data Marketplace up and running in under 1 hour!

4.1 Fork Ocean Market

The first step is to log into Github and navigate to https://github.com/oceanprotocol/market, you’ll need to log in or create a Github account. Now you need to click “Fork” in the top right-hand corner. If you are a member of an organisation on Github, it will give you the option to clone it into either your personal account or the organisation, choose whichever is suitable for you.

4.2 Clone the market locally

Now we need to clone the market fork locally so that we can start making changes to the code. Upon forking Ocean Market, GitHub will take you to the repository page. Here, you should copy the URL of the repository. To do this, click on the green “Code” button and then click the copy icon to copy the HTTPS URL. Make sure that you have git installed and set up and installed on your computer before proceeding, see this guide if you’re not familiar with git.

Now you’re ready to make a local clone of your forked version of the Ocean Market. Open up the terminal, or command prompt on Windows. At this point, you may wish to navigate to the directory where you want this repository to live `cd Desktop` for example, but it’s also perfectly fine to clone it in the home directory.

To clone the repository, enter the following command into your terminal:

git clone https://github.com/your-profile/market.git

You need to replace the link with the HTTPS URL that you copied from GitHub. Once you enter the command, you’ll see the percentage completion reported, and then git will let you know when it’s done. Now let’s navigate into the market directory that we have just cloned:

cd market

4.3 Install the dependencies

Installing the dependencies is a vital step for running the market. It’s a super simple process, thanks to npm (node package manager). Make sure you have node.js installed, otherwise it will fail. In Ocean Market, we use node.js version 16 and it’s highly recommended that you use the same.

Enter the following command to install the dependencies:

npm install

This command will take a few minutes to complete and you’ll see some warnings as it runs (no need to worry about the warnings).

4.4 Run your Market fork for the first time

At this point, you are ready to run your data marketplace for the first time. This is another straightforward step that requires just one command:

npm start

The above command will build the development bundle and run it locally. Once it’s complete you should see the following output:

Great news — your data marketplace has successfully been built and is now running locally. Let’s check it out! Open your browser and navigate to http://localhost:8000/. You’ll see that you have a full-on clone of Ocean Market running locally. Give it a go and test out publishing and consuming data assets — everything works!

That’s all that’s required to get a clone of Ocean market working. The whole process is made simple because your clone can happily use all the smart contracts and backend components that are maintained by Ocean Protocol Foundation.

So you’ve got a fully functioning data marketplace at this point, which is pretty cool. But it doesn’t really look like your data marketplace. Right now it’s still just a clone of Ocean Market — same branding, name, logo etc. The next few steps focus on personalising your data marketplace.

4.5 Change your Market Name

It’s now time to open up your favourite code editor and start getting stuck into the code. The first thing we will be doing is changing the name of your data marketplace. A decent code editor (such as VS Code) makes this incredibly simple by searching and replacing all the places that the name appears.

Let’s start by searching and replacing “Ocean Marketplace”. In VS Code there is a magnifying glass symbol in the left-hand panel (arrow 1 in the image below) that will open up the interface for searching and replacing text. Type “Ocean Marketplace” into the first textbox, and the name of your marketplace into the second textbox (arrow 2). To make things simple, there is a button to the right of the second textbox (arrow 3) that will replace all instances at once. You can take a moment to review all the text you’re changing if you wish and then click this button.

Next up, we need to repeat the process but this time we’ll be searching and replacing “Ocean Market”. As you can see in the screenshot below, we have called our fork “Formidable Data Market”.

Now let’s change the tagline of your site. Open up the folder called “content” and then open the file called “site.json”.

On line 4 in this file, you can enter the tagline that you want for your data marketplace.

4.6 Change the Logo

The next important step to personalising your data marketplace is setting your own logo, we highly recommend using your logo in SVG format for this. The site logo is stored in the following location:

src/images/logo.svg

Delete the “logo.svg” file from that folder and paste your own logo in the same folder. If you rename your logo “logo.svg” everything will work without any problems.

At this point, it’s a good idea to check how things are looking. First, check that you have saved all of your changes, then cancel the build that’s running in your terminal (Ctrl + C or Cmnd + C) and start it again `npm start`. Once the build has finished, navigate to http://localhost:8000/ and see how things look.

As you can see in the screenshot above, changing the site name and tagline has worked well. However, our logo doesn’t look quite right… To fix this, open up the Logo.module.css file from src/components/atoms/Logo.module.css. In this file, you can see the styling that is being applied to your logo.

Delete lines 7, 8 and 9 and save the file. Now open up http://localhost:8000/and refresh the page (no need to restart the build here).

Awesome! Now our logo is fixed and looking great.

4.7 Change the Styling

Hopefully, you like our pink and purple branding but we don’t expect you to keep it in your own data marketplace. This step focuses on applying your own brand colours and styles.

4.7.1 Background

Let’s start with the background. Open up the following CSS file:

src/components/App.module.css

You’ll notice in the screenshot above that we are setting our “wave” background on line 3. Here, you’ll want to use your own background colour or image. For this example, we’ll use an SVG background from svgbackgrounds.com. We save the new background image into the src/images/ folder (same folder as the logo), then we change the CSS to the file location of the new background (see line 3 in the image below).

If we save this file and view the site at this point, we get an ugly white section at the top (see image below).

To fix this we need to change the starting position of the background image. In this situation, we can just delete “13.rem” from line 3.

Now when we view our data marketplace we can see that the new background starts at the top and fills the whole page. Perfect!

4.7.2 Brand Colours

Next up, let’s change the background colours to match your individual style. Open up the following file: src/global/_variables.css. Here you’ll see the global style colours that are set. Now is the time to get creative, or consult your brand handbook (if you already have one).

You can change these colours as much as you wish until you’re happy with how everything looks. Each time you save your changes, the site will immediately update so you can see how things look. You can see the styles chosen for this example in the image below.

And the screenshot below shows how it’s currently looking.

4.7.3 Change Fonts

The final part of the styling that we’ll alter in this guide is the fonts. This is an important step because the font used in Ocean Market is one of the few elements of the market that are copyright protected, if you want to use the same font you’ll need to purchase a license. The other copyrighted elements are the logo and the name — which we have already changed.

If you don’t already have a brand font, head over to Google Fonts to pick some fonts that suit the brand you’re trying to create. Google makes it nice and easy to see how they’ll look and it’s simple to import them into your project.

The global fonts are set in the same file as the colours, scroll down and you’ll see them on lines 36 to 41.

If you are importing fonts, such as from Google fonts, you need to make sure that you include the import statement at the top of the _variables.css file (Google Fonts provides you with this import statement so you just need to copy and paste it).

As with the colour changes, it’s a good idea to save the file with each change and check if the site is looking the way that you expected it to. You can see our eclectic choices below.

4.8 Change the Fee Address

At this point, we have made a lot of changes and hopefully you’re happy with the way that your data marketplace is looking. Given that you now have your own awesome data marketplace, it’s about time we talked about monetizing it. Yeah, that’s right — you will earn a commission when people buy and sell data assets on your marketplace.

When someone sets the pricing for their data assets in your marketplace they are informed that a commission will be sent to the owner of the data marketplace. In order to receive this commission, you need to set the market to send the commission through to your Ethereum address.

This important step is the last thing that we will change in this guide. To change the address that the marketplace fees are sent to you need to set your address as an environmental variable. Create a new file called .env in the root of your repository. It is important that the file is saved in the right place, your file structure should look the same as below.

Now copy and paste the following into the file:

GATSBY_MARKET_FEE_ADDRESS=”0xxx”

You need to replace “0xxx” with your Ethereum address and save the file. And that’s it, you now have a fully functioning data marketplace that will earn you revenue every time someone uses it.

4.9 Build and host your Data Marketplace

All that’s left is for you to host your data marketplace and start sharing it with your future users. To host your data marketplace you need to run the build command:

npm run build

This takes a few minutes to run. While this is running you can get prepared to host your new data marketplace. You have many options for hosting your data marketplace (including AWS S3, Vercel, Netlify and many more). In this guide, we will demonstrate how to host it with surge, which is completely free and very easy to use.

Open up a new terminal window and run the following command to install surge:

npm install — global surge

When this is complete, navigate back to the terminal window that is building your finished data marketplace. Once, the build is completed enter the following commands to enter the public directory and host it:

cd public
Surge

If this is your first time using surge, you will be prompted to enter an email address and password to create a free account. It will ask you to confirm the directory that it is about to publish, check that you are in the market/public/ directory and press enter to proceed. Now it gives you the option to choose the domain that you want your project to be available on. We have chosen formidable-data-market.surge.sh which is a free option. You can also set a CNAME value in your DNS to make use of your own custom domain.

After a few minutes, your upload will be complete and you’re ready to share your data marketplace. You can view the version we created in this guide here.

5. Conclusion

Well done for making it to the end of this guide. We’ve covered all of the most important steps for getting your own data marketplace setup:

1. Forking Ocean Market
2. Changing the Logo
3. Setting the name and tagline for your data marketplace.
4. Customising the styling using your own fonts, colours and background.
5. Setting your own Ethereum address as an environmental variable to receive the marketplace fees.
6. Building and publishing your data marketplace.

Hopefully you’ve enjoyed this guide and found it productive. If you’ve found it valuable, give us a clap — if we get a good response we’ll write a follow-up guide on all of the feature toggles that you can use out of the box with your fork of Ocean Market.

If you have come across any problems or issues, reach out to us on Discord or open an issue on GitHub. We are always happy to help.

All of the code in this tutorial has been pushed to this branch on Github.

6. Further Reading

1. Ocean Protocol documentation has tutorials and covers the core concepts and API references.
2. Ocean Market readme covers the core topics to get you started with running your own fork.
3. The official React documentation and Gatsby documentation will help you make changes to the front end.
4. If you intend on making any changes to the search then the Elastic search documentation is incredibly useful.