A Successful Technical Exam Journey: Building a Responsive App from Scratch

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.