Notifications Page : Frontend Mentor Challenge

🧠 Project Overview

This project is a Frontend Mentor challenge focused on creating a user notifications page with a clear, modern, and user-friendly interface. The goal is to faithfully reproduce the provided Figma design while strictly adhering to modern web development best practices.

The application features a structured layout for notifications, including read/unread statuses, visual indicators, and interactive elements that enhance usability and clarity. Emphasis is placed on responsive design, consistent spacing, and accessible UI components to ensure a smooth experience across various screens and devices.

This project serves as an introduction to frontend best practices using Vue.js and Tailwind CSS, helping the developer understand component-based architecture, reactive state management, and utility-first styling. JavaScript logic is used to handle user interactions, such as marking notifications as read and dynamically updating the interface.

✨ Key Highlights

• 🚀 Functionality: Display user notifications with read/unread status

• 🖥️ Frontend: Vue.js, responsive UI

• 🎨 Styling: Tailwind CSS, utility-first design

• 💡 Skills Demonstrated: Component-based architecture, reactive state, interactive UI

🛠️ Tech Stack

• 🌐 Frontend: Vue.js

• 🎨 Styling: Tailwind CSS

• ⚙️ Interactivity: JavaScript, reactive state management