Project overview

Royalfut is an international platform for selling in-game currency (FIFA / FC). The frontend is an Nx monorepo with two main applications—www.royalfut (marketing and shop) and sell.royalfut (seller funnel)—and shared libraries.

I contributed to migrating the legacy frontend (Babel, Pug, custom tooling) into this Nx workspace: unified ESLint and Prettier, set up the first Next.js–based sell app with a structured order funnel (account, delivery, summary), and replaced GitLab CI and GitHub Actions with a single pipeline and introduced a structured order funnel.

Sell flow & UX

I improved the seller-facing order flow and landing experience: interaction design (e.g. like button with clear feedback), currency picker and verification flows (backup codes, code resend), and a refactored review block with a Trustpilot-style gallery. I also upgraded Radix Dialog usage and tightened navigation and state handling across the sell steps.

Deploy pipeline & CI

I introduced a custom Nx deploy executor for building and deploying both apps, wired CI to use the correct entrypoints, and made process names explicit for easier debugging. I moved response compression to Nginx so the Node app does not double-compress and configured the pipeline for consistent, reproducible deploys.

Introduced a custom Nx deploy executor, made process names visible in the process list for easier debugging, and moved response compression to nginx so the Node build does not double-compress.

• CI start script: Overrode the default start script in apps/royalfut and apps/sell.royalfut, bootstrap/start.js and project.json so CI runs the correct entrypoints.
• Custom deploy executor: Added a dedicated exec Nx project with a deploy executor (exec/src/executors/deploy/), schema, Jest config, and wired it into both apps’ project.json; removed inline deploy logic from app bootstrap files.
• Process naming: Provided explicit process names for Nx tasks and patched Next.js (patches/next+14.2.3.patch) so the Node process name is set correctly in the process list.
• Compression via nginx: Disabled Next.js default compression in next.config.js and deploy executor so nginx handles gzip/compression and the app does not double-compress.

Analytics, a11y & frontend polish

I integrated analytics with low-priority loading and browser checks, and deferred the Google OAuth script so it loads only when the user signs in. I added lazy-loaded Lottie animations, high-res hero images with progressive loading, and viewport-based loading for the infographic block. I also improved accessibility across the sell app (labels, focus, keyboard, cookie banner, sliders).

New www.royalfut release

I contributed to shipping the new www.royalfut version: multi-account i18n (i18nexus) and a refactored i18n-runner, project-scoped public and private routes (sell vs www), and wallet/calculation credentials per project. I improved DX (VSCode/Prettier, ESLint in exec) and fixed mobile layout and optional marketing cards.

Staging, deploy executor & new stack

I extended the deploy executor for the sell app, added a staging environment, and completed the www.royalfut migration to the new stack (Next.js App Router, blog, updated i18n messages). I fixed Brevo so it only runs on the client (avoiding SSR/hydration issues), disabled the Nx daemon in production for stable builds, and added the Next.js bundle analyzer for size and dependency checks.

Checkout, cashback, blog & SEO

I fixed checkout and auth UX, added cashback to the create-order flow and API types, and refactored the blog so content is loaded at build time for better performance. I introduced a reusable JSON-LD schema for structured data (SEO) across funnel, coins, FAQ, and main pages, optimized the promo carousel, and removed the legacy royalfut app plus fixed email-related translations and URL handling.

SEO, state & deploy polish

I added Open Graph and alternative tags site-wide for sharing and search, with a shared meta helper and locale-aware URLs. I implemented bonus and coupon revalidation on route change so discount state resets correctly when users leave the funnel, and optimized the deploy executor configuration for faster, more reliable releases.

Summary

Over 6 months I worked across the Royalfut Nx monorepo (www and sell apps): migration to Nx and Next.js, custom deploy executor and CI, analytics and deferred third-party scripts, accessibility and performance improvements, multi-account i18n and project-scoped routing, staging and new stack rollout, checkout/cashback/blog and JSON-LD SEO, and Open Graph plus bonus revalidation. The stack includes React, Next.js (App Router), TypeScript, Tailwind, Radix UI, Zustand, next-intl, i18nexus, with GitLab CI, Nginx, and Docker for delivery.

Project overview

Ungrinding is a Next.js e-commerce frontend for a gaming services marketplace. Users browse game-specific offers (gold, boosts, etc.), configure options with dynamic pricing, and complete checkout. The app supports multiple games (e.g., World of Warcraft, Diablo IV, The Last Epoch), multi-currency, and a profile area for order history and delivery tracking.

