Skip to content

Latest commit

 

History

History
101 lines (78 loc) · 4.37 KB

README.md

File metadata and controls

101 lines (78 loc) · 4.37 KB
Raw

React DApp Starter

TypeScript

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.