feat: add complete integration tutorial with Node.js backend and React frontend#54
Open
feat: add complete integration tutorial with Node.js backend and React frontend#54
Conversation
Migrate complete Integration Tutorial from legacy GitBook to Mintlify, converting all 19 external image URLs to local webp assets for improved performance and reliability. Content Migration: - Port full Integration Tutorial content from /request-network-api/integration-tutorial - Backend setup: Fastify + Drizzle + SQLite configuration with complete code - Frontend implementation: React + Vite + wagmi wallet integration - Webhook handling with signature verification examples - Step-by-step walkthrough from API key creation to payment confirmation Format Conversions: - Convert GitBook <figure> tags to Mintlify <Frame> components - Transform markdown image syntax to JSX <img> tags for MDX compatibility - Remove angle brackets around URLs to prevent JSX parsing errors - Add frontmatter (title, description) for Mintlify page structure Image Localization: - Download and convert all 19 tutorial screenshots to webp format - Organize images in images/api-setup/integration-tutorial/ directory - Replace all external gitbook.io URLs with local paths - Images included: folder-structure, api-portal steps, database-studio, ngrok-terminal, webhook steps, vite-setup, UI components, wallet states, payment flows, and confirmation screenshots Navigation: - Add Integration Tutorial to docs.json API Setup section - Position between Getting Started and API Portal docs for logical flow Performance: - Eliminate external image dependencies (19 GitBook URLs removed) - Reduce page load times with local webp assets - Enable offline documentation viewing All content preserved exactly from legacy docs with only necessary format conversions for Mintlify compatibility.
This was referenced Mar 2, 2026
Member
Author
This was referenced Mar 2, 2026
Open
Open
Open
aimensahnoun
changed the title
aimensahnoun
changed the title
Greptile SummaryThis PR adds a comprehensive integration tutorial migrated from legacy GitBook documentation to Mintlify. The tutorial provides a complete end-to-end walkthrough for building a payment application using Request Network API with Node.js backend (Fastify + Drizzle + SQLite) and React frontend (wagmi wallet integration). Key additions:
Issues found:
The tutorial content is well-structured and follows most Mintlify best practices, but the missing import is a critical issue that will prevent the code from running. Confidence Score: 3/5
Important Files Changed
Last reviewed commit: 5746dae |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+196
to
+200
| // src/index.ts | ||
| import 'dotenv/config'; | ||
| import Fastify, { FastifyRequest, FastifyReply } from 'fastify'; | ||
| import { db } from './db'; | ||
| import { payments } from './db/schema'; |
There was a problem hiding this comment.
Missing import for eq function from drizzle-orm
The code uses eq() on lines 297 and 594 but never imports it. Add this import:
Suggested change
| // src/index.ts | |
| import 'dotenv/config'; | |
| import Fastify, { FastifyRequest, FastifyReply } from 'fastify'; | |
| import { db } from './db'; | |
| import { payments } from './db/schema'; | |
| // src/index.ts | |
| import 'dotenv/config'; | |
| import Fastify, { FastifyRequest, FastifyReply } from 'fastify'; | |
| import { db } from './db'; | |
| import { payments } from './db/schema'; | |
| import { eq } from 'drizzle-orm'; |
| The final result should look something like this with the wallet connection working. | ||
|
|
||
| <Frame> | ||
| <img src="/images/api-setup/integration-tutorial/wallet-conencted.webp" alt="Wallet connected" /> |
There was a problem hiding this comment.
Typo in image filename reference
Suggested change
| <img src="/images/api-setup/integration-tutorial/wallet-conencted.webp" alt="Wallet connected" /> | |
| <img src="/images/api-setup/integration-tutorial/wallet-connected.webp" alt="Wallet connected" /> |
| <img src="/images/api-setup/integration-tutorial/payment-confirmed.webp" alt="Payment confirmed" /> | ||
| </Frame> | ||
|
|
||
| This is it, you have succesfully built a basic application integrating our API to move actual test funds between two wallets. |
There was a problem hiding this comment.
Spelling error
Suggested change
| This is it, you have succesfully built a basic application integrating our API to move actual test funds between two wallets. | |
| This is it, you have successfully built a basic application integrating our API to move actual test funds between two wallets. |
|
|
||
| ``` | ||
| // .env | ||
| RN_API_KEY=<insert-you-api-key> |
There was a problem hiding this comment.
Typo in placeholder: "insert-you-api-key" should be "insert-your-api-key"
Additional Comments (1)
|
This was referenced Mar 2, 2026
bassgeta
requested changes
Mar 3, 2026
Contributor
bassgeta
left a comment
bassgeta
left a comment
There was a problem hiding this comment.
Requesting changes for the moment since that codesandbox link doesn't work, but other than that good job with this 😎
|
|
||
| We will be creating a simple node server integrating the Request Network API to create payments and track their status. We are going to use `fastify` as our server and use `drizzle` with `SQLite` to store our payment data. Additionally, we'll be creating a simple React web application to interact with the API and execute payments. | ||
|
|
||
| View the entire codebase on [Code Sandbox](https://codesandbox.io/p/github/RequestNetwork/integration-demo/main?workspaceId=ws_ADdDA8Vov3FqF921ntkFf). |
Contributor
There was a problem hiding this comment.
The link doesn't work :thinking_face: Is this an issue we should resolve or do we just want to inherit the bug from previous docs?
This was referenced Mar 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR
Added a comprehensive integration tutorial that walks developers through building a complete payment application using Request Network API with Node.js backend and React frontend.
What changed?
Created a new integration tutorial (
api-setup/integration-tutorial.mdx) that provides:/v2/payoutsAdded supporting images showing UI components, API portal screenshots, database views, and transaction signing flows.
How to test?
Why make this change?
This tutorial addresses the need for comprehensive developer onboarding by providing a complete, working example that demonstrates:
The tutorial bridges the gap between basic API documentation and practical implementation, giving developers a solid foundation to build upon.