Multilingual website (PT/EN/ES) for an industrial company with per-client personalized catalogs, passwordless magic link authentication, and a technical assistance form with upload and automatic 30-day cleanup.
DesignAgência Ade!
↗ View live project
01
Overview
Watanabe is an industrial company that operates with clients in different countries and needed a website to communicate its products in three languages, centralize technical documentation per client, and offer a channel for technical assistance requests with file uploads. The audience is split between visitors seeking institutional information and pre-registered clients who access personalized catalogs with data related to their machinery and documents.
A central feature is the technical assistance form, which allows sending high-quality media files in large volumes. These files are stored in a Supabase bucket and automatically removed by Vercel cron jobs every 30 days, preventing obsolete data from accumulating in storage.
The project was built with Next.js, React, and TypeScript, with Tailwind CSS for styling. Multilingual content — Portuguese, English, and Spanish — is managed in WordPress via WPGraphQL with internationalization plugins. Pre-registered client authentication uses magic link, with no permanent password required. Forms validated with Zod and React Hook Form.
02
Challenge
Real internationalization — not just string translation, but automatic language detection from the browser and dynamic locale routing — required careful configuration of Next.js middleware with [lang] routes. WordPress also needed full multilingual support so that CMS-managed content appeared in the correct language without duplicating the data structure or creating separate language posts without links between them.
The magic link authentication system was built from scratch: the pre-registered client enters their email, receives a temporary code, and enters it in a second step of the form — which only then grants access to the personalized catalog. Access expires with the code, with no permanent password and no indefinitely open sessions. The technical assistance form needed to accept large, high-quality files, but storing them indefinitely wasn't viable — the system required an automatic cleanup routine without relying on manual intervention.
03
Solution
I configured Next.js middleware on dynamic [lang] routes to detect the browser language and redirect automatically. WordPress was set up with internationalization plugins and content is consumed via WPGraphQL already segmented by locale — ensuring each language loads the correct content without duplicating logic in the front-end.
The magic link flow was integrated into the catalog access form in two steps: the code is generated on the server, sent by email, and validated in the second step before releasing the personalized catalog. For file storage, I integrated the form with Supabase Storage, with Vercel cron jobs running automatic cleanup every 30 days — keeping the bucket lean without any manual intervention.