I implemented the profile space and order management flow—order cards, delivery status, and per-order detail pages with server-side fetching. I added multi-currency support with a currency picker and locale-based price formatting, and implemented a cookie consent banner for compliance.

Auth, analytics & SEO

I replaced NextAuth with a custom cookie-based auth flow and OAuth (Google, Discord), including sign-in, token handling, and callback routes. I integrated Google Analytics with correct environment handling for production, and improved SEO for game and offer pages—meta tags, noindex where appropriate, and optimized game page structure.

SSR & offer configuration

I contributed to server-side rendering for reviews and game pages, skeleton loading during price changes, and pagination for game listings. I built the order detail page by ID with server-side order fetching and loading states. I also fixed OAuth callback URLs and aligned the login flow with the product design.

Configurable offers & dynamic pricing

I implemented the configurable offer flow with dynamic options (checkboxes, dropdowns, sliders), conditional options, and a range-based price calculator. I refactored offer form validation and option selection logic, and ensured offer pages integrate cleanly with the game and category layout.

Cart, state & UX polish

I refactored cart and transaction state—simplified the store structure and improved revalidation so checkout and post-purchase flows stay consistent. I fixed mobile layouts for categories and checkout, improved checkbox and form interactions, added not-found handling for invalid offers, and addressed edge cases in conditional option groups.

Category layout & game content

I refactored category pages with improved layout, breadcrumbs, and refresh behavior. I updated game content (e.g., World of Warcraft expansion from Dragonflight to The War Within) and extended offer configuration to support range-based options. I also contributed to CI configuration and environment handling for dev, staging, and production.

Summary

Over 5 months I worked on the Ungrinding frontend: profile and orders, multi-currency and localization, custom auth and OAuth, analytics and SEO, SSR and skeletons, configurable offers with dynamic pricing, cart and state refactor, mobile UX, category layout, and game content updates. The stack includes Next.js, React, TypeScript, Tailwind, Radix UI, Zustand, with OAuth (Google, Discord) and cookie-based sessions for auth.

Admin — Project overview

Ungrinding Admin is an internal Next.js app for operators to manage game content, offer configuration, pricing, and orders. It covers content pages (games and offer types), configuration and pricing UI with conditions and range options, offer preview, orders list, login flow, and game/asset support (e.g. WoW, Tarisland, Last Epoch).

I contributed the initial design and structure of the content section: game list, per-game and per-slug pages, data driven by URL and a shared game collection, and shared styles in the content layout. I refactored drag-and-drop from a generic UI layer into a content-specific module (sortable list, overlay, item components) so reordering and maintenance stay clear.

Configuration, pricing & dialogs

I implemented and extended the configure-price flow: conditional options, range options, ETA (including by percentage), and validation. I added a central configuration store and wired it to the configure-price UI, release/save flow, and fetching of options and single-offer data. I built a reusable popup/dialog system (with store and UI components) and used it for the configure-price preview and the upload-images dialog. I implemented the login and confirmation flow (including “send again”) and server-side auth and token handling, with path/domain and cookie options for production.

Config v2, preview & conditions

I contributed logic for tied IDs (add, remove, duplicate) and for clearing conditions when options are removed, and fixed conflicts in condition logic. I built the offer preview in the configure-price dialog: radio, checkbox, dropdown, and range (with slider and ETA). I added a preview provider and renderers so the live preview stays in sync with the current configuration and respects hidden options. I improved URL/collection-based data loading and optional disabling of storing fetched offers.

New games, orders & robustness

I added support for new games (Tarisland, Last Epoch), including slugs, assets, and icons. I ensured the orders list and mobile card show game name and image by game code, set sensible defaults for price and min fields, and fixed handling of undefined game code and order count so the UI stays stable. I updated Next.js config (e.g. wildcards) for correct behavior in different environments.

Summary (Admin)

Over 5 months (May–September 2024) I worked on the Ungrinding Admin front end: content structure and layout, configuration and pricing (including range and ETA), offer preview, DnD refactor, dialogs, auth, new games, and robustness fixes in orders and game areas. The stack includes Next.js (App Router), React, TypeScript, Tailwind, Radix UI, Zustand, React Hook Form, Zod, and @dnd-kit for drag-and-drop.