Awesome

React DApp Starter

Overview

react-dapp-starter is a robust and scalable template designed for building decentralized applications (DApps) with modern web technologies. This template is a production-ready foundation currently used in Manta Network, designed to meet the demands of complex and scalable DApp development.

Features

• TypeScript: Strongly-typed language that builds on JavaScript, giving you better tooling at any scale.
• React Router: A declarative routing library for React that makes it easy to navigate your app.
• TailwindCSS: Utility-first CSS framework for rapid UI development.
• Web3Modal: An easy-to-use library for integrating multiple wallet providers.
• Wagmi: A set of React Hooks for working with Ethereum.
• Viem: A toolkit for handling Ethereum-related data and logic.
• Shadcn UI: A collection of pre-built UI components for a fast and consistent development experience.
• Zustand: A small, fast, and scalable state management solution for React.
• TanStack Query: Powerful data fetching, caching, and synchronization for server state management.
• ESLint & Prettier: Code quality and formatting tools to ensure a clean codebase.

Getting Started

1. Clone the repository:

   You can use a tool like degit to scaffold your project with this template.

   npx degit Manta-Network/react-dapp-starter#main your-project
   cd your-project
   

2. Install dependencies (default: yarn):

   yarn install
   

3. Configure WalletConnect Project ID and Metadata:

   • Visit WalletConnect Cloud to create a project and obtain your Project ID.
   • Open the file src/config/common.ts in your project.
   • Locate the WALLET_CONNECT_PROJECT_ID key and replace YOUR_PROJECT_ID with your actual Project ID.
   • Update the WALLET_CONNECT_METADATA section with your project's details, including the name, description, URL, and icons.

4. Run the development server:

   yarn dev
   

5. Build for production:

   yarn build
   

Project Structure

├── src/
│ ├── abis/ # Smart contract ABIs
│ ├── api/ # Optional API endpoints definitions
│ ├── assets/ # Static assets like images and fonts
│ ├── components/ # Reusable UI components
│ ├── config/ # Application configuration files
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and business logic
│ ├── pages/ # Application pages
│ ├── store/ # Global state management using Zustand
│ ├── types/ # TypeScript types
│ ├── AppRouter.tsx # Application routing
│ ├── index.scss # Global styles
│ ├── main.tsx # Main entry point
│ └── vite-env.d.ts # Vite environment variables types
├── public/ # Static public assets
├── .eslintrc.cjs # ESLint configuration
├── .gitignore # Git ignore file
├── .prettierrc # Prettier configuration
├── CHANGELOG.md # Project changelog
├── components.json # Shadcn UI components configuration
├── index.html # Main HTML file
├── package.json # Project metadata and dependencies
├── postcss.config.js # PostCSS configuration
├── PROJECT_OVERVIEW.md # Overview of the project
├── README.md # Project README
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── tsconfig.node.json # Node.js TypeScript configuration
├── vercel.json # Vercel deployment configuration
├── vite.config.ts # Vite configuration
└── yarn.lock # Yarn lock file

Contributing

Contributions are welcome! Please create an issue or submit a pull request if you find any bugs or have suggestions for improvements.

Acknowledgements

Special thanks to the open-source community and the maintainers of the libraries and tools used in this template.