> For the complete documentation index, see [llms.txt](https://docs.hashstack.finance/developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hashstack.finance/developers/frontend-tech-stack.md).

# Frontend Tech Stack

#### Technologies Used

* Next js (<https://nextjs.org/docs>)
* Typescript (<https://www.typescriptlang.org/docs/>)
* Testing- Jest (<https://jestjs.io/docs/getting-started>)
* Redux Toolkit (<https://redux-toolkit.js.org/introduction/getting-started>)
* Apex charts (<https://apexcharts.com/docs/installation/>)

#### Ui Framework and Styling

* Chakra UI (<https://chakra-ui.com/docs/components>)
* Chakra UI is a popular open-source UI component library for React applications. It provides a set of customizable and accessible components that can significantly speed up the frontend development process.
* Custom styling using native css for some components.

<img src="/files/S0YjvKfFyZG4BVrKQdvC" alt="" data-size="original">

#### State Management

* Redux (<https://redux-toolkit.js.org/introduction/getting-started>)
* Implemented Redux for comprehensive state management across the project, ensuring seamless integration and facilitation of global state changes, enhancing overall implementation and user experience.

#### Animation and Motion

* Framer Motion
* Utilized Framer Motion to elevate user experience by seamlessly integrating animations with button clicks, enhancing visual engagement during transactions.

#### Toast Notifications

* React Toastify (<https://fkhadra.github.io/react-toastify/introduction>)
* Toasts enhance the user experience by providing concise updates on transaction outcomes, ensuring users are informed about successes and failures without disrupting their workflow. These unobtrusive notifications promote user satisfaction and informed decision-making.

<figure><img src="/files/2wRrayRxQv8Sf2tAhQr7" alt=""><figcaption><p>failure toast</p></figcaption></figure>

<figure><img src="/files/XNFRxcIFjYFOAJr4bOxW" alt=""><figcaption></figcaption></figure>

#### Web3 Interactions

* Starknet react hooks (<https://apibara.github.io/starknet-react/>)
* Leveraged Starknet React hooks to seamlessly interface with smart contracts, enabling both data retrieval and blockchain data recording through intuitive function calls. Streamlining interactions, it facilitated efficient data management on the blockchain.

#### Coding Standards

* Consistent Naming
* Modularization
* Formatting
* Typescript (<https://www.typescriptlang.org/docs/>)
* Linting
* Version Control
* We used TypeScript as our primary programming language for frontend development. TypeScript extends JavaScript by adding static types, enabling us to catch errors and enhance code quality during development.

#### Future Considerations

* Optimized load times and performance management by streamlining library usage, effectively reducing the number of dependencies.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.hashstack.finance/developers/frontend-tech-stack.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.