GurucoolThe social network your parents would approve of.
An edtech network where local educators get their own digital classroom and learners find them, in eight Indian languages, on a ₹7,000 phone.
- Role
- Founding front-end engineer
- Timeline
- Mar 2020 → Jan 2021 · founding team
- Team
- 3 founders · 2 engineers
- Focus
- Founding front-end engineer for an edtech network with 25+ tools and courses in eight languages
- Live
- gurucool.xyz
- Stack
- Next.js·React·Redux·React Query·Tailwind CSS·REST·Figma
- courses on the platformIN 8 REGIONAL LANGUAGES
- 3,000+
- tools for educators & learners
- 25+
- pre-seed raisedON THE PRODUCT THE SITE DEMOED
- $150k
- front-end engineer at the startTHAT WAS ME
- 1
A design, a deadline, and no front-end engineer.
Gurucool started in 2019 with a blunt observation from three Jamia graduates: most students in India learn from a teacher within five kilometres, and none of that happens online. The big edtech apps sold Hindi and English courses to the top of the pyramid. Everyone else got WhatsApp groups and photocopies.
The product had to be a network, not a course store: educators and institutes needed their own digital infrastructure, learners needed to find and follow them, and the whole thing had to work in Bengali, Tamil or Marathi on a ₹7,000 phone.
In March 2020 there was a design, a backend taking shape, an investor deadline, and no front-end engineer.
Every one of these needed a screen, and most of them shared parts.
- Teach ProEDUCATORS
- ClassroomLIVE
- AssessmentTESTS
- Content PoolLIBRARY
- PadhaaiLEARNER APP
- Courseflix3,000+ COURSES
- AskEdQ&A
- Study HelpSUPPORT
- Test SeriesPRACTICE
- EduverseFEED
- Campus 360INSTITUTES
- EventsCOMMUNITY
- WorkshopsSKILLS
- PlacementsCAREERS
- FundingSCHOLARSHIPS
- Book MarketEXCHANGE
- CommonalityMATCHING
- Cool CoinREWARDS
- CafeSOCIAL
- BITSSHORTS
- Doubt sessionsLIVE
- LeaderboardsTESTS
- Institute pagesTENANCY
- Fee collectionPAYMENTS
- NotificationsPUSH
First front-end engineer, from empty repo to funded product.
I was the first front-end hire. I built the web app and its modules in Next.js, React, Redux and Tailwind from an empty repo: the marketing site, the app shell, the institute workspace, classroom and assessment surfaces, and the component library everything else was assembled from.
I converted the founders' pixel-perfect designs into responsive JSX, wired REST APIs with React Query and Axios while the backend was still moving, and shipped the investor-facing site before the deadline. The round followed.
Web
- Next.js + React
- Redux for app state
- Tailwind CSS, Poppins type system
- Pixel-perfect from Figma
Data layer
- REST APIs via React Query and Axios
- Optimistic updates and caching
- Typed contracts with a moving backend
- Mock adapters for unshipped endpoints
Product
- Institute workspaces (Teach Pro)
- Classroom and assessment UIs
- Eduverse feed, AskEd
- Padhaai learner app surfaces
Quality
- Reusable component library
- Responsive down to ₹7,000 phones
- Eight scripts in one layout system
- Lighthouse budgets on the marketing site
A component library at the centre, modules around it.
A Next.js app with a shared component library at its centre. Feature modules (Teach Pro, Classroom, Assessment, Eduverse, AskEd) compose the same primitives; a React Query data layer sits between them and a REST backend that changed weekly; Redux holds cross-cutting app state. Everything is mobile-first because most learners never opened a laptop.
Figma tokens
- colour
- type
- spacing
- radius
- elevation
Component library · 40+
- Button
- Input
- Select
- Card
- Tabs
- Modal
- Table
- Feed
- Avatar
- Badge
- Toast
- Stepper
- Calendar
- Chart
- Upload
- Empty state
Modules
- 01
Shell
- Next.js pages and layouts
- Auth and role gates
- Marketing site + app
- Hindi and English UI
- 02
Component library
- 40+ reusable components
- Tokens from the Figma system
- Forms, tables, cards, feeds
- Documented usage per component
- 03
Data layer
- React Query caching and retries
- Axios adapters per API
- Optimistic updates
- Mocks for unshipped endpoints
- 04
Modules
- Teach Pro workspace
- Classroom (live on Jitsi)
- Assessment engine UI
- Eduverse feed, AskEd Q&A
- 05
Quality
- Responsive from 320px
- Script-aware typography
- Performance budgets
- Cross-device QA on real phones
Deadlines, moving APIs, eight scripts, cheap phones.
- CHALLENGE 01
Pixel-perfect under a fundraising deadline
Investors were going to see the site before they saw the deck. It had to match the design to the pixel, and it had to be done in weeks.
Instead of building screens, I built the system first: tokens lifted from the Figma file, a component library of buttons, cards, forms, tabs and feeds, and page templates that composed them. Screens then went fast and stayed consistent. The site shipped ahead of the deadline and the founders used it to close the pre-seed.
- CHALLENGE 02
A front end for a backend that kept moving
Endpoints changed weekly. The UI could not wait for them to settle.
React Query gave every screen caching, retries and loading states for free; Axios adapters isolated each API so a contract change touched one file; mock adapters let me build against endpoints that did not exist yet. When the backend landed, swapping a mock for the real adapter was a one-line change.
- CHALLENGE 03
Eight scripts, one layout system
Bengali, Tamil and Malayalam strings are longer and taller than English, and they break layouts built for Latin.
Components were built with content-length variance in mind: no fixed heights on text containers, truncation rules per component, script-aware line heights, and font subsets loaded per script so the first paint stayed fast on cheap phones. Every component was tested with the longest string from the content pool.
- CHALLENGE 04
Mobile first, literally
Most learners were on Android phones under ₹10,000 on prepaid data.
Performance budgets on the marketing site, code splitting per module, responsive images, and a layout system that started at 320px and grew up rather than shrinking down. QA happened on the phones our users actually had, not in a desktop emulator.
Most learners were on Android phones under ₹10,000 on prepaid data. The layout system started at 320px and grew up; images were responsive; every module was code-split; QA happened on the phones users actually owned.
The shell, the library, the modules, the data layer.
- 01
Marketing site and app shell
The investor-facing site and the authenticated app in Next.js, with role gates and Hindi/English UI.
- 02
Component library
40+ reusable components from the Figma system, the foundation the product kept growing on after I left.
- 03
Institute workspace UI (Teach Pro)
Onboarding, courses, batches, schedules and content screens for schools, colleges and coaching centres.
- 04
Classroom and assessment surfaces
Live class UI around embedded Jitsi, quiz and test-series screens with instant feedback.
- 05
Community
Eduverse feed and AskEd Q&A with optimistic updates and infinite scroll.
- 06
Data layer
React Query + Axios adapters with mocks, so the UI never waited for the backend.
Mobile-first: where most learners are MOBILE-FIRST: WHERE MOST LEARNERS ARE 
The tool catalogue: Teach Pro, Classroom, Assessment, AskEd and more THE TOOL CATALOGUE: TEACH PRO, CLASSROOM, ASSESSMENT, ASKED AND MORE 
Padhaai, the free learner app PADHAAI, THE FREE LEARNER APP 
Tools on a phone TOOLS ON A PHONE
Shipped before the deadline, funded after it, still growing on the library.
The site and app I built are what the founders demoed to raise the pre-seed, and the component library is what the team kept shipping on. Gurucool went on to 3,000+ courses in eight languages and a state education pilot.
- Investor-facing site delivered ahead of deadline; $150k pre-seed from Zulie Venture and FreeFlow Venture Builders followed
- Component library of 40+ pieces reused across every later module
- Responsive from 320px on the phones learners actually owned
- React Query data layer kept the UI shipping while the backend changed weekly
- Platform grew to 3,000+ courses in eight regional languages and a Bihar higher-education pilot
“Delivered the pixel-perfect website before the deadline and helped the organisation impress investors.”FROM THE ROLE DESCRIPTION, GURUCOOL