DRP Banking App Demo - CodeSandbox

Interactive banking app demonstration for the Digital Receipt Protocol.

✅ Fully optimized for CodeSandbox - Ready to import and run!

Features

• Login with Face ID animation
• Transaction list with DRP receipt indicators
• Interactive receipt viewing
• Client-side decryption simulation
• 3 sample receipts with itemized details
• Lucide React icons throughout

How to Use in CodeSandbox

Option 1: Import from GitHub (Easiest)

1. Go to CodeSandbox.io
2. Click "Create Sandbox"
3. Select "Import from GitHub"
4. Paste the GitHub URL of this project
5. CodeSandbox will auto-detect it as a React app

Option 2: Manual Upload

1. Go to CodeSandbox.io
2. Click "Create Sandbox" → "Import Project"
3. Drag and drop this entire folder
4. Or zip this folder and upload the zip

Option 3: Direct File Upload

1. Create new React sandbox at codesandbox.io/s/new
2. Replace the following files:
   • src/App.js - Main component
   • src/styles.css - All styles
   • src/index.js - Entry point
   • package.json - Dependencies
3. Install lucide-react in Dependencies panel

Getting the Embed Code

Once uploaded to CodeSandbox:

1. Click "Share" button in top right
2. Copy the embed code
3. Or use the format:

   https://codesandbox.io/embed/[your-sandbox-id]?view=preview&hidenavigation=1
   

Embed in Mintlify

Add this to your demo/overview.mdx:

<iframe 
  src="https://codesandbox.io/embed/[YOUR-SANDBOX-ID]?view=preview&hidenavigation=1&hidedevtools=1"
  style="width:100%; height:700px; border:0; border-radius: 4px; overflow:hidden;"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

Customization

All receipt data is in src/App.js in the receipts array. You can easily:

• Add more sample receipts
• Change merchant names
• Modify items and prices
• Update styling in src/styles.css

Dependencies

• React 18.2.0
• React DOM 18.2.0
• React Scripts 5.0.1
• Lucide React 0.263.1

CodeSandbox Optimizations

This project has been optimized for CodeSandbox with:

• ✅ Proper manifest.json configuration
• ✅ npm-based task configuration (works better than pnpm in CodeSandbox)
• ✅ .gitignore for clean repository
• ✅ All necessary dependencies specified
• ✅ Build tested and verified

Development

npm install
npm start

License

MIT - Open source for the Digital Receipt Protocol