A professional, accessible notifications management system built with React and Vite. This project started as a class assignment and evolved into a fully-featured application with bulk operations, advanced filtering, data persistence, and WCAG-compliant accessibility.
This notifications dashboard demonstrates advanced React patterns and professional UI/UX principles. What began as a simple assignment to display and clear notifications has been transformed into a comprehensive notification management system suitable for real-world applications.
- ✅ Bulk Operations: Multi-select, select all, bulk delete, bulk mark as read
- ✅ Advanced Filtering: Filter by category, priority, read/unread status
- ✅ Search Functionality: Real-time search across all notification fields
- ✅ Data Persistence: LocalStorage integration saves state between sessions
- ✅ WCAG 2.1 AA Compliance: Accessible color palette, keyboard navigation, screen reader support
- ✅ Professional UI: Modern design with proper spacing, typography, and feedback
- ✅ Display all notifications with sender name and message
- ✅ Show notification count
- ✅ Clear individual notifications
- ✅ Clear all notifications at once
- ✅ Use
childrenprop appropriately - ✅ Responsive design
View Live Application on Vercel
- React 18 with functional components and hooks
- Vite for fast development and builds
- CSS3 with CSS Variables for theming
- LocalStorage API for data persistence
- WCAG 2.1 AA compliant design system