Prompt Guide
Building with Pakt Services Using AI Coding Assistants
Introduction
This guide will help you leverage AI coding assistants like Lovable, Replit AI, and Bolt to efficiently build applications that integrate with Pakt services. By following these prompt patterns and techniques, you'll be able to accelerate your development process while ensuring proper integration with our APIs.
Getting Started
Setting the Context
When beginning a new project with an AI coding assistant, start by establishing the context of what you're building:
Hey AI Assistant! I'm building a web application that will integrate with Pakt's payment and wallet services. The app will allow users to [describe specific functionality, e.g., create projects, receive funding, manage wallets]. I'd like you to help me build this step by step.Defining Architecture
Note: AI coding platforms like Lovable, Replit AI, and similar tools are particularly well-suited for frontend application development, especially React-based projects. They excel at setting up React project structures, creating components, and handling frontend integration with APIs. Consider leveraging these strengths when planning your architecture.
Have the AI help design your application architecture:
Before we start coding, let's plan our application architecture.
I want to build a React frontend application that will communicate with Pakt's APIs.
Please suggest a folder structure and the key components we'll need for this integration. For a more complete full-stack approach:
Before we start coding, let's plan our application architecture. I want to build a React frontend with a Node.js backend that will communicate with Pakt's APIs. Since AI coding assistants like Lovable excel at React development, let's focus first on creating a well-structured frontend, then we can discuss the backend integration points.Building Your Application Foundation First
Important: Before integrating Pakt services, it's crucial to have your core application structure and components already built out. This provides the necessary context for AI assistants to understand how and where to integrate Pakt's APIs effectively.
Creating Your Core Pages and Components
Start by having the AI help you build the essential pages and components that will later integrate with Pakt services:
Before we integrate with Pakt's APIs, I need to build out the core pages and components for my application. Here are the key pages I need:
1) Home page that displays featured projects
2) Project creation form page
3) Project details page
4) A user profile page that will show wallet information
5) Authentication pages (login/signup)
Let's start by creating the basic structure of these pages and their components in React. Don't worry about API integration yet - we'll add that later.Building a Component Library
Have the AI create reusable components that will later connect to Pakt services:
I need to create the following React components that we'll later connect to Pakt services:
1) ProjectCard - for displaying project information in lists
2) WalletDisplay - to show wallet address and balance
3) FundingForm - for users to contribute to projects
4) ProjectCreationForm - for creating new projects
5) AuthenticationForms - for user login/signup
Please help me build these components with proper prop structures and styling. We'll connect them to Pakt's APIs in the next phase.Setting Up State Management
Before API integration, establish your state management approach:
Now that we have our core components, let's set up the state management for our application. I want to use [Redux/Context API/Zustand/etc.] to manage:
1) User authentication state
2) Project data
3) Wallet information
4) Transaction status
Please help me implement this state management structure so we're ready to integrate with Pakt's APIs.Creating Mock Data
For initial development, have the AI create realistic mock data that matches Pakt's data structures:
Before integrating with actual Pakt APIs, I need mock data that mirrors Pakt's response structures for:
1) Projects (including collection of data)
2) Wallet information (addresses and balances)
3) User profiles
4) Transaction records
Please create mock data files with realistic values that we can use during development before connecting to the actual Pakt services.Once your application foundation is in place, you'll be in a much better position to integrate Pakt services effectively, as your AI assistant will have the proper context to understand how and where these integrations should occur.
Working with Pakt Services
1. Wallet Integration Prompts
Understanding the Collection-Wallet Relationship
Important Context: Before creating a wallet, you must first create a collection using Pakt's collection service. The collection service is an object store that can be used to store project data. Once a collection is created, you can then create a wallet for that specific collection/project.
Creating a Collection First
I need to implement the full flow for creating a new project with its associated wallet. First, I need to:
1) Create a collection to store the project data using Pakt's collection service
2) Make a POST request to /collections with the project details
3) Get the collection_id from the response
4) Use this collection_id for the subsequent wallet creation
Creating a Wallet for a Collection
Now that I have implemented the collection creation, I need to create a wallet for this collection/project. I need to:
1) Take the collection_id we received from the previous step
2) Make a POST request to /wallet/create-collection-wallet with the collection_id
3) Store the returned wallet information in my database
4) Associate this wallet with the project/collection for future reference
5) Handle any potential errors gracefully
Complete Project Creation Flow
Let's implement the complete project creation flow that integrates with Pakt services:
1) Collect project details from the user (name, description, funding goal, etc.)
2) Create a collection by sending project data to /collection
3) Use the returned collection_id to create a wallet via /wallet/create-collection-wallet
4) Fetch the complete project data, including wallet information
5) Display confirmation to the user with project details and the new wallet addressFetching Wallet Information
I need to display a user's wallet address and balance on their profile page. For this, I need to:
1) Get the wallet ID from the collection data
2) Make a GET request to /wallet/{walletId}
3) Display the wallet.address and wallet.balance in the UI
Please write the code that would handle this entire flow.2. Project Creation Prompts
Let's implement the project creation flow that integrates with Pakt. I need:
1) A form to collect project details (name, description, funding goal, etc.)
2) Upon submission, make a POST request to create the project
3) Then immediately create a collection wallet using /wallet/create-collection-wallet
4) Finally, display the confirmation with the project details and the new wallet address
3. Authentication Integration
I need to implement Pakt's authentication flow where:
1) Users must be logged in to access certain pages (like creating projects)
2) Unauthenticated users get redirected to the login page
3) After successful login, users return to their originally intended page
Please write the authentication middleware and frontend logic to handle this flow.Debugging & Troubleshooting Prompts
When you encounter issues, use these prompts to get help debugging:
I'm seeing the following error when trying to create a wallet: [paste error].
Here's my current code: [paste relevant code].
Can you help me identify what's wrong and fix it?Or for network inspection issues:
I've checked the network tab and don't see any calls to the /wallet/{id} endpoint.
Here's my current implementation: [paste code].
Can you identify why the API call isn't being made and fix it?Best Practices for AI Collaboration
1. Be Specific About Pakt Requirements
Always mention specific Pakt API endpoints, data structures, and requirements:
According to Pakt's API docs, I need to first create a project,
Then create a wallet using the collection ID,
And finally fetch the project again to get the updated data.
Can you show me how to implement this exact flow?2. Use Step-by-Step Development
Break down complex integrations into steps:
Let's build this integration step by step:
1) First, let's create the UI components we need
2) Next, let's set up the API service for Pakt integration
3) Then, let's implement the project creation flow
4) Finally, let's add the wallet integration
Can we start with step 1?3. Iterate on Code
Don't hesitate to ask the AI to refine its work:
This code looks good, but I need to make some changes:
1) We need to use collection.wallet instead of collection.paymentAddress
2) We should add better error handling for network failures
3) Let's add loading states for better UX
Can you update the code with these changes?Sample Projects
Basic Crowdfunding Platform
Here's a prompt to kickstart a simple crowdfunding platform using Pakt services:
I want to build a basic crowdfunding platform with Pakt integration. The platform should:
1) Allow authenticated users to create projects
2) Automatically create wallets for projects using Pakt's wallet API
3) Display project information and wallet details
4) Enable users to fund projects through Pakt's payment system
Can you help me build this step by step, starting with the project structure and basic components?Creator Marketplace
I'm building a creator marketplace where artists can sell digital content. I need to integrate Pakt's wallet and payment services to:
1) Create wallets for artists when they register
2) Process payments when customers purchase content
3) Display earnings and transaction history
4) Handle withdrawals to external wallets
Let's start by designing the database schema and API routes needed for this integration.Common Mistakes to Avoid
Not checking the authentication status before accessing protected routes
Missing API error handling for Pakt service calls
Not refreshing wallet data when displaying balances
Using incorrect data paths (e.g., using the wrong property names for wallet IDs)
Forgetting to make separate API calls for wallet information after creating projects
Final Tips
Always verify network calls using your browser's developer tools
Log responses from Pakt APIs for debugging
Implement proper loading and error states for a better UX
Use environment variables for API endpoints and credentials
Follow Pakt's rate-limiting guidelines to avoid service disruptions
By following this guide, you can effectively collaborate with AI coding assistants to build robust applications that integrate seamlessly with Pakt services. Happy building!
Last updated