Growtrics

Growtrics is an EdTech startup serving the Singapore market. The website had to combine a modern brand language, educational content and smooth motion. The technical build was done by Perxel's lead engineer as a freelance project, before Perxel was founded.

Technical overview

• Target market: Singapore (EdTech startup)
• Technical build: Perxel's lead engineer
• Timeline: 3 months, from kickoff to handover
• Frontend: Next.js 16 (App Router, TypeScript), Tailwind CSS, shadcn/ui
• Motion: GSAP
• CMS: TinaCMS (Git-backed)
• Form handling: Google Sheets API
• Deployment: Static generation and client-side features on Vercel

Context and handover

What the build focused on:

• Turning the design into a working interface. The design became a real website, with GSAP motion that makes the content more engaging to scroll through.
• A lean architecture with no database. For a startup, running costs matter. The site has no database and no complex backend.
• Handover to an in-house team. Growtrics has its own tech team, so the Next.js 16 codebase, the TinaCMS structure and the component system were organised to make the takeover easy.

Motion with GSAP and Next.js 16

On a creative website, motion carries the character of the product. The project pairs GSAP with Next.js 16.

• Storytelling through motion. Content blocks, images and growth figures animate as the visitor scrolls.
• Frame rate. Despite the amount of animation, the GSAP timelines are tuned to keep a steady frame rate on mobile devices.
• A consistent UI system. Tailwind CSS and shadcn/ui keep the interface structure consistent and the codebase easy to maintain.

A lean setup: TinaCMS and the Google Sheets API

To keep the system light and free of monthly server costs, the project uses no backend and no database.

Content with TinaCMS

All articles and the About page are stored as code in the Git repository, so editing and updating stay visual and simple. This is also the stack Perxel offers in its Next.js and headless CMS service.

Forms through the Google Sheets API

Instead of building a database just to store enquiries and newsletter sign-ups, the site's forms talk directly to the Google Sheets API. What visitors submit goes straight into a Google Sheet owned by the Growtrics team, so there is no database to host and the team in Singapore manages the data in a tool they already know.

Static generation and deployment on Vercel

• Page speed. The site uses Next.js 16 static generation. Every page is compiled to a static file at build time, so pages respond quickly.
• Automatic deploys on Vercel. When content is published from TinaCMS or the code changes, Vercel builds and ships the new version to its global CDN.

Outcome

Growtrics pairs modern rendering (Next.js 16 and GSAP) with a lean data setup (TinaCMS and the Google Sheets API). The EdTech startup got a complete website with low running costs. Moving from design to production followed the way Perxel works with designers.