Buy Mingus

https://mingus.co/

🌐 Home Page

The Official Buy Mingus Home Page

❓ How to get started?

yarn
yarn dev

➜ Local: http://localhost:5173/ yarn dev
➜ Network: http://192.168.0.64:5173/ yarn dev -- --host
➜ press h + enter to show help

🛠️ Tech Stack

React + TypeScript + Vite
- with Hot Module Reload and ESLint rules.

StyleX CSS

StyleX is a simple, easy-to-use JavaScript syntax and compiler for styling web apps. StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS.

To define a style in ts:

import stylex from "@stylexjs/stylex";
const styles = stylex.create({
  quad: {
    width: "100%",
    height: "100%",
  },
});

Which then can be passed directly to any DOM component:
```
<div    
  {...stylex.props(styles.quad)}
/>
```

To define type-safe CSS component as props, Which then can be passed consumed by a ReactFC:

import { StyleXStyles } from "@stylexjs/stylex/lib/StyleXTypes";
type Props = {
  style?: StyleXStyles<{
    color: string, // required
    margin?: string, // optional
  }>;
};

export default function Rect({ style }: Props) {
  return <div {...stylex.props(style, styles.quad)}
 />;

To easily create variants of components:

const styles = stylex.create({
  defaultRect: {
    color: "red",
  },
 marginRect: {
    color: "blue",
    margin: "1rem",
  },
});

<Rect {...stylex.props(styles.defaultRect)} />
<Rect {...stylex.props(styles.marginRect)} />

shadcn/ui
- Beautifully designed components built on top of Radix UI and Tailwind CSS that we can copy and paste into our app. Accessible. Customizable. Open Source.
trmd3
- A collection of reusable, minimal Material Design 3 React Components
rainbowkit
- a React library that makes it easy to add wallet connection to our dapp. Out-of-the-box wallet management, Easily customizable, Built on top of wagmi and viem
viem
- Abstractions over the JSON-RPC API to make our life easier, browser native BigInt, utilities for working with ABIs (encoding/decoding/inspection)
wagmi
- 40+ React Hooks for accounts, wallets, contracts, transactions, signing, ENS, and more. Wagmi also supports just about any wallet out there through it's official connectors, EIP-6963 support, and extensable API.
React-Hook-Form
- Performant, flexible and extensible forms with easy-to-use validation.
zod
- TypeScript-first schema validation with static type inference

📚 Resources

👥 Collaborators:

If you read this far, here is a cookie! 🍪

About

Languages

Language:TypeScript 81.5%Language:CSS 12.8%Language:JavaScript 4.4%Language:HTML 1.3%

Buy Mingus https://mingus.co/