Loading
React 19Vite / BunReact Router v7TanStack QueryTailwind CSS v4Zod
AIRAC - Academic AI Center Platform
An academic hub built for the ACECR AI Department. It streamlines research publication catalogs, showcases applied enterprise AI models, and provides a multi-step data submission pipeline with strict schema validation for academic research files.
Project Info
RoleFrontend Engineer & UI Lead
Timeline2 Months
Core Tech
React 19Vite / BunReact Router v7TanStack QueryTailwind CSS v4Zod
The Challenge
Handling asynchronous, multi-format research dataset uploads while maintaining a fast initial load and clean UI animations on an academic audience's diverse hardware.
The Solution
Built on Vite, Bun, and React 19 for minimal bundle overhead. Combined React Hook Form with Zod for zero-latency client validation and TanStack Query for asynchronous server synchronization.
Next-Gen React 19 & React Router v7 Architecture
Streamlined Multi-step Upload System with Schema Verification
Asynchronous Server State Synchronization (TanStack Query)
Hardware-Accelerated Micro-interactions (Framer Motion)
System Architecture & Data Flow
Core Engine01
Vite & React 19
Micro-bundled production output minimizing client parsing overhead.
Validation Layer02
React Hook Form + Zod
Provides non-blocking, isolated field re-rendering during complex inputs.
Async Pipeline03
Dropzone Integration
Validates MIME signatures and size constraints directly on client threads.
Key Impact & Outcomes
- Build Pipeline Speed
- 4.2x Faster
- Form Validation Errors
- -65%
- Accessibility Score
- 99/100
Leveraged Bun and Vite SWC compiler to cut CI/CD compilation times.
Strict Zod schemas prevented malformed academic submissions before network transit.
Full keyboard navigation and ARIA landmarks verified via automated audits.
Performance Benchmarks (Before vs. After)
Total Production Bundle Size-69%
Before240 KB
After74 KB
First Contentful Paint (FCP)-66%
Before1.8s
After0.6s
Form Input Latency-90%
Before85ms
After8ms
Engineering Decisions & Trade-offs
Client-Side SPA Architecture (Vite + React Router v7)
Academic institutional infrastructure had restricted server execution budgets; a static, CDN-cached SPA eliminated ongoing server hosting overhead while maximizing speed.
Uncontrolled forms via React Hook Form
Prevented layout re-renders on every keystroke in multi-page document upload forms.
Interface Showcase
Interactive inspection of high-fidelity views
airac.ir
Click to expand
