DeSo Examples

A monorepo containing multiple Next.js applications built on the DeSo blockchain.

Applications

1. Blockheights - A multi-author curated blog built with Next.js, featuring DeSo integration for social features, user authentication, and blockchain interactions. Demo available at https://blockheights.com

Project Structure

deso-examples/
├── 📁 blockheights/ # Next.js blog application
│ ├── 📁 src/ # Application source code
│ │ ├── 📁 app/ # Next.js app directory
│ │ ├── 📁 components/ # React components
│ │ ├── 📁 contexts/ # React contexts
│ │ ├── 📁 hooks/ # Custom React hooks
│ │ ├── 📁 lib/ # Utility libraries
│ │ └── 📁 types/ # TypeScript type definitions
│ ├── 📁 public/ # Static assets
│ ├── package.json # App dependencies
│ ├── next.config.ts # Next.js configuration
│ ├── tailwind.config.js # Tailwind CSS configuration
│ └── tsconfig.json # TypeScript configuration
├── 📁 deso-news/ # Next.js news application
├── 📁 packages/ # Shared packages (future)
├── package.json # Root workspace configuration
├── lerna.json # Lerna monorepo configuration
└── README.md # This file

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone <repository-url>
   cd deso-examples

2. Install dependencies for all workspaces

   npm install

   That's it! With npm workspaces, dependencies are automatically linked and installed across all packages.

Development

Run all applications in development mode

npm run dev

Run a specific application

# Blockheights app
npm run dev:blockheights

# Future apps (when added)
npm run dev:my-new-app

Build all applications

npm run build

Build a specific application

# Blockheights app
npm run build:blockheights

# Future apps (when added)
npm run build:my-new-app

Lint all applications

npm run lint

Lint a specific application

# Blockheights app
npm run lint:blockheights

# Future apps (when added)
npm run lint:my-new-app

Adding New Applications

1. Create a new Next.js app in the root directory

   npx create-next-app@latest my-new-app --typescript --tailwind --app

2. Update the app's package.json

   {
     "name": "@deso-examples/my-new-app",
     "version": "0.1.0",
     "private": true
   }

3. Add the app to root package.json workspaces

   {
     "workspaces": [
       "blockheights",
       "my-new-app",
       "packages/*"
     ]
   }

4. Update lerna.json packages array

   {
     "packages": [
       "blockheights",
       "my-new-app",
       "packages/*"
     ]
   }

5. Add convenient scripts to root package.json

   {
     "scripts": {
       "dev:my-new-app": "lerna run dev --scope=@deso-examples/my-new-app",
       "build:my-new-app": "lerna run build --scope=@deso-examples/my-new-app",
       "lint:my-new-app": "lerna run lint --scope=@deso-examples/my-new-app"
     }
   }

6. Install dependencies for the new app

   npm install

Available Scripts

Command	Description
npm run dev	Run all apps in development mode
npm run dev:blockheights	Run blockheights app in development mode
npm run build	Build all apps
npm run build:blockheights	Build blockheights app
npm run lint	Lint all apps
npm run lint:blockheights	Lint blockheights app
npm run clean	Clean all node_modules

Git Commit Automation

This monorepo uses Husky to automatically prefix commit messages with the app or package name based on the files you are committing.

How it works

• When you commit changes, Husky's prepare-commit-msg hook checks which app or package your staged files belong to.
• It automatically prepends the commit message with one of:
  • app-blockheights:
  • app-chatbot:
  • app-photoapp:
  • shared:
  • root:

Example:

If you run:

git add blockheights/src/components/Footer.tsx
git commit -m "add reusable footer component"

The commit message will automatically become:

app-blockheights: add reusable footer component

If you commit changes across multiple apps, the prefix will match the first app found in the staged files.

No Manual Setup Needed

Husky is installed and configured automatically when you run npm install. All contributors will have this commit automation enabled by default.

Why this matters

• Clear commit history: It's always obvious which app/package a commit affects.
• No need to remember prefixes: Developers can write natural commit messages; the hook handles the rest.
• Consistent workflow: All contributors follow the same commit message convention.

Useful Lerna Commands

# List all packages
npx lerna list

# Run a command in all packages
npx lerna run build

# Run a command in a specific package (alternative to npm scripts)
npx lerna run dev --scope=@deso-examples/blockheights

# Add a dependency to a specific package
npx lerna add react --scope=@deso-examples/blockheights

# Add a dev dependency to all packages
npx lerna add --dev typescript --scope=@deso-examples/*

# Clean all node_modules
npm run clean

Shared Packages (Future)

The packages/ directory is reserved for shared libraries that can be used across multiple applications:

• packages/shared-ui/ - Reusable UI components
• packages/shared-utils/ - Utility functions
• packages/deso-sdk/ - DeSo blockchain integration utilities

Technology Stack

• Monorepo Management: Lerna + npm workspaces
• Frontend Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI + shadcn/ui
• State Management: React Query (TanStack Query)
• Blockchain: DeSo Protocol
• Authentication: DeSo Identity

Contributing

1. Create a feature branch from main
2. Make your changes
3. Test your changes across all applications
4. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.