Technical Stack
Last updated
Last updated
Next.js (next): Framework for building server-rendered React applications, enhancing SEO and performance.
React (react, react-dom): A JavaScript library for building user interfaces, allowing for component-based architecture.
TypeScript (typescript): Superset of JavaScript providing type safety at compile time, improving code quality and maintainability.
DaisyUI (daisyui): Tailwind CSS plugin providing beautifully crafted UI components.
TailwindCSS (tailwindcss): A utility-first CSS framework for rapid UI development.
Heroicons (@heroicons/react): Beautiful, hand-crafted SVG icons, designed to work seamlessly with Tailwind CSS.
Zustand (zustand): Minimalist state management solution, offering a simple and fast way to manage state in React.
Wagmi (wagmi): Collection of React Hooks containing various Blockchain hooks for wallet connection and interaction with CANTO | Ethereum networks.
Local Debugging
Frames.js - debugger comes inside the frames.js starter repos and will run automatically when you run your code.
RainbowKit (@rainbow-me/rainbowkit): All-in-one solution for connecting and managing wallets in CANTO-based applications.
Uniswap SDK (@uniswap/sdk-core, @uniswap/v2-sdk): Facilitates building applications on top of the Uniswap protocol, providing tools for swapping, pooling, and managing tokens.
XMTP Frames Validator (@xmtp/frames-validator): Validates message frames for consistency and security in blockchain-based messaging applications.
React Query (@tanstack/react-query): Manages and synchronizes asynchronous and server state in your React applications.
Use Debounce (use-debounce): Custom hook to debounce function calls.
UseHooks TS (usehooks-ts): Collection of essential hooks tailored for use in TypeScript environments.
ESLint (eslint): JavaScript linter helping to maintain code style and prevent bugs.
Prettier (prettier): Code formatter that ensures code style consistency across your development team.
TypeScript ESLint (@typescript-eslint/eslint-plugin): ESLint plugins specifically designed for TypeScript, improving linting capabilities.
Tailwind Merge (tailwind-merge): Optimizes class merging, useful for dynamically generating Tailwind CSS classes.
PostCSS (postcss): Tool for transforming CSS with JavaScript, used primarily with TailwindCSS for advanced styling options.
Autoprefixer (autoprefixer): PostCSS plugin to parse CSS and add vendor prefixes to CSS rules, ensuring compatibility across different browsers.
Each tool and library listed has been selected to enhance the development experience and the functionality of your web application. They integrate seamlessly to provide a robust development environment optimized for React and Next.js projects focused on blockchain technology.