Step 1 - Project Setup

Kickstarting Your Magmar-Powered Dapp

Let’s get your gasless NFT dApp up and running with the right foundation. In this step, we’ll set up your local environment using a clean and modern tech stack that works seamlessly with the Magmar SDK.

---

Initialize Your Project

Open your terminal and navigate to your preferred development directory. In this guide, we’ll use:

cd ~/Desktop/magmar-nft-minter

Now, scaffold your dApp using the Web3 boilerplate generator:

npx create-web3-dapp@latest

In the setup wizard, select:

• Project name: magmar-nft-minter

• Template type: Boilerplate Dapp

• Language: TypeScript

• Blockchain Environment: Skip

After the generator finishes, move into your new project folder and launch the development server:

cd magmar-nft-minter
npm run dev

You now have a fully equipped local dApp workspace with the following ready to go:

• Viem – clean, modular Web3 client with type-safe APIs

• wagmi – hooks-based Web3 library that simplifies contract interactions

• ConnectKit – wallet connection UI, highly customizable and beginner-friendly

---

Configure Wallet Connect (Optional but Recommended)

Even though we’ll be minting through Magmar Smart Accounts and not traditional wallets, it’s a good idea to configure WalletConnect to avoid future errors and maintain compatibility.

1. Visit Wallet Connect Dashboard

2. Create an account (or log in)

3. Create a new project and copy your Project ID

Now, open your .env.local file and add this line:

CONNECT_KIT_PROJECT_ID=<YOUR_PROJECT_ID>

Then, inside layout.tsx, locate your config object and update it like so:

const config = createConfig(
  getDefaultConfig({
    appName: "Magmar Gasless NFT Minter",
    MagmarId: process.env.MAGMAR_API_KEY,
    walletConnectProjectId: process.env.CONNECT_KIT_PROJECT_ID!,
    chains: [sepolia],
  })
);

---

Setup Clean Import Paths (Optional, but Makes Life Easier)

Let’s streamline how you import components across files.

1. Open your tsconfig.json and add:

"baseUrl": "./",
"paths": {
  "@common/*": ["common/*"],
  "@public/*": ["public/*"]
}

1. Inside your project root, create a new folder:

mkdir common

This lets you import shared components like:

import Header from "@common/Header"

---

What’s Next?

You now have a live development environment fully prepped for a Magmar-native dApp. Next up, we’ll integrate user authentication and start laying the groundwork for personalized gasless minting.