Sipamungkas.
Back to projects

SofiaIQ

Official website for SofiaIQ, an AI-powered mobile learning platform offering interactive Rust, Dart, and Python courses. I built the first version from Figma to Astro + Svelte, then revamped it with React + Vite a few months later when the client requested a framework migration.

Website
Client
SofiaIQ (PrecIQ)
Role
Frontend Developer
Timeline
Nov 2025 – Sep 2026
Year
2025
Stack
Astro Svelte Tailwind CSS React Vite Typescript
Visit Live Site
SofiaIQ

Overview

SofiaIQ is an AI-powered learning platform by PrecIQ that turns programming education into bite-size, interactive mobile practice, with dedicated apps for Rust, Dart, and Python. The website is the platform’s digital front door: it introduces the apps, showcases the AI-powered learning features, presents the team and testimonials, and routes visitors to the App Store and Google Play.

I joined the project when the design was finalized in Figma and owned the entire build-to-web process. A few months after launch, the client wanted to revamp the site on a new framework, and I led that migration end to end.

Key Features

  • Figma-to-Code Handoff: Translated the complete Figma design into a production website: hero with an auto-playing mobile app demo carousel, app showcase, feature storytelling, about, visionaries, testimonials, and a contact section.
  • App Showcase: Card-based presentation of the Rust, Dart, and Python learning apps with store badges, each card summarizing the learning path the app covers.
  • Feature Storytelling: Scroll-driven sections covering the mobile learning revolution, AI-powered understanding, visual progress tracking, and instant cloud setup, with a product demo video embedded inline.
  • Contact & Social: Contact form with social links (Facebook, X, LinkedIn, Instagram) driven by a central site config, plus Terms of Service and Privacy Policy pages.
  • SEO Optimized: Full meta, Open Graph, and Twitter Card tags with per-page SEO metadata, sitemap, and semantic HTML with ARIA labels.
  • Smooth Interactions: Auto-playing carousel, smooth scrolling navigation, hover zoom effects, and a page loader on initial load.

Technology Stack

V1: Astro + Svelte

  • Framework: Astro for the static site shell with island architecture and best-in-class zero-JS defaults.
  • Interactive Islands: Svelte 5 components for the navbar, carousel, feature, contact, and testimonial sections.
  • Styling: Tailwind CSS 4 with custom fonts and a purple-brand theme.
  • Tooling: Bun, TypeScript, deployed as a fully static build to Netlify.

V2: React Revamp

  • Framework: Migrated the site to React 19 on Vite with React Router 7, giving the client a stack that matches their in-house React expertise and makes future app-like features easier to build.
  • Auth-Ready: Integrated Better Auth groundwork in the client for the platform’s upcoming user accounts.
  • Styling: Tailwind CSS 4 with the same design system carried over 1:1 from the original build.

The Revamp

The first version shipped on Astro + Svelte and did its job well as a marketing site. A few months later, the client decided to evolve SofiaIQ’s web presence toward a more application-like product and wanted the team to maintain everything in a single React ecosystem.

I rebuilt the site on React 19 + Vite, porting every section and interaction from the Svelte implementation, keeping the design pixel-identical, and preserving the SEO surface (meta tags, canonical URLs, social cards) during the migration. The React version is what’s live at sofiaiq.io today.

My Role

As the Frontend Developer, I owned the web side of the product across both versions:

  1. V1 Build (Astro + Svelte):

    • Sliced the Figma design into a responsive, accessible Astro site with Svelte islands for interactive sections.
    • Implemented the auto-playing carousel, smooth-scroll navigation, hover effects, and page loader.
    • Wired the SEO layer (meta, Open Graph, and Twitter Cards) through a central config file.

  2. V2 Revamp (React + Vite):

    • Migrated all components from Svelte to React 19 with React Router, keeping the design and behavior identical.
    • Set up the Vite + TypeScript toolchain with ESLint and Tailwind CSS 4.
    • Laid the authentication groundwork with Better Auth for upcoming user features.
SofiaIQ screenshot 1