[{"data":1,"prerenderedAt":564},["ShallowReactive",2],{"portfolio-list":3},[4,57,102,137,169,232,277,307,399,444,478],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"order":11,"isActive":7,"longDescription":12,"category":13,"tags":14,"recommended":20,"client":24,"year":25,"metrics":26,"challenge":38,"solution":39,"results":40,"body":45,"_type":51,"_id":52,"_source":53,"_file":54,"_stem":55,"_extension":56},"/portfolio/brand-website","portfolio",false,"","Brand Website","Stunning brand website with immersive storytelling, animations, and interactive elements.",8,"An award-winning brand website that combines cutting-edge technology with compelling storytelling to create an unforgettable digital experience.","Landing Page",[15,16,17,18,19],"Nuxt","GSAP","Three.js","WebGL","Contentful",[21,22,23],"polygraph-services-website","ozfame","mobile-app-landing","LuxBrand","2023",[27,31,34],{"value":28,"suffix":29,"label":30},300,"%","Time on site",{"value":32,"suffix":29,"label":33},150,"Inquiries lift",{"value":35,"suffix":36,"label":37},95,"+","Lighthouse score","The luxury brand needed a website that would stand out in a crowded market and convey their premium positioning while remaining performant.","We created an immersive experience using 3D elements and smooth animations while optimizing for performance through lazy loading and progressive enhancement.",[41,42,43,44],"FWA Site of the Day winner","300% increase in time on site","150% increase in inquiries","Lighthouse score of 95+",{"type":46,"children":47,"toc":48},"root",[],{"title":8,"searchDepth":49,"depth":49,"links":50},2,[],"markdown","content:portfolio:brand-website.md","content","portfolio/brand-website.md","portfolio/brand-website","md",{"_path":58,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":59,"description":60,"order":61,"isActive":7,"longDescription":62,"category":63,"tags":64,"recommended":70,"client":74,"year":75,"url":76,"metrics":77,"challenge":88,"solution":89,"results":90,"body":95,"_type":51,"_id":99,"_source":53,"_file":100,"_stem":101,"_extension":56},"/portfolio/ecommerce-platform","E-commerce Platform","A modern e-commerce platform with seamless checkout experience, inventory management, and analytics dashboard.",5,"We developed a comprehensive e-commerce solution that transforms online shopping into a seamless, enjoyable experience. The platform handles thousands of daily transactions with lightning-fast performance.","E-Commerce",[65,66,67,68,69],"Vue.js","Node.js","PostgreSQL","Stripe","Redis",[71,72,73],"saas-dashboard","fintech-platform","healthcare-portal","RetailCo","2024","https://example.com",[78,81,84],{"value":79,"suffix":29,"label":80},200,"Conversion rate lift",{"value":82,"suffix":29,"label":83},40,"Cart abandonment down",{"value":85,"suffix":86,"label":87},99,".9%","Peak sales uptime","The client needed a scalable e-commerce platform that could handle high traffic during sales events while maintaining fast page loads and a smooth checkout experience.","We built a modern JAMstack architecture with server-side rendering, implemented intelligent caching strategies, and created a streamlined checkout flow that reduced cart abandonment by 40%.",[91,92,93,94],"200% increase in conversion rate","40% reduction in cart abandonment","99.9% uptime during peak sales","\u003C 1 second page load times",{"type":46,"children":96,"toc":97},[],{"title":8,"searchDepth":49,"depth":49,"links":98},[],"content:portfolio:ecommerce-platform.md","portfolio/ecommerce-platform.md","portfolio/ecommerce-platform",{"_path":103,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":104,"description":105,"order":106,"isActive":7,"category":107,"tags":108,"recommended":111,"client":8,"year":8,"metrics":114,"challenge":124,"solution":125,"results":126,"body":130,"_type":51,"_id":134,"_source":53,"_file":135,"_stem":136,"_extension":56},"/portfolio/fintech-platform","FinTech Platform","Financial technology platform with real-time trading, portfolio management, and market analysis.",9,"Web App",[109,110,69],"React","Python",[71,112,113],"ecommerce-platform","logify",[115,119,122],{"value":116,"suffix":117,"label":118},50,"ms","Target UI update latency",{"value":120,"suffix":36,"label":121},15,"Markets & instruments",{"value":85,"suffix":86,"label":123},"Platform uptime goal","The client needed a real-time trading and portfolio platform with low latency and reliable market data.","We built a React frontend with WebSocket-driven updates, Python backend for analytics, and Redis for real-time data and caching.",[127,128,129],"Real-time portfolio and market updates","Low-latency order execution","Scalable, secure architecture",{"type":46,"children":131,"toc":132},[],{"title":8,"searchDepth":49,"depth":49,"links":133},[],"content:portfolio:fintech-platform.md","portfolio/fintech-platform.md","portfolio/fintech-platform",{"_path":138,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":139,"description":140,"order":141,"isActive":7,"category":107,"tags":142,"recommended":145,"client":8,"year":8,"metrics":146,"challenge":156,"solution":157,"results":158,"body":162,"_type":51,"_id":166,"_source":53,"_file":167,"_stem":168,"_extension":56},"/portfolio/healthcare-portal","Healthcare Portal","Secure patient portal with appointment scheduling, medical records, and telemedicine features.",10,[65,143,144],"Laravel","MySQL",[71,113,72],[147,150,153],{"value":148,"suffix":8,"label":149},4,"Core portal modules",{"value":151,"suffix":29,"label":152},100,"Traffic encrypted in transit",{"value":154,"suffix":29,"label":155},60,"No-show reduction target","The healthcare provider needed a secure, compliant patient portal for scheduling appointments, viewing records, and telemedicine visits.","We built a HIPAA-aware portal with authentication, appointment scheduling, medical records access, and integrated video consultations.",[159,160,161],"Secure, compliant patient experience","Reduced no-shows with reminders and self-service","Streamlined telemedicine workflows",{"type":46,"children":163,"toc":164},[],{"title":8,"searchDepth":49,"depth":49,"links":165},[],"content:portfolio:healthcare-portal.md","portfolio/healthcare-portal.md","portfolio/healthcare-portal",{"_path":170,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":171,"description":172,"order":49,"isActive":173,"longDescription":174,"category":107,"tags":175,"client":183,"year":75,"metrics":184,"recommended":193,"image":194,"highlights":195,"overview":200,"challenge":201,"solution":202,"features":203,"technical":211,"results":219,"sidebarTitle":224,"body":225,"_type":51,"_id":229,"_source":53,"_file":230,"_stem":231,"_extension":56},"/portfolio/logify","Live fleet ops — less phone tag, faster compliance handoffs","Internal real-time platform for trucking — IoT through NATS JetStream, fleet dashboards, FMCSA-oriented reporting, Keycloak, Postgres + Redis.",true,"A real-time operational system that gives trucking and logistics teams a single place to see fleet activity and device telemetry as it happens, backed by a clear service and data architecture (NATS JetStream ingestion, core domain services, PostgreSQL and Redis, read replicas) and tooling to prepare reports for FMCSA compliance and submissions.",[176,177,178,179,66,180,181,67,69,182],"AWS","IoT","Next.js","TypeScript","Keycloak","NATS","Compliance","Confidential",[185,188,191],{"value":186,"suffix":36,"label":187},500,"Fleet assets on one map",{"value":189,"suffix":36,"label":190},12,"Ingest & domain services",{"value":85,"suffix":86,"label":192},"Ingest reliability goal",[71,73,72],"/images/portfolio/logify.jpg",[196,197,198,199],"Live fleet visibility - trucks, status, and key telemetry on one screen","FMCSA report preparation - structured outputs to support regulatory filings and audit-ready documentation from operational data","End-to-end path from edge IoT devices through NATS JetStream ingestion into core services and the UI","Enterprise access control with Keycloak and role-aligned permissions","Logify is an internal operations product for a trucking and logistics company. It aggregates activity and telemetry from vehicles and connected devices into a real-time dashboard so dispatchers, fleet managers, and leadership can see what the fleet is doing without switching tools or waiting for batch reports.\n\nIt is built for people who run day-to-day transport operations: where assets are, whether they are moving or idle, and whether device data looks healthy - trustworthy operational signal, not just a map.\n\nThe problem it solves is fragmentation and latency. Fleet reality is continuous and distributed, but many teams still depend on delayed exports, phone calls, or disconnected systems. Logify centralizes that stream of truth so decisions are based on current state, not yesterday’s spreadsheet.\n\nIt also reduces the compliance scramble: the same operational record set can be shaped into reports suitable for FMCSA-related requirements, so safety and regulatory roles spend less time re-keying data across portals and spreadsheets.\n","Trucks and IoT endpoints sit on variable networks. Payloads can arrive out of order, reconnect often, or burst after offline periods - the system has to tolerate gaps without corrupting operational views.\n\nIngestion runs through NATS JetStream so bursts and reconnects land in a durable queue before core services consume them - parsing, versioning, validation, and back-pressure have to stay strict so one bad frame or spike does not destabilize the pipeline.\n\nOperators need hierarchy and clear states - not a dump of fields. The UI must stay readable under high update rates without feeling jittery or overwhelming.\n\nDifferent roles see different slices of the fleet and sensitive data. Keycloak integration must be reliable in the browser and on APIs, with consistent enforcement so permissions are not duplicated or drift between frontend and backend.\n","A Next.js (TypeScript) frontend provides the dashboard; a Node.js backend owns normalization, business rules, and APIs consumed by the app. IoT traffic lands in NATS JetStream first, then flows into modular core services (users and access, fleet control, device registry, compliance, live tracking, session state) so spikes and retries do not starve the UI path.\n\nPersistence uses PostgreSQL (with read replicas for scale-out reads) and Redis for hot state and caching; core services stay the single place domain rules live, with storage details isolated behind clear boundaries.\n\nAuthentication uses standard OIDC/OAuth flows with Keycloak; tokens gate API access, and role claims drive visibility. Frontend checks improve UX; backend enforcement is the source of truth.\n\nThe dashboard is organized around fleet overview, per-asset detail, and state-first panels (moving, stopped, offline, degraded device) rather than raw sensor dumps.\n\nReporting layers turn normalized fleet and operational data into exportable packages aligned with what FMCSA workflows expect - separate from the live UI path so batch generation does not compete with real-time ingestion.\n\nPlatform observability covers API documentation (Swagger), centralized logging, deployment pipelines, real-time metrics, and alerting so operations can see ingestion health, service errors, and capacity signals alongside the product.\n",[204,205,206,207,208,209,210],"Real-time truck monitoring: a live operational picture without manual refresh or reconciling multiple sources","Status and telemetry: location and activity-style signals with device health so 'is this truck working?' is answered from data","IoT ingestion: NATS JetStream queue between devices and core services for buffering, ordering where needed, and operational resilience","Role-based access: Keycloak identities; permissions match operational responsibility","Scalable Node.js backend: clear modules for more device types, rules, and consumers over time","Data tier: PostgreSQL cluster with read replicas; Redis for session and state cache","FMCSA-oriented reporting: compile and format operational data into reports intended for carrier submission and internal compliance review",[212,213,214,215,216,217,218],"Near real-time UI: server push or subscribe model so the dashboard stays current without hammering the API","NATS JetStream: durable ingestion path from IoT into core services; back-pressure and replay-friendly handling for flaky networks","Modular backend: queue and transport handling separated from domain logic and HTTP handlers - easier tests and safer changes","PostgreSQL plus read replicas; Redis for cache and fast session or state reads alongside the primary store","Keycloak: short-lived access tokens, refresh handling in the app, server-side verification on protected routes","Observability: Swagger for API docs, centralized logging, metrics, alerting, and CI/CD-style deployment visibility","Performance: batched or throttled UI updates for high-frequency telemetry, lean API payloads",[220,221,222,223],"~60% less manual effort on FMCSA-facing report assembly (ops estimate)","One live view of fleet and device health instead of reconciling exports and calls","Durable IoT ingestion so reconnects and bursts do not corrupt operational state","Role-aware access (Keycloak) enforced consistently in UI and APIs","Impact",{"type":46,"children":226,"toc":227},[],{"title":8,"searchDepth":49,"depth":49,"links":228},[],"content:portfolio:logify.md","portfolio/logify.md","portfolio/logify",{"_path":233,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":234,"description":235,"order":148,"isActive":173,"longDescription":236,"category":107,"tags":237,"recommended":241,"client":8,"year":75,"url":8,"metrics":243,"image":252,"gallery":253,"challenge":256,"solution":257,"results":258,"features":263,"body":270,"_type":51,"_id":274,"_source":53,"_file":275,"_stem":276,"_extension":56},"/portfolio/media-compressor","Cross-platform compressor + download funnel — MVP in weeks","Electron app for local image/video compression (Windows, macOS, Linux) plus a landing page with installers and onboarding.","Media Compressor is a full product build - the Electron desktop application and its marketing landing page. The app compresses images and video locally on Windows, macOS, and Linux with a simple drag-and-drop interface, batch processing, and format support. The landing page explains the product, hosts installers, and guides users from download to first use.",[238,239,240,66],"Electron","Next","Desktop App",[23,22,242],"brand-website",[244,248,250],{"value":245,"suffix":246,"label":247},3," wk","MVP to installers",{"value":245,"suffix":8,"label":249},"Desktop OS targets",{"value":189,"suffix":36,"label":251},"Compression presets & paths","/images/portfolio/media-compressor.jpg",[254,255],"/images/portfolio/media-compressor_gallery1.jpg","/images/portfolio/media-compressor_gallery2.jpg","The project required both a reliable desktop app for local media compression and a clear online presence - a single place to learn about the app, download it for each platform, and understand how to use it.","We developed the Media Compressor Electron app with a modern UI, support for common image and video formats, configurable compression options, and cross-platform installers. We then built a conversion-focused landing page that showcases the app, provides direct download links, and walks users through installation and basic usage.",[259,260,261,262],"MVP shipped in 3 weeks (desktop app + landing + installers)","Local-only compression — no uploads, faster handoffs for heavy files","One page for discovery, download per platform, and first-run guidance","Batch workflows and format options suitable for creative and marketing teams",[264,265,266,267,268,269],"Electron desktop app with drag-and-drop and batch compression","Image and video compression with format and quality options","Cross-platform builds and installers","Landing page with hero, feature highlights, and download CTAs","Install and usage instructions on the site","Download section with version and release notes",{"type":46,"children":271,"toc":272},[],{"title":8,"searchDepth":49,"depth":49,"links":273},[],"content:portfolio:media-compressor.md","portfolio/media-compressor.md","portfolio/media-compressor",{"_path":278,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":279,"description":280,"order":281,"isActive":7,"category":282,"tags":283,"recommended":285,"client":8,"year":8,"metrics":286,"challenge":294,"solution":295,"results":296,"body":300,"_type":51,"_id":304,"_source":53,"_file":305,"_stem":306,"_extension":56},"/portfolio/mobile-app-landing","Mobile App Landing","High-converting landing page for a mobile application with app store integrations.",11,"Mobile App",[178,284],"Framer Motion",[22,242,21],[287,289,291],{"value":35,"suffix":36,"label":288},"Lighthouse performance",{"value":49,"suffix":8,"label":290},"Store CTAs above the fold",{"value":292,"suffix":8,"label":293},6,"Story & proof sections","The client needed a high-converting landing page to showcase their mobile app and drive downloads from the App Store and Google Play.","We designed and built a focused landing page with clear value proposition, feature highlights, social proof, and prominent app store CTAs using Next.js and Framer Motion for engaging animations.",[297,298,299],"Clear path to app store downloads","Responsive, mobile-first layout","Fast load and strong conversion focus",{"type":46,"children":301,"toc":302},[],{"title":8,"searchDepth":49,"depth":49,"links":303},[],"content:portfolio:mobile-app-landing.md","portfolio/mobile-app-landing.md","portfolio/mobile-app-landing",{"_path":308,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":309,"description":310,"order":245,"isActive":173,"longDescription":311,"category":13,"tags":312,"recommended":314,"client":315,"year":316,"url":317,"image":318,"metrics":319,"highlights":327,"overview":332,"challenge":333,"solution":334,"architecture":335,"dataFlowSteps":354,"screenshots":360,"gallery":372,"results":373,"features":378,"technical":387,"body":392,"_type":51,"_id":396,"_source":53,"_file":397,"_stem":398,"_extension":56},"/portfolio/ozfame","Course funnel that turns social traffic into paid signups","Landing and checkout flow for an online course — mentor story, proof, pricing, and payment on legacy rails.","A conversion-focused marketing landing page built to promote and sell an online course focused on social media growth, personal branding, and influencer marketing. The page presents the course mentor, training program, benefits, and pricing tiers in a layout designed to increase course registrations.",[239,313],"TailwindCSS",[21,242,23],"OZFame","2025","https://webinars-azure.vercel.app/","/images/portfolio/ozframe.jpg",[320,323,325],{"value":321,"suffix":29,"label":322},32,"Checkout completion lift",{"value":61,"suffix":8,"label":324},"Pricing tiers live",{"value":245,"suffix":246,"label":326},"Build & handoff",[328,329,330,331],"Single conversion path from hero to checkout with clear context for cold traffic","Trust stack (mentor credentials, outcomes, testimonials) introduced before pricing ask","Legacy payment rails integrated without changing backend billing operations","Mobile-first page architecture tuned for social-first acquisition campaigns","OZFame needed a focused course-sales experience that could convert social traffic quickly without sacrificing trust. Most visitors arrived from short-form content and had low context, so the page had to explain the mentor, the program, and expected outcomes in a concise but credible way.\n\nWe structured the page as a narrative funnel: value proposition, mentor proof, audience fit, curriculum shape, pricing options, and checkout CTAs. The build stayed intentionally lean so the team could iterate copy and offers rapidly as campaigns changed.\n","The core challenge was balancing persuasion with clarity. The previous flow either overshared too early or pushed users to checkout before enough confidence had been established, which led to drop-off in the lower funnel.\n\nAnother constraint was payment infrastructure. The client had an existing checkout stack they wanted to keep, so the landing needed to connect into those legacy rails reliably while preserving attribution and user intent across the handoff.\n","We implemented the funnel in Next.js with reusable, campaign-friendly sections and CTA patterns. Hero messaging anchors the offer first, then progressively adds trust and program detail before exposing full pricing options.\n\nThe checkout transition was integrated into the current payment system rather than replaced, which reduced migration risk and sped up launch. Tailwind-based components made it easy for the team to adjust content blocks, testimonials, and pricing copy between campaign cycles without redesigning the whole page.\n",[336,342,348],{"title":337,"items":338},"Frontend",[339,340,341],"Next.js landing page with modular sections for hero, proof, curriculum, pricing, FAQ","Responsive component system optimized for mobile-first social traffic","CTA hierarchy that preserves one primary conversion path to checkout",{"title":343,"items":344},"Backend / Routing",[345,346,347],"Route and parameter handoff into the existing checkout rails","Event-friendly links to preserve campaign context during payment transition","Deployment and preview workflow on Vercel for fast content iteration",{"title":349,"items":350},"Integrations",[351,352,353],"Legacy payment stack kept as system of record for transactions","Marketing attribution inputs passed from landing to checkout","Testimonial and pricing content managed directly in page content blocks",[355,356,357,358,359],"Social ad / creator traffic","Course landing narrative","Pricing selection","Legacy checkout","Paid signup",[361,364,368],{"title":362,"caption":363,"image":318},"Landing hero and value proposition","Above-the-fold section optimized for cold social traffic.",{"title":365,"caption":366,"image":367},"Mid-page proof and offer context","Supporting sections that build trust before pricing.","/images/portfolio/ozframe_gallery1.jpg",{"title":369,"caption":370,"image":371},"Conversion blocks and checkout CTA","Offer framing and transition point into payment.","/images/portfolio/ozframe_gallery2.jpg",[367,371],[374,375,376,377],"+32% checkout completion vs. previous funnel (client-measured)","Single path from hero to payment without losing the narrative","Mentor proof, testimonials, and pricing structured for cold traffic","Strong Core Web Vitals on Vercel; mobile-first layout throughout",[379,380,381,382,383,384,385,386],"Conversion-focused hero section","Mentor introduction","Target audience sections","Course curriculum overview","Pricing plans with integration to existing payment system","Testimonials","FAQ section","Multiple call-to-action blocks",[388,389,390,391],"Next.js (TypeScript) rendering with TailwindCSS utility-first component styling","Reusable section-level blocks to iterate campaigns without full page rewrites","Legacy checkout handoff strategy to avoid billing platform migration risk","Vercel deployment flow for rapid previews and production releases",{"type":46,"children":393,"toc":394},[],{"title":8,"searchDepth":49,"depth":49,"links":395},[],"content:portfolio:ozfame.md","portfolio/ozfame.md","portfolio/ozfame",{"_path":400,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":401,"description":402,"order":403,"isActive":173,"longDescription":404,"category":13,"tags":405,"client":406,"year":75,"url":407,"metrics":408,"recommended":415,"image":416,"gallery":417,"challenge":420,"solution":421,"results":422,"features":427,"body":437,"_type":51,"_id":441,"_source":53,"_file":442,"_stem":443,"_extension":56},"/portfolio/polygraph-services-website","Polygraph Services Website","A professional service website for a polygraph testing company in Ukraine. Presents services, explains the testing process, and enables clients to request consultations or book examinations.",7,"A service-oriented website for a company that provides professional polygraph (lie detector) testing services for businesses and individuals. The site clearly explains available services, builds trust through professional presentation, and simplifies contacting the company for consultations or booking tests. The design focuses on clarity, credibility, and conversion by highlighting expertise, confidentiality standards, and a structured testing process.",[239,313],"ProPolygraph","https://propolygraph.com.ua/",[409,411,413],{"value":11,"suffix":8,"label":410},"Trust & conversion sections",{"value":412,"suffix":36,"label":288},98,{"value":245,"suffix":8,"label":414},"Test types with pricing",[22,242,23],"/images/portfolio/polygraph-services-website.jpg",[418,419],"/images/portfolio/polygraph-services-website_gallery1.jpg","/images/portfolio/polygraph-services-website_gallery2.jpg","The client needed a professional online presence that would explain polygraph services to businesses and individuals, convey trust and confidentiality, and make it easy to request consultations or book examinations without overwhelming visitors.","We built a Next-based service website with a clear hero and service overview, pricing for different test types, a step-by-step process (consultation → agreement → testing → report), benefits and trust indicators, FAQ, and a contact/inquiry form. The layout is responsive and trust-focused, deployed on Vercel.",[423,424,425,426],"Clear service and pricing presentation","Structured process that builds confidence","Easy path from visitor to consultation request","Fast, responsive experience on Vercel",[428,429,430,431,432,385,433,434,435,436],"Hero section with service overview","Explanation of polygraph services","Pricing for different types of tests","Process description (consultation → agreement → testing → report)","Benefits and trust indicators","Contact information and inquiry form","Service-based landing structure","Trust-focused design","Responsive layout",{"type":46,"children":438,"toc":439},[],{"title":8,"searchDepth":49,"depth":49,"links":440},[],"content:portfolio:polygraph-services-website.md","portfolio/polygraph-services-website.md","portfolio/polygraph-services-website",{"_path":445,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":446,"description":447,"order":292,"isActive":7,"longDescription":448,"category":107,"tags":449,"recommended":453,"client":454,"year":75,"challenge":455,"solution":456,"results":457,"metrics":462,"body":471,"_type":51,"_id":475,"_source":53,"_file":476,"_stem":477,"_extension":56},"/portfolio/saas-dashboard","SaaS Dashboard","Intuitive dashboard for managing business analytics with real-time data visualization and reporting.","A comprehensive analytics dashboard that helps businesses make data-driven decisions with real-time insights and beautiful visualizations.",[109,450,451,452,179],"D3.js","Tailwind","GraphQL",[112,72,73],"AnalyticsPro","Users struggled with complex data interfaces that made it difficult to extract actionable insights from their business metrics.","We redesigned the entire user experience with a focus on simplicity and clarity, implementing intuitive data visualizations and customizable dashboards.",[458,459,460,461],"60% increase in user engagement","45% faster task completion","92% user satisfaction score","3x increase in daily active users",[463,465,468],{"value":154,"suffix":29,"label":464},"Engagement lift",{"value":466,"suffix":29,"label":467},45,"Faster task completion",{"value":245,"suffix":469,"label":470},"x","Daily active users",{"type":46,"children":472,"toc":473},[],{"title":8,"searchDepth":49,"depth":49,"links":474},[],"content:portfolio:saas-dashboard.md","portfolio/saas-dashboard.md","portfolio/saas-dashboard",{"_path":479,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":480,"description":481,"order":482,"isActive":173,"longDescription":483,"results":484,"category":107,"image":486,"url":487,"tags":488,"recommended":492,"client":480,"year":316,"metrics":494,"highlights":501,"overview":506,"challenge":507,"solution":508,"architecture":509,"dataFlowSteps":525,"screenshots":531,"features":543,"technical":550,"body":557,"_type":51,"_id":561,"_source":53,"_file":562,"_stem":563,"_extension":56},"/portfolio/x-lead","X-Lead","Bulk email verification inside Google Sheets — results in the grid, optional HubSpot handoff.",1,"Spreadsheet addon for bulk email verification with integrated lead management and HubSpot sync — lightweight UI in the sheet, API-backed checks, and an admin surface for operations.",[485],"Automated 3-stage validation that reduced bounce rates for early-adopter sales teams by an average of 22%.","/images/portfolio/x-lead.jpg","https://x-lead.vercel.app/",[178,489,490,179,491],"Google Sheets API","HubSpot API","Tailwind CSS",[71,113,493],"media-compressor",[495,497,499],{"value":245,"suffix":8,"label":496},"Validation stages (syntax, MX, SMTP)",{"value":61,"suffix":8,"label":498},"Surfaces — addon, API, landing, admin, CRM",{"value":49,"suffix":8,"label":500},"CRM touchpoints (contacts + pipeline status)",[502,503,504,505],"Verify email columns in bulk without exporting CSVs or switching tools","API performs syntax, MX, and SMTP-oriented checks; heavy work runs off the UI thread via a queue","HubSpot sync for contacts and pipeline status so verified leads land where sales already works","Admin dashboard for usage, logs, and accounts — separate from the marketer’s spreadsheet flow","X-Lead is a spreadsheet addon for teams that live in Google Sheets but still need trustworthy email data. Users select ranges or columns, run verification, and write results back into the grid — same file, same workflow, fewer copy-paste round trips to standalone tools.\n\nBehind the addon sits a verification API and a queue-backed processing path so large batches do not time out in the browser or hit provider rate limits naively. A Next.js landing page covers acquisition and onboarding; an authenticated dashboard gives operators visibility into jobs, failures, and usage.\n\nThe product deliberately meets sales and growth teams where they work. Verified rows can sync into HubSpot as contacts with appropriate lifecycle or deal signals, so the spreadsheet remains the scratchpad while the CRM stays the system of record.\n","Email verification products usually assume a web app or API-only integration. Sheet users expect instant feedback for small jobs but also run multi-thousand-row lists — the system has to feel responsive while still being honest about async work and partial failures.\n\nCRM sync adds another constraint: HubSpot objects and pipelines are easy to get wrong. Updates must be idempotent enough for re-runs, scoped to the right portal, and visible in admin logs when something misconfigures.\n","The addon talks to a dedicated verification API. Interactive checks can return quickly for small selections; bulk jobs are accepted as work items, processed by workers that implement syntax validation, MX lookup, and SMTP-oriented probing, then persist results for the sheet to poll or pull.\n\nThe Next.js app hosts the public landing (hero, product explanation, signup/install path) and the authenticated admin experience — metrics, job history, user-level usage, and integration health. Serverless or API routes handle auth boundaries and proxy sensitive operations.\n\nHubSpot integration uses the official APIs to upsert contacts and map verification outcomes to properties or stages the team configures. The addon does not replace HubSpot; it feeds it from the sheet with clear audit trails in the admin panel.\n",[510,515,521],{"title":337,"items":511},[512,513,514],"Google Sheets addon UI — bulk actions, progress, and per-row results in-grid","Marketing landing (Next.js) — hero, product narrative, install / trial CTAs","Authenticated dashboard — accounts, usage, logs, integration settings",{"title":516,"items":517},"Backend",[518,519,520],"REST-style API for verification requests and job status","Queue and workers for batch processing, retries, and rate-aware outbound checks","Persistence for jobs, results, and audit data consumed by the admin app",{"title":349,"items":522},[523,524],"Google Sheets API — sidebar UI, triggers, and writing results to cells","HubSpot API — contacts, properties, and pipeline / status updates from verified rows",[526,527,528,529,530],"Sheet addon","Verification API","Queue & workers","Results store","HubSpot CRM",[532,536,539],{"title":533,"caption":534,"image":535},"Addon in the spreadsheet","Bulk verification and per-row status without leaving the grid.","/images/portfolio/x-lead-sheet.jpg",{"title":537,"caption":538,"image":486},"Landing page","Hero, product summary, and path to install or sign up.",{"title":540,"caption":541,"image":542},"Admin dashboard","Usage, job history, and user-level visibility for operations.","/images/portfolio/x-lead-dashboard.jpg",[544,545,546,547,548,549],"Bulk email verification from the spreadsheet UI — select a range, run checks, read results in place","Fast, API-driven validation pipeline (syntax, MX records, SMTP-oriented probes as applicable)","Lead workflow — track verification outcomes alongside your columns before pushing to CRM","HubSpot integration for contacts and status / pipeline alignment after verification","Admin panel for monitoring usage, logs, integrations, and user activity","Next.js landing for marketing, pricing context, and onboarding",[551,552,553,554,555,556],"Next.js (TypeScript) for landing and dashboard; Tailwind for layout and component styling","API routes / serverless handlers for auth, job submission, and webhook-style HubSpot callbacks where needed","Addon uses Google Apps Script and the Sheets API for UI surfaces and cell writes; calls backend over HTTPS","Worker tier decouples SMTP and DNS-heavy work from request/response latency","HubSpot client implemented against current REST APIs; mapping layer keeps sheet columns and CRM properties explicit and testable","Structured logging in admin for failed jobs, integration errors, and re-sync operations",{"type":46,"children":558,"toc":559},[],{"title":8,"searchDepth":49,"depth":49,"links":560},[],"content:portfolio:x-lead.md","portfolio/x-lead.md","portfolio/x-lead",1777088736583]