xPage — Google Sheet Automation
Description
This frontend-only Next.js application integrates with the xPage platform, serving as a microservice within an iframe to provide a native user experience. It facilitates automation for syncing xPage order data directly to Google Sheets, utilizing a secure popup for Google Sheet connection. Users can define intricate automation rules based on order types, products, and landing pages.
Features
- •Sync xPage order data with Google Sheets.
- •Create new spreadsheets or update existing ones.
- •Add multiple sheets to an existing spreadsheet.
- •Select ready-made or custom sheet table presets.
- •Customize data presets via drag-and-drop UI.
- •Real-time preview of custom sheet table structure.
- •Filter orders by type, product, and landing page.
- •Google Sheet connection via secure popup.
- •Seamless iframe integration into xPage platform.
Tech Stack
- •Next.js for server-rendered React frontend.
- •React for building interactive user interfaces.
- •TypeScript for static type checking and robustness.
- •Axios for making HTTP requests to APIs.
- •Zod for schema validation on client-side input.
- •Google Sheets API for spreadsheet integration.
- •CSS for custom styling and visual consistency.
Key Learnings
- •Mastered secure Google Sheet API integration.
- •Developed complex automation rules with filters.
- •Gained expertise in iframe microservice architecture.
- •Implemented dynamic drag-and-drop preset customization.
- •Improved client-side form validation with Zod.
Future Improvements
- •Add support for more data export formats.
- •Implement real-time updates for synced data.
- •Introduce a visual workflow builder for automations.
- •Expand filtering options with custom regex.
- •Allow scheduling for automated data syncs.