Frontend Mentor – Social Proof Section Solution

This is a solution to the Social proof section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.


The challenge

Users should be able to:

  • View the optimal layout for the section depending on their device’s screen size


Desktop View

My process

Built with

What I learned

I wanted to use Vue again for a long time and for this project I finally did.

Vue 3 is really cool with the setup script and TypeScrip, it feels more like Svelte and well that will always be awesome! I had to Google how props work and I also tried to find a way to define a default value but didn’t find a clear way so I had to use computed properties instead.

The devtools are also incredible! Didn’t know they were this amazing!

const finalAlt = computed(() => props.fullName + ' Profile');
const finalTitle = computed(() => props.title || 'Verified Buyer');

The reason that made me decide to try Vue again was UnoCSS. It is a fantastic tool for taking CSS to the next level! Just look at this!

  <div :class="transformClass" w-full ml-auto bg-magenta-100 rounded-lg lg="max-w-fit">
    <div p-4 flex flex-col items-center gap-3 lg="w-96" xl="w-108 flex-row justify-center gap-12">
      <div flex gap-3>
        <template v-for="index in finalAmount" :key="index">
          <img :src="iconStar" alt="" width="18" height="18" />
      <strong text="base magenta-700" font-semibold>
        <slot />

Continued development

Vue 3 with Composition API along with UnoCSS and the Devtools provide a fantastic developer experience that is really hard to resist. Definitely going to use Vue more in the future.