# Build a Frontend

<div data-with-frame="true"><figure><img src="https://284917788-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZz9BLmTU9oydDpL3qiUh%2Fuploads%2FrfjDyteJnuvkHu2kJuBG%2Fbuild-a-frontend.jpg?alt=media&#x26;token=06626a33-8dfe-4522-9e63-5b641c2c8301" alt=""><figcaption></figcaption></figure></div>

A major part of building full-stack Stacks applications is creating a well designed UI with a solid UX. One of your primary tools for this is stacks.js, a JavaScript/Typescript library that simplifies working with contracts, wallets, and the Stacks network.

{% hint style="info" %}
This section assumes you have basic knowledge in front-end development and bootstrapping frontend frameworks.
{% endhint %}

### Basic components to your Stacks frontend app

* [Authentication](https://docs.stacks.co/get-started/build-a-frontend/authentication)
* [Post-Conditions](https://docs.stacks.co/get-started/build-a-frontend/post-conditions)
* [Sending Transactions](https://docs.stacks.co/get-started/build-a-frontend/sending-transactions)

### Stacks brand designs for your app's UI

Access the latest Stacks brand design resources at [stacks.co/brand](https://stacks.co/brand). Find and download Stacks brand design materials directly from the linked Figma space.

{% embed url="<https://www.figma.com/design/afyAaHa2vGCR0KU1BHiske/Stacks-Brand?node-id=256-790&t=qXPWrrQ10iytre1c-1>" %}

***

### Additional Resources

* \[[Hiro Blog](https://www.hiro.so/blog/lean-devops-strategies-for-your-web3-project)] Lean DevOps Strategies for Your Web3 Project
* \[[Hiro Blog](https://www.hiro.so/blog/introducing-stacks-js-starters-launch-a-frontend-in-just-a-few-clicks)] Introducing Stacks.js Starters: Launch a Frontend in Just a Few Clicks