> For the complete documentation index, see [llms.txt](https://topmonks.gitbook.io/junodocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://topmonks.gitbook.io/junodocs/developer-guides/miscellaneous/frontend-ui-tutorial.md).

# Frontend UI tutorial

This tutorial will guide you through the process of implementing the frontend for your contracts. It relies on the following libraries:

* React: A library for building user interfaces.
* React-query: Used for making RPC queries and caching data.
* Recoil.js: A state management library for managing application state.
* Chakra UI: A UI kit that provides pre-styled components for building user interfaces.

The reason for choosing these libraries is that they work seamlessly with Cosmos-related libraries such as ts-codegen, which generates types and queries from contracts, and CosmosKit, which facilitates integration with wallets.

The code used in this tutorial is available on GitHub at the following repository: <https://github.com/topmonks/juno-dapp-tutorial>.