Single page application comprising of two different personality tests:
See the app live and find out your own score here.
- Upgraded Next v9.4.4 to v14.0.3, and upgraded from vanilla JS to Typescript + TailwindCSS.
- New design, more delightful, fully responsive, and matching the brand's palette.
- Removed the heavy weight (overkill) Material UI library, in favor of creating a few custom components to replace those previously installed and imported. Most notably:
-
- An
AwesomeInputcomponent (😁), extending React'sinputcomponent with valid/invalid behavior, namely via neutral, valid, and invalid border colors, and an optional invalid message.
- An
-
- A styled
Button, with primary, secondary and tertiary colors, matching the brand's palette
- A styled
-
- A styled
Card, reused for descriptions and instructions throughout the site
- A styled
-
- A
Ratingcomponent, matching the brand's palette, to allow the user to score each question from the test.
- A
-
- The layout was significantly simplified by using Tailwind and CSS's flex capabilities, instead of using MUI's Grid and Table component trees.
- Complete UX redesign of the Actus MBTI test
-
- Better user name and email input validation (whereas before validation happened on submit, now the button to proceed is disabled until all requirements are met).
-
- All 40 questions are now divided in steps, with a sleek and fresh design that makes the experience more streamlined to the user.
-
- All progress in the test, and/or test results are stored locally to prevent losses due to network temporary malfunctions.
This project was engineered and TDDed by EnneagonStudios using a combination of:
- Next.js and TailwindCSS
- bootstrapped with
create-next-app - special thanks to [https://learntdd.in/next/] for their tutorial combining Cypress, Jest and the React Testing Library with Next.js.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.