Tip the Barista Demo dApp

A demonstration application showcasing how to build a full-stack dApp on the Casper Network. The dApp allows users to send tips with CSPR tokens to a developer to show their appreciation. The tips are stored in a smart contract and indexed by CSPR.cloud. The dApp also provides a list of all tips sent so far.

---

📚 New to Casper development?

We also provide a comprehensive, step-by-step tutorial that teaches you how to build this entire dApp from scratch.

→ Start the Tutorial: From Idea to dApp in Minutes

…or continue reading this page to set up your local environment and try the demo firsthand.

What You'll Learn

This demo demonstrates:

• Authentication & Wallet Integration: Using CSPR.click, a Web3 authentication layer that integrates with all Casper ecosystem wallets
• Blockchain Data Indexing: Using CSPR.cloud, an enterprise-grade middleware platform that provides access to indexed and enriched blockchain data with real-time streaming
• Smart Contract Development: Writing contracts with Odra framework
• Event Handling: Listening to and indexing smart contract events

Casper Ecosystem Tools Used

This demo uses several tools from the Casper Ecosystem – a collection of developer tools that eliminate boilerplate and accelerate Casper dApp development.

Product	Purpose	When to Use	Documentation
CSPR.click	Wallet connection & transaction signing	Every dApp needs this for user authentication and transaction submission	docs.cspr.click
CSPR.cloud	Event indexing & blockchain API	When you need to query blockchain data efficiently or display historical events	docs.cspr.cloud
CSPR.design	React UI component library	For building ecosystem-aligned user interfaces	cspr.design
CSPR.build	Developer console	Managing API keys, monitoring usage, and configuring services	console.cspr.build
Odra Framework	Smart contract framework	Writing Casper smart contracts in Rust with high-level abstractions	odra.dev/docs
Casper JS SDK	JavaScript SDK	Building transactions and interacting with the blockchain from JavaScript/TypeScript	npm: casper-js-sdk

Live Demo

🌐 Try it live: donation-demo.casper.network

---

Prerequisites

Before you begin, ensure you have:

• Docker and Docker Compose installed
• CSPR.build account for API access keys
• Node.js and npm (for local development)

Quick Start with Docker

The fastest way to run the complete application:

1. Configure environment variables:

   cp server/.env.example server/.env

The default values work for testnet deployment with Docker.

2. Launch all services:

   docker compose -f infra/local/docker-compose.yaml --project-name tip-barista up -d

This starts the database, event listener, API server, and web client.

Development Setup

1. Register for API Access

Create a free account at CSPR.build to obtain:

• CSPR.click application id (for wallet authentication)
• CSPR.cloud access keys (for blockchain data indexing)

2. Smart Contract

You have two options:

Option A: Use the deployed contract (recommended for testing)

• Package hash: c447e9d334a710bc3e0a47cbea854c269e41637d7b9aa9d37a745596f651ed7a
• View on Testnet Explorer
• Already configured in default settings

Option B: Deploy your own contract

• Follow the smart contract deployment guide
• Update configuration with your new package hash

3. Backend Server

The server includes an event listener and REST API.

Requirements:

• MySQL database (use Docker Compose for local development)
• CSPR.cloud API credentials

Setup:

1. See detailed instructions in server/README.md
2. Configure database connection and API keys
3. Start the event listener to index smart contract events
4. Launch the API server

4. Frontend Client

Setup:

1. Follow instructions in client/README.md
2. Configure CSPR.click credentials
3. Point to your API server endpoint
4. Run the development server

Architecture Overview

                          ┌──────────────────────┐
                          │     Casper Network   │
                          └───────────┬──────────┘
                                      │
                 ┌────────────────────┼────────────────────┐
                 │                    │                    │
                 ↓                    ↓                    ↓
         ┌─────────────────┐   ┌───────────────┐   ┌────────────────┐
         │   CSPR.click    │   │  CSPR.cloud   │   │  CSPR.cloud    │
         │ (Wallet Auth)   │   │ (API + Events)│   │ Streaming API  │
         └─────────────────┘   └───────┬───────┘   └──────┬─────────┘                
                 ↑                     │                  │
                 │                     │                  │
                 ↓                     │                  │
           ┌─────────────┐             │                  │
           │ Web Client  │             │                  │
           └─────────────┘             │                  │
                 ↑                     │                  │
                 │                     │                  │
                 │                     │                  │
           ┌─────────────┐             │                  │
           │  API Server │ <───────────┘                  │
           └─────────────┘                                │
                 ↑                                        │
                 │                                        │
                 │                                        │
           ┌─────────────┐         ┌────────────────┐     │
           │   MySQL DB  │<─────── │ Event Listener │<────┘
           └─────────────┘         └────────────────┘                                 

Project Structure

.
├── tutorial/            # 📚 Step-by-step tutorial
├── client/              # React frontend application
├── server/              # Backend API and event listener
├── smart-contract/      # Odra smart contract source
└── infra/               # Dockerfiles and Docker Compose configuration

About Casper Network

Casper is a Proof of Stake enterprise blockchain designed to help enterprises build blockchain-enabled products and services, featuring upgradeable smart contracts, developer-friendly features, and lower transaction costs than most Layer-1 blockchain offerings. Key features include:

• Upgradeable Smart Contracts: Modify contracts post-deployment without complex migrations
• Developer-Friendly: Supports Rust and other mainstream languages via WebAssembly
• Enterprise-Ready: Multi-signature transactions and weighted key permissions at protocol level
• Predictable Costs: Stable gas fees during high network activity

Resources

• Casper Network - Official website
• CSPR.build Console - Developer tools access
• CSPR.cloud Documentation - API reference
• Testnet Explorer - View transactions and contracts
• Odra Framework - Smart contract development
• CSPR.click Documentation - Unified SDK that simplifies Web3 application onboarding
• CSPR Design System - CSPR.suite UI components library for React applications

Community & Support

Join Casper Developers Telegram channel to connect with other developers.