AI Education Product · Freelance
AI Detektor
A Swedish AI-text detection product for schools, designed around a focused analysis workspace, authenticated access, clear risk signals, and practical evidence for teacher-led review.
Role
Freelance Frontend Developer
Technology
01 / Overview
AI Detektor helps Swedish schools evaluate potentially AI-generated writing through a calm, task-focused interface. Teachers can paste text, test sample categories, upload a file, run detection, and use the resulting signal as supporting material for a conversation rather than as an automatic verdict.
02 / The challenge
AI detection is a sensitive workflow: the product must process large text inputs, communicate uncertainty responsibly, support authenticated users, and keep a technical analysis task understandable for teachers who may not be AI specialists.
03 / The solution
I worked on a restrained frontend experience centred on one primary analysis task. The interface keeps examples, input, upload, word count, and the detection action within one clear workspace, while typed integration connects the Next.js frontend to the Python analysis services and Clerk handles the account boundary.
04 / Techniques and where they were applied
Not only what was used, but where and why.
Technique
Single-task interaction hierarchy
Where it was applied
The hero and analysis panel lead users from context to sample selection, text entry, upload, and one primary Detect action without competing UI.
Technique
Typed Python API integration
Where it was applied
The Next.js frontend sends analysis requests to the Python services and presents loading, validation, and detection-result states through a stable frontend boundary.
Technique
Authentication boundary with Clerk
Where it was applied
Login and protected product access are separated from the public school-facing landing experience while keeping account entry visible in the main navigation.
Technique
Progressive input support
Where it was applied
Users can begin with example categories, paste their own text, or upload a file, reducing the effort required to understand and test the product.
Technique
Responsive product layout
Where it was applied
The explanatory content and analysis workspace rebalance across desktop and smaller screens while preserving the primary detection flow.
05 / Key features
The core capabilities built into AI Detektor.
Large text-analysis workspace with word-count feedback
AI, human, and mixed example-text modes
File-upload and direct text-entry flows
Authenticated access and account entry points
Swedish, school-focused product communication
Responsive landing and analysis experience
06 / Related insights
A deeper explanation of the engineering decisions behind this kind of product.
8 min read
How I Structure Scalable Frontend Applications
A practical approach to frontend architecture using feature ownership, typed boundaries, explicit async states, reusable UI foundations, and release-focused quality checks.
Read article7 min read
Building a Typed API Layer with TypeScript
How a reusable TypeScript API layer can separate transport details from product screens, unify errors, support pagination, and make React and React Native features easier to maintain.
Read article