01 / Modern frontend stackInspect code ↗
package.jsonDeclares Next.js 15, React 19, TypeScript-related tooling and the Prisma client dependency.
FULL-STACK / PUBLIC SOURCEPublic source · Code walkthrough
Interest & aptitude platform.
Next.js with Prisma.
A Next.js education application connecting an interactive questionnaire to a structured Prisma data model for users, schools, questions and results.
EVIDENCE TYPENext.js application prototype · Public code
TECHNOLOGYNext.js 15 · React 19 · TypeScript · Prisma
INSPECTED REVISION3575ad98d33f ↗ · 12 May 2025
INTERACTIVE PRODUCT EXPERIENCE / THREE ORIGINAL CAPTURES
Inspect the tested screens ↓A real answer changes the interface.
Rather than a static concept, this walkthrough shows the original React question components before and after an answer, plus their actual mobile layout. All questions used here are synthetic.
01 / INPUTRead a question
The original React component renders a choice scale.
02 / INTERACTIONAdvance the flow
Actual answer click updates progress to the next question.
03 / RESPONSIVEAdapt to mobile
390px mobile screen from the same tested component.
ORIGINAL REACT COMPONENTS10/10 local checks recordedInspect verification record ↗
BUILD SOMETHING SIMILARNext.js questionnaire or customer-facing workflow
Discuss this kind of project ↗
Questionnaires, responsive application screens and data-backed features. Start with one clearly scoped feature or milestone.
REAL REACT COMPONENTS / INTERACTION TESTED
Original source · Commit 3575ad98d33f
A questionnaire that responds.
Rendered from the original Next.js ClientTes and AnswerScale components. A local test-only page supplies four synthetic questions to verify the real selection and progression behavior.
01 / Initial question
02 / After clicking an answer
Mobile viewport · 390 px ↗
10/10Real browser component and interaction checks passed
Original Next.js app, synthetic question fixture, real answer click and verified mobile layout.
View verification record ↗The original components were tested locally using a temporary synthetic fixture. No real student database, student identity or backend submission was used.
The use case
An assessment tool must help people move through questions with clarity while keeping the underlying information organized. The interactive React flow is the part demonstrated in the local capture; the Next.js and Prisma source provides the broader application structure for users, schools, sessions and results.
Inside the build
Next.js loads question records through Prisma and renders an interactive React questionnaire. The data model defines users, schools, questions, sessions and scores, with middleware used for selected role-specific routes.
Question recordsReact questionnaire UIAnswer submission UIPrisma results model
Workflow overview based on the linked implementation.
Explore the implementation
Explore the checked Next.js, React and Prisma implementation. The pinned Git links show how the questionnaire and data model are organized.
02 / Relational data modelInspect code ↗
prisma/schema.prismaDefines User, School, Question, Session and Result models with relations and role definitions.
03 / Server-side question loadingInspect code ↗
app/tes/page.tsxReads question records through Prisma and provides them to the questionnaire component.
04 / Interactive questionnaireInspect code ↗
app/tes/ClientTes.tsxImplements a client-side question sequence, collects answers and sends a submission request to the application's API.
05 / Role-routing conceptInspect code ↗
middleware.tsImplements JWT-based route checks for selected teacher and administrator paths.
What the client gets from this engineering
- Designed application entities for users, institutions, questions and session results.
- Combined server-rendered question retrieval with client-side questionnaire interaction.
- Worked with a TypeScript/React application and a Prisma relational schema.
Current stage
Early-stage application prototype with public source. A deployable assessment product would require end-to-end submission testing, permission review and validation of the scoring method.