During the technical exam, I had a great experience showcasing my skills with Nuxt.js. As a fluent user of the composition API, I found it easy to work with the option API as well, with just a few minor adjustments. The mockup provided was incredibly helpful, especially when using Figma's inspect feature. I divided the mockup into sections and created components such as Product, Cart, Filter, and Hero Section.
Demo https://voxel-store-trin.vercel.app/
Github https://github.com/trinly01/VoxelStore
One aspect I particularly enjoyed was developing the Cart System, where I utilized local storage and added an additional feature for quantity if a buyer added the same item multiple times. I'm very familiar with array manipulation and often use filter, map, and reduce to solve problems related to arrays and loops.
To ensure a responsive user interface, I once again relied on the mockup for time efficiency. I incorporated Vuetify to speed up development, utilizing some of its classes and components. However, I still needed to modify the styles through SCSS.
Working with SCSS was another enjoyable aspect of the exam. Although I don't typically use SCSS, I was happy to have learned it and grasped it easily. I made use of variables, nesting, mixins, operators, placeholder selectors, control directives, and functions. For example:
Variables:
$primary-color: #ff0000;
Nesting:
.container {
.content {
color: #000000;
}
}
Mixins:
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
Operators:
.container {
width: 100% - 20px;
}
Placeholder selectors:
%button-style {
background-color: #00ff00;
color: #ffffff;
}
.button {
@extend %button-style;
}
Control directives:
.container {
@if $is-large {
font-size: 20px;
} @else {
font-size: 16px;
}
}
Functions:
$font-size: 16px;
.container {
font-size: calc(#{$font-size} + 2px);
}
Regarding SEO, the head() function in Nuxt.js made it straightforward to set the title, description, and image for social media. I even included a rating meta tag dynamically by retrieving the title and description of the top three products.
During the exam, I encountered an error while deploying to Vercel. It took me three hours to solve the problem, as there was no documentation or answer available online. However, I managed to fix it by installing a package required by Vercel. Despite the time spent, the satisfaction of resolving the issue made it worthwhile.
Lastly, I thoroughly enjoyed learning about the Nuxt.js lifecycle, especially the asyncData method, which proved to be very helpful for server-side rendering (SSR).
I showcased my expertise with Nuxt.js, my adaptability with both the composition and option APIs, my proficiency in solving array-related problems, my ability to create responsive UI using Vuetify, my newly acquired SCSS skills, and my attention to SEO details. Furthermore, I demonstrated my problem-solving abilities by successfully resolving an undocumented deployment issue. Overall, I strived to leave a lasting impression during the technical exam.
Top comments (0)