This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
- Start at "/" home page where the introvert/extrovert questionnaire is shown to user(React)
- Data: Questions and options comes from SQlite database handled by Prisma ORM. The query is donde as GetStaticProps.
Also there we create a sessionId a to link user answer to result(after submitted) - The Questionnaire shows 5 questions with 4 choices each. All choices has a score(totally subjective)
- When the 5 questions are already responded the form let user to submit data.
- The data is sent through tRPC mutation
- In the backend tRPC endpoint "putAnswer" validate request body, and then calculate a total
score(linear interpolation) then we use Prisma to create a new Response mapped to user sessionId - MeanWhile the front-end waits for the mutation to return a
status === success, when that
happens it triggers the routing to /result page - At Result page ("/result"), sessionId saved on session storage is used to query database.
This is done via tRPC Query with React-Query useQuery hook and gets a Result This Results has a totalScore value (0-100) that we pass to a Gauge component that render a Gauge showing the value.
Test for home page run:
npm run test:e2e