Elven Tools Dapp is a template (landing page) with preconfigured logic to be used with Elven Tools Smart Contracts. For now it supports NFT minter smart contract. But it will also support SFT minter.
It is a minter dapp based on the NextJS framework and useElven, which gives many possibilities for modifications and extending.
You can use it primarily for this particular case, so for minting NFTs/SFTs based on Elven Tools smart contracts, you could also use it as a boilerplate for your other projects. You would only need to do some modifications.
Because it is built using the NextJS framework, deployment and hosting with Vercel or Netlify is as simple as pushing the code to the repository. Also, private repository and not only on GitHub. I will be covering both of these later.
Below you'll find the explanation of a couple of choices:
Why NextJS?
There are a couple of reasons. The most important are:
Based on React, which is well known and most popular
Offers static sites generation or/and server-side rendering. Very important when it comes to landing pages and SEO.
Optimized with the Web Standards in mind. There are many tools for optimizing the assets loading and overall performance.
Simple PWA and Service Workers configuration is essential for optimization.
A lot of plugins and excellent development experience.
Why not the dapp-core library?
It is too complicated for this purpose.
The Dapp should also be helpful as a boilerplate for other projects, so it needs to be simple.
There is more control over auth flows with a custom approach. And this is the core of the dapp, so it is critical.
It has too many utilities that, for this case, won't be used.
Why the API endpoint could be proxied as an option?
Allows hiding the API endpoint under the same domain www.your-domain.com/api/multiversx.
No one will be able to use this endpoint from outside the Dapp.
When used with no public API, You can hide the API keys which need to be attached to the endpoint.
Usage of the public MultiversX API for production release is always a bad idea in such a dapp, so it seems to be a perfect solution for third-party providers.
Anyway, proxied API will still work well with the public MultiversX API.
Con: It will impact your backend performance.
Why written with Typescript and not JavaScript only?
Typescript becomes the standard for JavaScript projects.
Better control over the code.
Better control over bugs.
Smooth refactoring experience.
Why not use the Redux for state handling?
The Redux is a great tool, but it seems to be an overkill in this case.
The Dapp uses Valtio for global state management, a small yet powerful tool.
Why Chakra UI?
Intuitive configuration.
Excellent approach to the theming.
You can use it almost the same as with utility CSS classes.
Very flexible. You can write CSS in JS in many ways.
A lot of React-specific utilities (Hooks).
Integrates well with Next.
Built with accessibility in mind.
A lot of ready-to-use components.
Below, you will find a sneak peek video
(here with old approach to configuration, new vid soon)