How to create a crypto exchange on the Ethereum blockchain using Node.js/React.js/Solidity - Part 1

Objective

In this post I am going to start with a new tutorial series where we will be building a crypto exchange on the Ethereum Blockchain. This series was inspired by a similar series by Dapp University.

The crypto exchange will contain a buy/sell feature and will have Ethereum and ERC20 token pairs.

Starter Modules

We will be using Node.js and React for backend and frontend so you would need to have Node.js installed.

You can refer to enter link description here to install Node.js if you don't already have it installed.

We are also going to need to install Ganache which is a personal version of the Ethereum blockchain that can be used for development.

You can download Ganache by clicking ion the link above.

We will also be needing the Truffle framework, you can install it by running the following command

npm install --g truffle@5.1.14

Lastly, you would need to install Metamask wallet, you can download it here.

Setting up the project

In order to set up the project we are going to use a template that has been created already by [Dappuniversity](htt
ps://www.youtube.com/channel/UCY0xL8V6NzzFcwzHCgB8orQ) and can be found on Github.

Make sure you have Git installed and in your command prompt or terminal run the following command to clone the template.

git clone https://github.com/dappuniversity/starter_kit.git

Open the cloned folder in your code editor and terminal.

Install all project dependencies in the project root directory by running npm install

Once you have all the modules installed you should see a result like this in the console

Also we need to install identicon.js which will be used to create icons for users.

Run the following line to install the package

npm install identicon.js --save

Now that we have all of that set up, we can move on to the next feature

Truffle app configuration

In the root directory of the boilerplate we cloned, there is a file truffle-config.js. The file is the entry point for our Truffle App and is what we will use to configure the expected app behavior of our app.

Here's an explanation of the code in the file

networks: {
    development: {
        host:  "127.0.0.1",
        port:  7545,
        network_id:  "*"  // Match any network id
    },
}

The object above sets the connection option for the app to Ganache the blockchain that I mentioned before.

If you haven't installed it please go back and do so now.

compilers: {
    solc: {
        optimizer: {
            enabled:  true,
            runs:  200
        }
    }
}

The code above helps us set the compiler we choose to use for our smart contracts

contracts_directory:  './src/contracts/',
contracts_build_directory:  './src/abis/'

The last part above shows us where the smart contracts are located in the project.

Smart Contracts

If we check in src/contracts folder we will see a file named Migrations.sol, this file is a solidity file and that is why it has an extension .sol.

Solidity is the language all smart contracts are written in.

All truffle projects have a Migrations.sol file which helps to handle the deployment of other smart contracts to the blockchain.

We also have a migrations directory in the root folder which is where we will store all the migrations we create.

Front End

Most, if not all the files related to the front end and visuals of our exchange will be stored in the src/components directory and will be written with React.js.

Starting the project server

In order to start the project server, open the project directory in the terminal and run

npm run start

If all the installations were done correctly, we should have something like this in the console

If you visit localhost://3000 in your browser you should see something like this

We are also going to be using Bootstrap as our CSS framework of choice.

Now we have our server up and we can move on to the next phase of our tutorial.

That is how far we are going to go in this post, in our next post we will continue with the development of our exchange. Cheers.