Case Study

InfinityX

AI Crypto Trading Platform

A production-grade SaaS ecosystem for automated cryptocurrency trading, built across three interconnected applications and deployed live on Cloudflare Pages.

RoleFrontend Developer

TypeClient Project

StatusLive in Production

PlatformWeb — Fully Responsive

DeploymentCloudflare Pages

Scroll

Section 01

< Overview />

InfinityX is a full-scale fintech SaaS platform built for automated cryptocurrency trading. The system allows users to create and manage AI-powered trading bots, monitor portfolio performance in real time, and operate across multiple exchanges including Binance, MEXC, Gate.io, and Bitget.

The platform is made up of three applications: a public marketing website for user acquisition, a secure user dashboard for day-to-day trading operations, and a role-gated admin panel for platform management. All three are independently deployed, share a consistent design language, and connect to a common backend API.

PROJECT INFO

RoleFrontend Developer

TypeClient Project

StatusLive in Production

PlatformWeb — Fully Responsive

DeploymentCloudflare Pages

Section 02

< Goals & Objectives />

01Provide a professional interface for automated crypto trading

02Allow users to manage bots and track performance easily

03Enable administrators to monitor system activity and manage users

04Deliver a high-performance and scalable production system

Section 03

< Architecture />

System Modules

Marketing WebsitePublic

User DashboardAuthenticated

Admin DashboardRole-based Access

Deployment & Infrastructure

▹Static export using Next.js
▹Hosted on Cloudflare Pages
▹API integration via environment configuration

Section 04

< Tech Stack />

FRAMEWORK & LANGUAGE

Next.js 16 (App Router)React 19TypeScript

STYLING

Tailwind CSS v4Custom CSS (789 lines of keyframes)Glassmorphism design system

ANIMATION

GSAP + ScrollTriggerFramer MotionCSS KeyframesHTML5 Canvas 2D

3D & GRAPHICS

Spline (cursor-tracking 3D)Three.js + React Three FiberCanvas candlestick chart

UI COMPONENTS

175+ components across three appsRadix UI primitivesshadcn/ui

DATA VISUALISATION

RechartsArea / Bar / Pie chartsSparklinesCustom tooltips

SECURITY

HttpOnly JWT cookiesCSRF token headersMiddleware route guardsSession polling + auto-logoutAdmin role gating

DEPLOYMENT

Cloudflare PagesStatic exportEdge deliveryEnv-based API config

Section 05

< Key Features />

Marketing Website

The public-facing landing site designed to convert visitors into users. Built with a focus on cinematic presentation and animation-rich storytelling.

▹Cinematic intro animation with full scroll lock and logo reveal — plays once per session

▹Scroll-pinned steps section built with GSAP ScrollTrigger across 3 responsive breakpoints

▹Interactive Spline 3D model that tracks cursor position and repositions on scroll

▹Scroll-aware floating header that transforms into a glassmorphic pill with text scramble hover effects

▹Custom HTML5 Canvas candlestick chart with procedurally generated OHLC market data

▹789 lines of custom CSS keyframe animations

▹5 pages: Home, About, FAQ, Contact, Policy/Terms

▹Deployed as a static export on Cloudflare Pages

User Trading Dashboard

The authenticated SaaS dashboard where users manage their trading bots, monitor performance, and handle subscriptions.

▹12 protected routes with middleware-level authentication

▹Portfolio analytics: NAV performance charts, monthly returns, allocation breakdown, top performers

▹Full trade history with CSV and PDF export, filtering by side, status, and symbol

▹Multi-step bot creation wizard with live BTC payment flow and QR code generation

▹Multi-exchange API key management with secure masking

▹3-tier subscription pricing with pre-purchase validation

▹724 lines of custom Canvas 2D animation — 3D floating crypto coins, Matrix-style data streams, candlestick charts, and particle effects on the login screen

▹57 Radix UI components for a consistent, accessible component library

Admin Control Panel

The internal management panel used to monitor and control the entire platform.

▹7 admin modules: Dashboard, Users, Strategy Users, Trades, Strategy Center, Infrastructure, Security

▹Real-time live trade feed with color-coded BUY/SELL indicators

▹Full user management with search, filters, status badges, and detailed user profiles

▹Per-user bot controls: play, pause, activate, deactivate with confirmation dialogs

▹Infrastructure health monitoring across 5 microservices with uptime tracking and error rate charts

▹Strategy management: activate/deactivate trading strategies with config and portfolio limits

▹Built-in API tester for testing backend endpoints directly from the panel

▹58 Radix UI components, React Hook Form + Zod for all forms

Section 06

< Key Highlights />

175+Reusable Components

24Protected Routes

3Interconnected Apps

LiveIn Production

Section 07

< Challenges & Solutions />

challenge_01.log

Animation performance on a content-heavy site

Problem

Running GSAP, Framer Motion, Spline 3D, and Canvas animations simultaneously risked degraded performance.

Solution

Exported as a fully static site, implemented lazy loading for 3D components, used gsap.matchMedia() for responsive animation control, and kept scroll triggers scoped to their sections.

challenge_02.log

Secure session management without localStorage

Problem

Many dashboards store JWTs in localStorage which is vulnerable to XSS attacks.

Solution

Implemented HttpOnly cookie-based auth so tokens are never accessible to JavaScript, paired with CSRF tokens on every mutation request, and a session polling system that checks auth status every 2 minutes and auto-redirects on expiry.

challenge_03.log

Complex state across three separate apps

Problem

Each app needed its own auth context, bot state, and strategy state without sharing a codebase.

Solution

Built isolated React Context providers for each concern — AuthContext, BotContext, and StrategyContext — keeping state predictable and scoped correctly per application.

Section 08

< My Role />

I was the sole frontend developer responsible for all three applications end to end. This included designing the component architecture, building all UI and animations, integrating REST APIs, implementing the authentication and security layer, and managing production deployment across all three apps on Cloudflare Pages.

←Back to Projects

[home][about][projects][contact]