As one of the challenges of the internship selection process, I was asked to program a one-page website that was faithful to the Figma provided. The choice of programming languages and framework was free and I chose to develop it using Next.js.
When clicking on any of the stars, it and the stars on the left side of it are filled and the stars on the right side are or remain empty. (For example, if the user clicks on the third star, the first 3 stars are filled and the last 2 are empty.) The "confirm" button is also enabled. In the Figma prototype it is possible to see the simulation of this behavior.
Fidelity to the layout/behavior of the prototype and code organization will be evaluated.
To run it, follow the following steps:
- Install
node modules; - Clone the repository to your machine. You may do so with the command
git clone https://github.com/Alexaandrepaiva/TutorMundi; - Run the command
npm run dev; - In the browser of your preference, open the indicated localhost port in your browser. It may be, for example,
localhost:3000
As an alternative option, you may check the solution at this link