Morph Starter Kit

Table of Contents

1. About The Project
   • Built With
2. • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

The Morph starter kit helps developers quickly and efficiently, build dApps on the Morph blockchain. It is a comprehensive template for building fullstack dApps. This starter kit is an extension of the ReactToWeb3 kit

(back to top)

Built With

Morph starter kit is built with a variety of frameworks and libraries.

• Morph
• Solidity
• Next.js
• Foundry
• walletConnect
• wagmi
• shadcn

(back to top)

Prerequisites

• Node
• Git
• Foundry

cd contract
yarn

Environment Configuration

Contract

In your terminal, run

cd contract
yarn

Frontend

Before you start, you need to set up your environment variables. Create a .env.local file in the root directory by running in a new terminal:

cp .env.example .env.local

In the file, update the NEXT_PUBLIC_PROJECT_ID variable with your WalletConnect project ID. You can obtain one by registering your project at WalletConnect Cloud.

Install Dependencies

npm install
# or
yarn 
# or
pnpm install
# or
bun install

Running the Development Server

To run the development server, execute one of the following commands in your terminal:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Visit http://localhost:3000 to see your application in action. Begin by editing app/page.tsx to make changes and see them reflected in real time.

🧞 Features

• TypeScript: Utilize the strong typing of TypeScript to write more robust and error-free code.
• Tailwind CSS: Style your application efficiently using utility-first CSS.
• WAGMI Hooks: Manage blockchain wallet and network interactions with ease.
• Viem: Handle on-chain interactions directly within your frontend application.
• Morph Sepolia Testnet: Connect to the Morph testnet to develop and test your dApps.

✨ Learning Resources

• Morph L2: Learn more about Morph and its capabilities by visiting Morph Layer 2 Official Site.
• Morph Documentation: For detailed information on how Morph works and how to integrate it into your applications, check out the Morph Docs.

🚀 Deployment

Deploy your application with ease using platforms like Vercel, which provides out-of-the-box support for Next.js applications, or Juno, which gives you full control over your dApp by enabling its deployment on Web3. Refer to platform-specific guides for details on deploying Next.js applications.