Skip to content
Url Shortner on Blockchain with Truffle & React
JavaScript Ruby CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Link Shortner

Gives you short link for long url, it is build upon blockchain therefore does not depend on central server.

How to create short url

  1. Install Metamask chrome extension
  2. Create account on metamask, change network to Ropsten Test Network.
  3. Get free ether from
  4. Visit


Share short link

Short link created can be shared with everyone without any dependencies on metamask. For example:


  1. Clone this Repository

    git clone
  2. Run the development console.

    truffle develop
  3. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with truffle.

  4. In the client directory, we run the React app. Smart contract changes must be manually recompiled and migrated.

    // in another terminal (i.e. not in the truffle develop prompt)
    cd client
    npm run start
  5. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console.

    // inside the development console.
    // outside the development console..
    truffle test
  6. Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.

    // ensure you are inside the client directory when running this
    npm run test
  7. To build the application for production, use the build script. A production build will be in the client/build folder.

    // ensure you are inside the client directory when running this
    npm run build
  8. Deploying contract on Ropsten network

truffle migrate --network ropsten


  1. Deploy client App on github
    cd client
    npm run deploy
  2. Deploy Api for reading contract on heroku
    heroku create
    heroku buildpacks:set
    heroku buildpacks:add heroku/ruby
    heroku config:set PROJECT_PATH=backend
    git push heroku master


  • How do I use this with the Ganache-CLI?

    It's as easy as modifying the config file! Check out our documentation on adding network configurations. Depending on the port you're using, you'll also need to update line 29 of client/src/utils/getWeb3.js.

  • Where is my production build?

    The production build will be in the client/build folder after running npm run build in the client folder.

  • Where can I find more documentation?

    This box is a marriage of Truffle and a React setup created with create-react-app. Either one would be a great place to start!

You can’t perform that action at this time.