Developer Testing Environment for DotPassport API & SDK
A local development environment for testing DotPassport API endpoints, SDK widgets, and monitoring request logs.
Overview of your sandbox environment with quick access to all testing tools.
Test all DotPassport API endpoints with an interactive interface. Enter addresses, select endpoints, and see real-time responses.
View detailed API documentation for each endpoint.
See API responses in a clean, formatted view.
Preview and customize DotPassport SDK widgets in real-time. Test different configurations, themes, and addresses.
Monitor all API requests made from the sandbox. View request details, timing, and responses.
- Test all DotPassport API endpoints
- Interactive request builder
- Real-time response viewer
- Request/response history
- Documentation for each endpoint
- Preview all 4 widget types (Reputation, Badge, Profile, Category)
- Live configuration updates
- Theme switching (light/dark/auto)
- Custom address input
- Code snippet generator
- Real-time request monitoring
- Request timing and status
- Response body inspection
- Filter by endpoint/status
- Export logs
- Node.js 18+
- npm or yarn
- DotPassport API running locally (default:
http://localhost:4000)
# Clone the repository
git clone https://github.com/SachinCoder1/dotpassport.git
cd dotpassport/sandbox
# Install dependencies
npm install
# Start the development server
npm run devThe sandbox will be available at http://localhost:5173
Create a .env file in the sandbox directory:
VITE_API_BASE_URL=http://localhost:4000
VITE_API_KEY=your_sandbox_api_keysandbox/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ │ ├── Dashboard.tsx
│ │ ├── ApiTestingPage.tsx
│ │ ├── WidgetTestingPage.tsx
│ │ └── RequestLogsPage.tsx
│ ├── hooks/ # Custom React hooks
│ ├── services/ # API service layer
│ ├── store/ # State management
│ ├── types/ # TypeScript types
│ └── App.tsx # Main application
├── public/ # Static assets
└── index.html # Entry HTML
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run linting
npm run lint- React 19 - UI framework
- TypeScript - Type safety
- Vite - Build tool
- TailwindCSS - Styling
- React Router - Navigation
- Zustand - State management
- @dotpassport/sdk - DotPassport SDK integration
- DotPassport SDK - Official SDK documentation
- DotPassport API - API documentation
- Widget Guide - Widget customization guide
Sachin
MIT License - See LICENSE for details.