I made a fullstack application using Next.js and MongoDB for a frontend assessment

This application was part of an assessement I took for a Frontend developer position for a brazilian company and was developed in 36 hours under a 5 days deadline. It was a good opportunity to show some of the skills I have learned so far, and to have a feedback from another perspective, which helped me to improve them even further. The company was happy with my approach and offered me a role as Junior Fullstack Developer.

Live demo: https://hairplace.vercel.app/

The case

The scenario given was: You work on the development team of a software house and have been assigned to a scheduling system project for a hairdressers' network. Your role is to develop:

• A login page

• A user page. For this one, include the information with the types of information that you, as a customer, would like to see. Don't forget to include buttons call to action that direct the user to schedule a new visit to the hairdresser.

• One or more agenda pages with a calendar that will be used by employees to schedule in different units of the network and validate data from clients.

• All pages must be responsive

• The pages do not need to be integrated with any system and do not need to actually schedule, log in or pull real customer data, but the storage of data in any model is important for us to validate the business rules developed for the solution. At this point, the quality of the code, good UX practices when structuring the page, creativity for flows and data listed in the portal will be evaluated.

• The application must be developed in some front-end framework and can use any libraries that help in the development of the page. After the end of the project, the candidate must publish the solution in a GIT repository.

Key points

• Integrations with APIs of any nature, which enhance the solution
• Quality of page design
• Internal documentation and organized code structuring (no need external documentation). During the presentation of the developed solution, the following will be evaluated: communication, structuring of ideas, power of argument and, again, creativity.

How this assessment was approached

My approach for this assessment was using MongoDB and Next.js. For the login page I used NextAuth, which connects to MongoDB collection and checks if there is a existing user in the database. If yes, it proceeds to dashboard screen, and if not, it sends the user to a register page.

In the register page it will use a POST HTTP request to send email, name and password and save it to MongoDB selected collection (user or hairdresser). After successful registering, it will redirect the user to the login page. When logging in, you have the option to choose between user and hairdresser and it will redirect to different type of dashboard. For the assessment only the user dashboard was developed.

For scheduling I have created a simple array using plain Javascript/Typescript that checks the current date, and from that, it populates it with data, enabling or disabling actions based on day/time. The result was a Date data returned from the user interaction, that would be sent to database which and create a confirm dialog for hairdressers dashboard (TBD).

Since I decided to focus on UI, some of the implementantions from the backend were not completed until the deadline, but for the time given and the feedback received it was more than enough to pass the assessment and land the role.

Techs used

• Typescript
• React.js
• Next.js
• styled-components
• MongoDB

Contact

• Twitter
• LinkedIn
• codearis@icloud.com