Typescript Eth Starter

screenshot of Typescript Eth Starter
nextjs
react
tailwind
daisyui

Ethereum Dapp Basic Typescript Starter

Overview

The ETH Basic Typescript Starter is a monorepo designed to help users get started with building decentralized applications (dapps) on the Ethereum blockchain. The starter includes a Counter smart contract that can be deployed on a local Anvil instance, along with a dapp built with React and Typescript. The project also includes various utilities for multi-chain deployments, an upgradeable Counter example, and a Subgraph for indexing smart contracts. Additionally, the starter provides a Docker Compose file for quickly running the Anvil and graph-node locally, as well as wagmi and RainbowKit for generating custom hooks. The project uses Tailwind CSS with DaisyUI and recommends using Rivet, a developer wallet and devtool, for local development.

Features

  • Simple Counter smart contract for local deployment on Anvil instance
  • Dapp built with React and Typescript using Vite for fast development
  • Multi-chain deployment utilities
  • Upgradeable Counter example
  • Subgraph for indexing smart contracts
  • Docker Compose file for quick local setup of Anvil and graph-node
  • wagmi-cli for generating custom hooks
  • GraphQL-codegen for generating hooks to query the Subgraph from the dapps
  • Integration with Tailwind CSS and DaisyUI for styling
  • Recommendation to use Rivet for local development

Summary

The ETH Basic Typescript Starter is a comprehensive monorepo that provides all the necessary tools and resources to start building Ethereum dapps quickly. It includes a Counter smart contract, a React and Typescript dapp, multi-chain deployment utilities, an upgradeable Counter example, and a Subgraph for indexing smart contracts. The starter also includes convenient features like a Docker Compose file for quick local setup and tools like wagmi-cli and RainbowKit for generating custom hooks. With its integration of Tailwind CSS and DaisyUI, the starter offers easy and customizable styling options. Overall, this starter is a valuable resource for anyone looking to dive into Ethereum development.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.