ShoppingEventVIP

Languages Supported:

• English
• French
• Dutch

Backend Architecture & Feature Development

Migrated Business Logic to Directus

Refactored essential business operations from Remix loaders and actions into custom hooks (filters and actions) and endpoints within Directus. This shift established a centralized backend shared by web and mobile clients, reducing strong duplication and ensuring platform consistency.

Developed Custom Logic

1. Implemented custom login logic to migrate legacy users to the new backend system.
2. Built a registration system with disposable email detection to reduce spam and improve user data quality.

Developed Custom Endpoints

1. Created tailored event endpoints to deliver personalized event data based on each user’s context and role.

Designed an Event-Driven Architecture

1. Built an event-driven communication system to trigger actions in internal services (e.g., CRM and email services).
2. Events included user creation, email changes, password resets, and event subscriptions, ensuring a decoupled and scalable system.

Automated PDF Generation for Subscriptions

1. Integrated PDFKit to automatically generate confirmation PDFs for event subscriptions, which users can download for their records.

Implemented Role-Based Access Control (RBAC)

1. Defined and enforced a fine-grained role and permission model within Directus.
2. Roles included admin, sub-admin, author, editor, and subscriber.
3. Ensured users could only access features and data relevant to their assigned roles, supporting business rules and system security.

Frontend Implementation & User Experience

Complete UI Redesign in Remix

Implemented a brand-new UI from scratch using Remix (React Router v7) and Mantine UI. Built responsive and accessible components aligned with the updated Figma design system.

Handled state management using Outlet context and React hooks such as useState.

Custom Multilingual Solution (EN, FR, NL)

Designed a tailored translation hook specific to the app’s structure:

• Maintained separate JSON files for each supported language
• Implemented dynamic rendering based on user language preference and route paths (/en, /fr, /nl)
• Enabled smooth language switching without affecting performance or SEO

Frontend Integration with New Backend Architecture

• Rewrote form submission logic to consume new API endpoints
• Utilized Remix’s Form and useFetcher for enhanced control
• Added Cloudflare Turnstile to registration and login forms to prevent spam
• Implemented error handling using Remix’s ErrorBoundary, improving the clarity of error messaging
• Enhanced state management for better responsiveness and real-time UX feedback
• Integrated client-side and server-side form validation using Yup and Zod
• Identified a critical token management issue caused by server-side rendering in Remix: the Directus token for the last authenticated user was being reused in unauthenticated contexts. Although it didn’t cause immediate failures, the behavior was inconsistent and potentially insecure. The issue was resolved by ensuring isolated token handling per request.