Frontend Mentor - Notifications page solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Setting up Project
  • Recommended IDE Setup
  • Project Scaffolding
    • Compile and Hot-Reload for Development
    • Compile and Minify for Production
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• Distinguish between "unread" and "read" notifications
• Select "Mark all as read" to toggle the visual state of the unread notifications and set the number of unread messages to zero
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: Github Repo
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vue - JS library
• Tailwind CSS - For styles

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

I learned how to successfully set up a Vue Project and use Props on Components as well as emits. I initially struggled with finding a way to ensure the number of unread notifications is reactive and responds to the click on the notifications.

Below are some of the most interesting part of the project.

function toggleAllRead() {
  notifications.value.forEach((value) => { value.read = true })
  return true
}

const number = computed(() => {
  const number = ref(notifications.value.filter((value) => { return value.read == false }).length)
  console.log(number.value)
  return number.value
})

<script setup>
defineProps({
    notification: {
        type: Object,
        required: true
    }
})
</script>

Continued development

I would definitely still improve utilising Vue for future projects and most importantly Tailwind CSS as it helps reduce time in writing CSS codes by almost 70%.

Useful resources

• Vue Js Documentation - This helped me in successfully setting up a Vue Project. I recommend going through their documentation to set up your vue project with Vite, especially if it's your first project or you're migrating from using the Vue CLI.
• Tailwind CSS Documentation - This is the documentation for tailwindcss. It helped me add the CSS Utility framework to my project and was very helpful in reducing the styles I wrote.

Setting up Project

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Project Scaffolding

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Author

• Frontend Mentor - @efewizzy
• Github - @efewizzy