This repo contains the source code for Twitt3r, a decentralized Twitter clone built on the Ethereum blockchain. The project utilizes a custom smart contract for message storage, and ENS lookups for profile information. It is deployed to the Goerli and Ropsten testnets.
Want to learn more? Read all the details in this blog post!
Built with the following technologies:
- Hardhat: Smart contract development and testing
- wagmi.sh: React hooks for Ethereum
- RainbowKit: React components for connecting wallets
- Ethereum Name Service: Profile pictures and descriptions
- Next.js: Static site builds and routing
- Tailwind: Adaptive CSS page styling
- Vercel: Web hosting and automatic deployments
To set up your own instance of Twitt3r, you will need:
- Etherscan API key
- Infura API key(s) for your chosen networks
- Deployer wallet private key with some (test) ETH
These values are specified in a .env file. Once you have those, clone the repo with the following commands:
git clone https://github.com/maxpetretta/twitt3r.xyz
cd twitt3r.xyz/hardhat
npm install
This will install all dependencies for the hardhat environment.
Once you have chosen your network, use these commands to deploy:
npx hardhat run scripts/deploy.js --network <NETWORK_NAME>
npx hardhat verify --network <NETWORK_NAME> <CONTRACT_ADDRESS> "10" "1000000000000000" "100000000000000000"
Additionally, you can deploy to a local testnet by running npx hardhat node in a separate terminal.
After you've deployed the contract, you are ready to set up the frontend website. Copy the contract address to contract.js, and optionally the ABI if you've modified the contract. Then run:
cd ../react
npm install
npm run dev
open http://localhost:3000
Testing your smart contract is not suggested, it is required. Twitt3r comes with a baseline suite of unit tests, to ensure the contract functions as expected. To run the test suite:
cd ./hardhat
npx hardhat test
Note: Must be running on local testnet
Along with testing our contract, we can also add some mock data for demoing the UI. Add mocks with npx hardhat run scripts/mock.js
Some ideas for future enhancements to Twitt3r:
- Suite of unit tests
- Live demonstration video
- Gasless "likes" using wallet signatures
- Display messages from multiple networks simultaneously
- Private DMs that only the sender/receiver can decrypt
- Overhaul frontend to take advantage of Lens Protocol 🌿
PRs are always welcome, please tag me when you're ready for merge.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent