▶️Creating my first DApp

Discover how to create your own DApp, which enables you to sell digital collectibles, facilitate token trading, and share the experience with your friends.

On this specific widget you will be able to input your featured collections or assets on sale. On this specific widget you will be able to input your featured collections or assets on sale. In order to make it easier for you to create your first DApp, we have divided all the information into stages (both in the DexAppBuilder wizard and in this documentation).

First of all enter this link, which will take you to the backend where you will create and manage your DApps. Now it's easier to deploy any dApp available in the platform.

Remember that you're now interacting with a Beta product, so it may present unexpected behaviors. If you found any, please let us know on our Discord server.

Are you in? 🤓 Now connect your wallet clicking in the button located in the left-upper corner. You can use Metamask or any other Web3 wallet.

First steps

Settings section

  1. Name of your DApp (or domain name): Be creative, or just follow your brand path. Important! Take in consideration that this is the only feature that cannot be changed once deployed because once in production this option can't be edited. Think well about this.

  2. DApp email: This email won't be published and this is the contact method we will use in order to send you (with your consent) our Newsletter and, if you are Premium user, you'll receive your bill there as well. You will need to confirm this email as soon you create the DApp.

After filling those both lines, click on the blue button «CREATE APP», sign digitally in your wallet. You will get a pop-up message that will need your authorization.

Digital signatures on DexKit platform are safe and free so you can use any wallet, even without funds.

If everything goes fine you will see the following modal:

General

  1. Logos. PNG or SVG 150*150px (square image) is recommended. Clicking on the «DexAppBuilder by DexKit» image will open you an upload menu. We will host your images for you.

  2. Logo sizes for mobile and desktop.

  3. Favicon URL. 20*20px PNG or SVG recommended. Click on the Kittygotchi purple icon and upload your image.

  4. Languages: English (US) as default language, Portuguese, Spanish, German, Francais, Italian, Norwegian and Czech.

  5. Currencies: US dollar, Euro, Brazil Real, Indian Rupee, Czech Koruna, Argentine Peso, Swiss Franc, Chilean Peso, Venezuelan Bolivar and Nigerian Naira.

Domain

We will host your DApp using a centralized and reliable service. Also we are including a custom URL for your DApp with *.dexkit.app suffix, so you won't need to buy any domain, nor any hosting to deploy it.

At the same time, we're keeping the custom domain section, so you can use one of your domain's subdomains and call your DApp from there.

We have a tutorial here about adding a CNAME entry on CloudFlare.

When you are adding your CNAME following 'cname.vercel-dns.com' in your hosting provider you need to add as well an A-type registry, with '@' as Name and '76.76.21.21' to avoid issues with redirection.

If you are not using this optional feature you can keep the field in blank and move forward.

Social

Add custom links by clicking on the «+Add custom» button.

Layout section

Theme

Choose from the currently available color combinations or just pick your custom colors to fit your brand guidelines. Choose as well from more than 500 Google fonts to make it look great.

After filling this section with your colors, press on the blue «SAVE» button at the right-bottom corner of the page. Sign digitally and continue.

Pages

Perhaps this is the most important and interesting section of your DApp since here you can let your imagination run wild in order to arrange the available elements for your benefit.

Let's review the main elements that make up this section:

Inside this section you can place the pages for your DApp and clicking into each one will let you place default prebuilt sections (clicking on + ADD SECTION button) or adding a custom one clicking below in the «+ ADD CUSTOM SECTION» button. Read more about the default sections and how to use each component.

Tooltip usage

Create the pages you will need for your DApp. Take in consideration that the only page that will have the pre built components on it's the Home one. Every time you create one it will start from zero components.

Did you know that you can post any NFT you want there to sell? 👀 you don't need to be the owner. Just use the NFT details and, if you get a sale from your DApp, the fees will be yours 🥳

Custom pages

One of the highlighted features on this new update [28/10/2022] it is the inclusion of a very customizable section, in which users can add many interesting options that not only help your market look great, but also useful and functional for your visitors.

Did you have fun in this section? 😁 Now save your progress on the usual blue button at the bottom of the page, sign digitally and let's move on to the next part.

Refer to Configuring navbar for a detailed explanation.

You may notice that not always you will be asked for the digital signature if don't click on save and just jump into sections. We recommend to save progressively to avoid lose your progress, so that's why we ask you always to sign after you made changes.

Add as much links and menus you want in your DApp footer.

Configuring SEO pages

This section will allow your DApp to be indexed by the most popular search engines. Fill both camps and upload the share image that will be seen when you share your DApp's link using OpenGraph protocol. As always, we recommend to «SAVE» and proceed.

Fees section

NFT marketplace fees

On this section you will be able to set a fee for each NFT traded in your DApp. We recommend here to not be greedy and use lower percentages (from 1% up to 5%) in order to make attractive your offers. After you finish here, click on «SAVE» and proceed to the other fee section, this time for the swap interface.

Swap fees

Here you will set the fees you want to receive from your client trading operations. As long this will be one of the most used features on your DApp, try to use low percentages here if you don't want to scare your customers out🏃‍♀️🏃‍♂️💨💨

Data section

Importing collections

Here you will place all the collections that you have available taking into account that you can choose several networks at the same time for each of them. For example, you can add the collection of our adorable Kittygotchi NFT kittens (on Ethereum, Polygon or Binance Chain) and in turn you will be able to add your NFT collections on other networks that we support with 0x decentralized liquidity.

Importing your NFT collections will allow you to use all the predefined components we offer for NFTs.

Follow the example below to add your NFT collections correctly:

  1. Click in the "+ Add Collection" button

  1. Fill all the blanks for the NFT collection you're about to import. In this case you should need to do all of this manually. It just doesn't work like the ERC20 tokens 😥 but... c'mon! Your DApp will be the G.O.A.T 🐐

  1. You can disable secondary sales to prevent that collection from being sold anywhere other than your DApp.

  2. Once you finished here hit on the blue "Save" button.

Tokens

Choose the pairs you want to be traded in your DApp. In the list you will find the most requested pairs by the people, taking into account their market volumes but, if you press the add button (inside the orange rectangle), you can add any custom token as well. Clicking on the right import button will enable popular token lists in your DApp. Feel free to choose them as well.

Need more information? head to Importing tokens section.

Networks

In this section you can choose the networks available in your DApp. This function is very useful when making products aimed at a specific network, such as the launch of an ERC20 token or a collection of NFTs.

Wrap up

If you finished to fill all the content, Congrats! 😻 remember to save again and click here to go back to admin section 👇

Keep reading Managing this tool from and learn how to navigate into the administrative area.

Last updated