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.
Hello @gotgame
Thank you for posting within our community.
Please spare few minutes and read how project.hope is organized and learn about our economy.
That would help you understand more our goals and how are we trying to achieve them. Hopefully you will join our community and become strong part of it :)
Do you use telegram or discord? If you do then join our server and give me a shout. I would gladly share with you goals of our community and introduce to others from our team.
Consider joining our discord server: https://discord.gg/uWMJTaW
Yours,
@project.hope team,
Thank you, will make sure I do that to know if there was any detail I might have missed the first time. Cheers