Stack
This document outlines the overall stack used in the frontend.
Next.js is a React-based framework that enhances web development by providing server-side rendering (SSR), which renders pages on the server and sends a fully rendered page to the client. It also offers automatic code splitting, enabling efficient delivery of JavaScript bundles, and optimized performance by loading only the necessary components. Next.js simplifies routing through its file-based routing system, mapping URLs to corresponding pages, allowing for easy navigation and SEO-friendly URLs.
Storybook is a powerful development environment for building UI components in isolation. It provides a sandboxed environment where developers can visually develop and test components independently of the application's context. With Storybook, we can create a comprehensive library of reusable components with documentation, interactive examples, and visual testing, enabling seamless collaboration and faster iteration in our development process.
Tailwind CSS is a utility-first CSS framework that provides a comprehensive set of pre-built classes for quick and efficient styling. It enables rapid development by eliminating the need to write custom CSS and promotes consistency through its modular and intuitive class naming system. With Tailwind CSS, developers can easily create responsive layouts, customize styles, and build visually appealing user interfaces with minimal effort.
Radix UI is a powerful and flexible set of fully accessible and customizable UI components. It offers a collection of foundational components and design patterns that can be easily integrated into web applications. Radix UI prioritizes accessibility, keyboard navigation, and responsive design, making it a reliable choice for building inclusive and responsive user interfaces without sacrificing customization options.
Wagmi is a collection of React Hooks for Ethereum integration, providing features like "Connect Wallet," ENS and balance display, message signing, and contract interaction. It simplifies development with built-in caching, request deduplication, and persistence.
Redux is a JavaScript library that centralizes and predicts state management in applications, simplifying data flow and enabling separation of concerns between logic and presentation. It provides a single source of truth for data, enhancing scalability and maintainability.
Redux Saga is a middleware library for Redux that manages asynchronous actions and side effects in a declarative manner. It improves code readability, testability, and simplifies handling complex async workflows in Redux applications.
Redux Thunks is a middleware library that simplifies asynchronous operations in Redux by allowing you to write action creators as functions. It provides an elegant way to handle asynchronous logic while maintaining a clean and organized Redux codebase.
GraphQL is a query language and runtime that enables clients to request specific data from servers, reducing over-fetching and under-fetching. It improves API development efficiency and empowers client applications with powerful data querying capabilities.
Last updated