Live, working examples demonstrating FISE in real-world scenarios.
📦 Monorepo Structure: This directory now uses Turborepo + npm workspaces. Install dependencies once at the root:
cd examples && npm install
From the examples/ root:
npm run build # turbo build all packages in dependency order
npm run dev -- --filter=... # turbo dev for a specific app, e.g. backend-fastify
npm run lint # run lint where defined
npm run test # run tests where definedPath: /examples/backend-fastify
A production-ready backend API demo using Fastify (one of the fastest Node.js frameworks).
Features:
- 7 real-world API endpoints
- Bidirectional encryption (request & response)
- Time-based token validation
- Rate limiting with FISE
- Full CORS support
Quick Start:
# 1. Install all dependencies (monorepo setup)
cd examples
npm install
# 2. Start development server
npm run dev:backend
# Or from backend-fastify directory:
cd backend-fastify && npm run dev
# 3. Build (uses local shared package via file:../shared)
npm run build:backend
# 4. Deploy to Vercel (project root = examples/backend-fastify)
vercel --prodNote: Please refer to the sample backend code,
shared/src/shared-rules.jsfile, and demo implementations for complete examples.
Live Test:
# In another terminal
npm testTech Stack: Fastify, Node.js, FISE Difficulty: Beginner Time: 5 minutes to setup
Path: /examples/frontend-react
React application demonstrating client-side FISE integration with live backend demos.
Features:
- Decrypt API responses
- Encrypt form submissions
- Handle authentication tokens
- Real-time data protection
- Video/binary encryption demo
- Selective encryption & lazy decryption
- Session-based encryption rules
Quick Start:
# From examples root (monorepo)
cd examples
npm install
npm run dev:frontend
# Or from frontend-react directory:
cd examples/frontend-react
npm run devTech Stack: React, Vite, Tailwind CSS, FISE Status: ✅ Available
Path: /examples/frontend-vue/
Vue 3 application with Composition API and FISE.
Tech Stack: Vue 3, Vite, FISE Status: 🚧 Planned
Path: /examples/fullstack-nextjs/
Complete Next.js application with server-side and client-side FISE protection.
Features:
- API Routes with FISE
- Server-side rendering with protected data
- Client-side decryption
- Vercel deployment ready
Tech Stack: Next.js 14, React, FISE Status: 🚧 Planned
Path: /examples/mobile-react-native/
Cross-platform mobile app demonstrating FISE in React Native.
Tech Stack: React Native, Expo, FISE Status: 🚧 Planned
- API Protection: Fastify Backend
- Form Security: Coming Soon
- Token Management: Fastify Backend (Login example)
- Rate Limiting: Fastify Backend (Limited resource example)
- Node.js: Fastify Backend
- React: Coming Soon
- Vue: Coming Soon
- TypeScript: All examples support TypeScript
- Beginner: Fastify Backend
- Intermediate: Coming Soon
- Advanced: Coming Soon
Each demo follows the same structure:
# 1. Navigate to demo
cd examples/{demo-name}
# 2. Install dependencies
npm install
# 3. Run the demo
npm run dev
# 4. Run tests (if available)
npm testBegin with the Fastify Backend Demo to understand:
- How to encrypt API responses
- How to decrypt incoming requests
- Time-based security patterns
- Production best practices
Once comfortable with backend, explore frontend demos to learn:
- Client-side decryption
- Secure form submission
- Token management
Combine backend and frontend knowledge with full-stack examples:
- End-to-end data protection
- Synchronizing frontend/backend rules
- Deployment strategies
- Node.js 18+ (20+ recommended)
- npm 8+
- Basic JavaScript/TypeScript knowledge
- Understanding of REST APIs
- Familiarity with async/await
- Basic encryption concepts (helpful but not required)
Each demo includes:
- ✅ README.md - Full documentation
- ✅ QUICKSTART.md - Get running in 5 minutes
- ✅ package.json - Clear scripts and dependencies
- ✅ Example code - Well-commented, production-ready
- ✅ Tests - Automated test suite
| Feature | Fastify | React | Vue | Next.js | React Native |
|---|---|---|---|---|---|
| Encrypt Response | ✅ | N/A | 🚧 | 🚧 | 🚧 |
| Decrypt Response | ✅ | ✅ | 🚧 | 🚧 | 🚧 |
| Encrypt Request | ✅ | ✅ | 🚧 | 🚧 | 🚧 |
| Decrypt Request | ✅ | N/A | 🚧 | 🚧 | 🚧 |
| Token Management | ✅ | ✅ | 🚧 | 🚧 | 🚧 |
| Rate Limiting | ✅ | N/A | 🚧 | 🚧 | 🚧 |
| Form Protection | ✅ | ✅ | 🚧 | 🚧 | 🚧 |
| Binary/Video | ✅ | ✅ | 🚧 | 🚧 | 🚧 |
| Automated Tests | ✅ | 🚧 | 🚧 | 🚧 | 🚧 |
| TypeScript | ✅ | 🚧 | 🚧 | 🚧 | |
| Production Ready | ✅ | ✅ | 🚧 | 🚧 | 🚧 |
✅ Available | 🚧 Coming Soon |
Want to contribute a demo? We'd love your help!
- Choose a technology not yet covered
- Follow the template structure (see backend-fastify as reference)
- Include tests - All demos should have automated tests
- Document thoroughly - README + QUICKSTART required
- Keep it simple - Focus on clarity over features
- Make it production-ready - Show best practices
Areas we need:
- Python backend examples (FastAPI, Flask)
- Frontend frameworks (React, Vue, Svelte, Angular)
- Mobile examples (React Native, Flutter)
- Edge computing (Cloudflare Workers, Deno Deploy)
- Desktop apps (Electron, Tauri)
Open an issue to propose a demo!
Demo won't start:
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm installPort already in use:
# Change port via environment variable
PORT=3001 npm run devTests failing:
# Make sure server is running first
npm run dev # Terminal 1
npm test # Terminal 2Module not found:
# Make sure FISE is built
cd ../.. # Go to root
npm run build
cd examples/{demo-name}
npm install- Issues: GitHub Issues
- Questions: GitHub Discussions
- Demos: This directory contains all working examples
- Try the demos - Start with Fastify Backend
- Read the docs - See main documentation
- Build something - Use FISE in your project
- Share your demo - Contribute back to the community
Happy coding! 🚀