Watch the Tutorial
▶️ Watch: Building a Feedback Blink with Message Signing - Follow along as we build this feedback blink from scratch, set up a database, and implement message signing.What You’ll Learn
In this tutorial, you will:- Build a message signing blink (no transaction fees!)
- Set up a PostgreSQL database with Neon
- Use Prisma ORM for database operations
- Implement action chaining for multi-step flows
- Create text input parameters for user feedback
- Handle CORS and proper headers for blinks
- Deploy and test your feedback collection system
Prerequisites
Before starting this tutorial, ensure you have:- Code Editor of your choice (recommended Cursor or Visual Studio Code)
- Node.js 18.x.x or above installed
- Basic understanding of TypeScript and Next.js
- A Neon account for the database (free tier available)
- A Solana wallet for testing (no SOL required - message signing is free!)
- Basic familiarity with REST APIs and databases
Project Setup
Let’s start by creating a new project using the Dialect Solana Starter template. This project includes NextJS as well as all the necessary dependencies for building apps on the Solana Blockchain, including the Solana Actions and Blinks SDK.Step 1: Initialize the Project
Use the Dialect scaffold to quickly set up a new blink project:Step 2: Install Additional Dependencies
We need Prisma for database management:- npm
- yarn
- pnpm
Step 3: Initialize Prisma
Set up Prisma with PostgreSQL:prisma/schema.prisma
- Your database schema file.env
- Environment variables file (add to.gitignore
!)
Step 4: Add the Feedback Image
Every blink needs an icon image. Add your feedback image to the public folder:- Create or find a feedback-related image (recommended: 1200x630px for optimal display)
- Save it as
feedback.jpg
in thepublic/
folder - The image will be available at
/feedback.jpg
in your application
Database Setup with Neon
Let’s set up a PostgreSQL database using Neon’s serverless platform.Step 1: Create a Neon Database
- Visit Neon.tech and sign up for a free account
- Click “Create a project”
- Name your project:
feedback-blink
- Select your region (choose one close to your users)
- Click “Create project”
Step 2: Get Your Database Connection String
- In the Neon dashboard, click “Connection Details”
- Copy the connection string (it looks like:
postgresql://username:password@host/database
) - Keep this tab open - you’ll need this string in the next step
Step 3: Configure Environment Variables
Update your.env
file with the database connection:
Never commit your
.env
file to version control! Ensure it’s in your .gitignore
file.Step 4: Define the Database Schema
Updateprisma/schema.prisma
with our feedback model:
prisma/schema.prisma
id
- Auto-incrementing primary keywallet
- The user’s Solana wallet addressfeedback
- The actual feedback text (unlimited length)createdAt
- Timestamp of when feedback was submitted- Index on
wallet
for efficient queries by user
Step 5: Create the Database Tables
Push the schema to your Neon database:- Creates the SQL migration files
- Applies the migration to your database
- Generates the Prisma client
Step 6: Generate the Prisma Client
Generate the TypeScript client:Step 7: Create the Prisma Client Singleton
Next.js in development mode can create multiple instances of the Prisma client. Create a singleton to prevent this:src/lib/prisma.ts
This singleton pattern prevents “too many connections” errors during development with hot reloading.
Building the Feedback Blink
Now let’s create the actual blink endpoints.Step 1: Create the Folder Structure
Create the following folder structure for your API routes:Step 2: Create the Actions Discovery File
Theactions.json
endpoint tells blink clients what actions are available:
src/app/actions.json/route.ts
Step 3: Create the Main Feedback Endpoint
This is where the magic happens. Let’s build the main feedback collection endpoint:src/app/api/actions/feedback/route.ts
Step 4: Create the Completion Endpoint
The completion endpoint provides a final confirmation to the user:src/app/api/actions/feedback/complete/route.ts
Understanding Key Concepts
Message Signing vs Transactions
This blink uses message signing instead of blockchain transactions:Feature | Message Signing | Transaction |
---|---|---|
Cost | Free | Requires SOL for fees |
Speed | Instant | Requires confirmation |
Storage | Off-chain (database) | On-chain |
Use Case | Feedback, authentication | Payments, NFTs |
Production-Ready Message SigningThis guide demonstrates basic message signing for tutorial purposes. For production applications requiring enhanced security, anti-replay protection, and proper authentication flows, see our Message Signing documentation in the advanced section.
Action Chaining
The feedback flow uses action chaining to create a multi-step user experience:- Initial Action - User enters feedback
- Message Signing - User signs the message with their wallet
- Completion - Final confirmation screen
links.next
field in the response:
CORS Headers
Blinks require specific CORS headers to work across different domains:Access-Control-Allow-Origin: *
- Allows any domainX-Blockchain-Ids
- Identifies supported blockchainsX-Action-Version
- Specifies the Actions spec version
Testing Your Feedback Blink
Step 1: Start the Development Server
http://localhost:3000
Step 2: Test on the Landing Page
The scaffold includes a built-in Blinks client on the landing page. Updatesrc/app/page.tsx
to point at your new feedback endpoint. Here are minimal snippets — keep the rest of your page code as-is.
src/app/page.tsx
http://localhost:3000
and interact with the blink directly on the page.
Note: You can still use dial.to as an alternative by pasting http://localhost:3000/api/actions/feedback
.
Step 3: Verify Database Entries
Check your database using Prisma Studio:- View all feedback entries
- See wallet addresses and timestamps
- Export data if needed
Step 4: Test Error Handling
Try these scenarios:- Submit empty feedback (should show error)
- Submit very long feedback (should work)
- Submit multiple times from the same wallet (should all be saved)
Conclusion
Congratulations! You’ve built a complete feedback collection system using Solana Blinks with message signing. You’ve learned how to: The feedback blink pattern is incredibly versatile. You can adapt it for:- Customer surveys
- Bug reports
- Contact forms
- User testimonials
- Newsletter signups
- Any data collection that doesn’t require on-chain storage