Coinic – Web 3.0 Blockchain Project!
Web 3.0 paves the way for a future in which different people and machines can interact with data, value, and other counterparties without the involvement of third parties. Anyway, It’s so trendy and exciting that, I can’t control myself to give it a try. So I was searching for such projects and again got stuck to this man, the JSM Adrian, who is the one and only master of JS projects over the internet. Anyway, it’s so much fun doing this, though pretty complex but at the same time so much compelling. It feels so satisfied after deploying this one: https://rdc-coinic.netlify.app/
You can do the actual crypto transaction by connecting your Metamask wallet.
Those who don’t know about Blockchain & Etherium:
- Blockchain: A blockchain is a decentralized, distributed, and frequently public digital ledger made up of documents called blocks that are used to record transactions across many computers in such a way that anyone’s block can’t be changed without affecting all following blocks. Blockchains such as Bitcoin and Ethereum are well-known examples. Anyone can connect to the blockchain and conduct transactions on it.
- Ethereum: Ethereum is a decentralized, open-source blockchain that allows users to create smart contracts. The platform’s native cryptocurrency is Ether. Ether is the second most valuable cryptocurrency after Bitcoin in terms of market valuation. Ethereum (also known as Ether) is a decentralized computing platform that accepts ETH (also known as Ether) to pay transaction fees (also known as “gas”).
The following technologies are used to create this amazing project:
- Vite: Vite is a frontend tool, to get started with a project so quickly. It’s a native ESM-based dev server. It seems like a bundler, but it is more than this as Vite is 10-100x faster than JavaScript-based bundlers.
- React: The most popular JS Library, a collection of vanilla JS code, is concerned with the frontend only.
- Tailwind: A utility-first CSS framework packed with classes like flex, pt-4, text-center, etc. that can be composed to build any design, directly in your markup.
- Solidity: Solidity is an object-oriented programming language that is used to create smart contracts on a variety of blockchain systems, including Ethereum. Solidity programs run on the Ethereum Virtual Machine.
- Alchemy: It’s a blockchain development platform, there are a lot of helpful blockchain resources which make web3 development easy.
- Hardhat: It’s an Ethereum development platform. It will compile your contracts and run them on a development network. It allows you to run solidity locally, so you can test your smart contract before deploying.
- Metamask: It’s a crypto wallet, and it’s available as a browser extension and as a mobile app. Anyway, the metamask is a gateway to blockchain applications. In other words, MetaMask is a software cryptocurrency wallet used to interact with the Ethereum blockchain. Users can utilize a browser extension or a mobile app to access their Ethereum wallet, which can then be used to interact with decentralized applications.
- Ghiphy: Giphy (stylized as GIPHY) is an online database and search engine based in the United States that allows users to find and share short looping films with no sound that look like animated GIF files.
Steps are followed to develop this project:
- Installing Hardhat: to create a basic structure we can use hardhat: You just need to write a few commands, which you get from this doc: https://hardhat.org/getting-started/, and you will immediately get some files and folders.
- Writing solidity smart contract: Then, you need to create an Ethereum solidity smart contract under the contract folder with solidity. It’s used to transfer the amount and also store all of the transactions that come through it.
- Writing deployment scripts: So just writing the contract will not work. Now there needs some setup for deploying and testing this contract. For this, you have to go to the scripts folder, over there you will get a sample sample-scripts.js; So when we run this script our transaction will be deployed, and we will get the address of our smart contract over the blockchain network.
- Installing Metamask: For deploying the contract we need some Ethereum on our wallet, for testing purposes, we can get a few Ropsten Testnet Faucets for free and create a Metamask account. (So after getting some free Ethereum for deploying fees)
- Hosting Smart-contract: Now we need alchemy to help for deploying our blockchain smart contracts, just create an app and take the HTTP key. Then under the hardhet.config.js file, link this key and your metamask account private key
So far the takeaway is we have a config file (hardhet.config.js), we have a solidity smart contract (Transaction.sol) under contract folder, and we have a script for deploying (deploy.js) under the scripts folder.
Smart Contract Deploying:
Finlay for deploying you need a final command to run on the terminal:
npx hardhat run scripts/deploy.js --network ropston
By running this command we will get two outputs:
- The terminal will give the address of deployed contract: Transaction deployed to xxxx xxx xxx
- Also a JSON file under artifacts > contracts > Transactions.sol > transactions.json; which is called an abi (contract application binary interface). This is a standard way to interact with contracts in the Ethereum ecosystem. This contains all the information about our specific smart contracts
Interacting with Smart Contract:
So take this address and JSON file in your client-side application, and put it under the utils folder. And export this for your application, so that you can interact with the Ethereum smart contract with your application.
Now finally work on your application with all this info.
What I have learned:
- How to connect react JS application to the blockchain and pair it with your Ethereum wallet by using metamask
- How to write smart contracts on the Ethereum network using the Solidity programming language
Final words:
It’s a complete web 3.0 application, that allows users to send transactions through blockchain. Anyway, it was a good start, and I would like to continue working with blockchain in the future. I enjoyed doing this and learned a lot: here is the project repo link: https://github.com/RajonDey/coinic-project
Do projects • learn technologies • share knowledge!
Happy Coding 🙂
