🗺️ Places - Digital Collectible App Template

Places uses the TurboETH and Solbase for a simple and gas optimized digital collectable application you can spin up minutes.

Examples

• places.kames.me

Getting Started

SSH

git clone git@github.com:kamescg/places.git

HTTPS

git clone https://github.com/kamescg/places.git

The pnpm CLI is the recommended package manager but npm and yarn should work too.

pnpm install

Development

pnpm dev

Build

pnpm build

1-Click Deploy to Vercel

Configuration

Since Places is a TurboRepo application we have to manually set the deployment configuration.

Build & Development Settings

• Build Command - pnpm build
• Output Directory - .next
• Install Command - pnpm install

Root Directory

• packages/places-app
• ☑️ Include source files outside of the Root Directory in the Build Step

Environment Variables

The application requires a JSON-RPC provider. The public provider can be used for testing, but in production it's recommended to use Alchemy or Infura

# Public Provider(s) - Useful for testing
NEXT_PUBLIC_PROVIDER_PUBLIC=true

# Alchemy: https://www.alchemy.com
NEXT_PUBLIC_ALCHEMY_API_KEYs=

# Infura: https://www.infura.io
NEXT_PUBLIC_INFURA_API_KEY=

Click here for an image preview of the configration

Architecture

Places is built using Turborepo - an incremental bundler and build system optimized for JavaScript and TypeScript

Packages

• Application - app/places-app
• Smart Contracts - app/places-sol

Pages

• Home - places-app/app/(general)/page.tsx
• Create - places-app/app/(general)/create/page.tsx

Components

• ButtonPlaceFactoryDeploy - places-app/components/places-factory-deploy.tsx

• ButtonPlaceMint - places-app/components/button-place-mint.tsx

• CardMintCollectable - places-app/components/

• PlacesFactoryWriteCreatePlace - places-app/components/places-factory-write-create-place.tsx

• PlaceFactoryEventPlaceCreated - places-app/components/places-factory-event-place-created.tsx

Smart Contracts

• Place - places-sol/contracts/Place.sol
• PlaceFactory - places-sol/contracts/PlaceFactory.sol

How It's Built

Places, the TurboETH template, uses a modern Typescript development stack.

Web3 Core

• Solbase - Modern, opinionated, and gas optimized base for smart contract development.
• TurboETH - Web3 Application Template
• WAGMI CLI - Automatic React Hook Generation
• RainbowKit - Wallet connection manager
• Sign-In With Ethereum - Account authentication

Web2 Frameworks

• TurboRepo - Turborepo is an incremental bundler and build system
• Vercel - App Infrastructure

Developer Experience

• TypeScript – Static type checker for end-to-end typesafety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

User Interface

• TailwindCSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons