Developers
Mainnet AlphaContribute-2-Earn
  • Introduction
  • Permissible CDR
  • Automated Liquidity Provision
  • Slippage Control
  • Integrations
  • Proxy/Upgrade Structure
  • Mainnet Deployed Contracts
  • Frontend Tech Stack
  • 💰Supply and Borrow
    • Introduction
    • Supply
    • Borrow
      • Use Cases
      • Isolated margin
      • Debt management
      • Health factor
  • 🤝Contribute
    • Hashstack Layer 3 Integration
    • Creating Proposals on Github
  • Additional Documentation
    • 🏰Document Hub
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub

Frontend Tech Stack

PreviousMainnet Deployed ContractsNextIntroduction

Last updated 1 year ago

Was this helpful?

Technologies Used

  • Next js ()

  • Typescript ()

  • Testing- Jest ()

  • Redux Toolkit ()

  • Apex charts ()

Ui Framework and Styling

  • Chakra UI ()

  • 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.

State Management

  • Redux ()

  • 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

  • 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.

Web3 Interactions

  • 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

  • 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.

React Toastify ()

Starknet react hooks ()

Typescript ()

https://fkhadra.github.io/react-toastify/introduction
https://apibara.github.io/starknet-react/
https://www.typescriptlang.org/docs/
https://nextjs.org/docs
https://www.typescriptlang.org/docs/
https://jestjs.io/docs/getting-started
https://redux-toolkit.js.org/introduction/getting-started
https://apexcharts.com/docs/installation/
https://chakra-ui.com/docs/components
https://redux-toolkit.js.org/introduction/getting-started
failure toast