# 📈 How I built my own decentralized exchange (DEX)
One of the best ways to learn new things is by practically applying the concepts.
I started studying blockchain concepts and technologies used for blockchain development, but I wanted to enhance my understanding and master new skills.
I decided to build a decentralized application.
# 🚀 What have I learned after finishing the project
I built this decentralized application mainly to learn smart contract development.
But I ended up with a more significant result because even if I was developing just a personal project, I worked on it with the responsibility to learn as many things as possible.
## Smart contract development
I understood how Solidity works, how to use existing audited smart contracts and how to protect against several attacks ([Authorization through tx.origin](https://swcregistry.io/docs/SWC-115), [Reentrancy](https://swcregistry.io/docs/SWC-110), [Assert Violation](https://swcregistry.io/docs/SWC-107)).
## Test-driven development
That was the first time I applied the test-driven methodology. It is hard at the beginning, but it pays off the effort.
After I wrote the test suite, the smart contract development was an easily accomplished task 🍰. I knew exactly what I had to implement in the smart contract.
## Liquidity pools
I understood what happens with a pair of tokens inside a liquidity pool when tokens are swapped. More details are available here: [Uniswap protocol overview](https://docs.uniswap.org/protocol/V2/concepts/protocol-overview/how-uniswap-works)
## GitHub Actions
I wanted a way to deploy my application automatically. I discovered that GitHub allows me to host my frontend application free, using [GitHub Pages](https://pages.github.com). This is a handy feature from GitHub!
I learnt how to use GitHub Actions and settled the following jobs that are triggered for each commit:
- Run tests for the smart contract
- Deploy the React application to GitHub Pages
# 🚀 Description of the project
The application is a decentralized application with similar functionality to a DEX, running on the Ethereum blockchain (Rinkeby testnet), and it provides the following functionalities:
- Metamask wallet connection
- users can mint tokens to use on the platform
- create a pool if it does not exist
- add/remove liquidity pool
- swap tokens
- check token balances
The developed smart contract will keep a 0.01% fee from each swap, and the contract owner can withdraw all the accumulated fees.
# 🚀 What technologies have I used
## Smart contract development
I developed the smart contract using Solidity using the hardhat framework:
- [Waffle](https://hardhat.org/hardhat-runner/plugins/nomiclabs-hardhat-waffle) is a hardhat plugin to test the smart contracts
- [TypeChain](https://www.npmjs.com/package/typechain) is hardhat plugin that generates types. I was excited to find this plugin because I wanted to have the application fully written in typescript.
- [Uniswap Router](https://docs.uniswap.org/protocol/V2/reference/smart-contracts/router-02) is a smart contract that provides functions to add/remove liquidity and swap tokens.
- [OpenZeppelin](https://docs.openzeppelin.com/contracts/4.x/) is a collection of trusted and audited smart contracts ready to be used. I used it for the Ownable pattern and to deploy the ERC20 tokens used in the application.
## Client application
I built the client application using React, and here I can mention two libraries:
- [ethers.js](https://docs.ethers.io/v5/) to interact with the deployed smart contract on the blockchain
- [jotai](https://jotai.org) comes with a super cool way to manage the application state
# Short application walkthrough
You will need the Metamask extension installed on your browser to interact with the application.
1. Click on your address -> manage tokens -> mint tokens
![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662125726245/04ru-2gPm.png align="left")You should own 1000 DT0 and 1000 DT1
![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662145362883/9yJh0BXjI.png align="left")Swap tokens
![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662125901543/9eXbgrjf0N.png align="left")Swap completed
![6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662125909399/iSJQnP8pp.png align="left")