https://github.com/emre-guler/notificationcenter-case
This project implements a dynamic notification center feature for e-commerce websites. It provides a user-friendly interface to display recent product views and notifications to users.
https://github.com/emre-guler/notificationcenter-case
jquery pure-javascript
Last synced: about 2 months ago
JSON representation
This project implements a dynamic notification center feature for e-commerce websites. It provides a user-friendly interface to display recent product views and notifications to users.
- Host: GitHub
- URL: https://github.com/emre-guler/notificationcenter-case
- Owner: emre-guler
- License: apache-2.0
- Created: 2023-02-01T06:32:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-01T03:16:18.000Z (over 1 year ago)
- Last Synced: 2026-02-08T11:57:15.437Z (4 months ago)
- Topics: jquery, pure-javascript
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Notification Center Implementation
This project implements a dynamic notification center feature for e-commerce websites. It provides a user-friendly interface to display recent product views and notifications to users.
## Features
- Floating notification bell icon with smooth interactions
- Displays up to 3 most recently viewed products
- Persistent storage using localStorage
- Responsive design with modern UI
- Clean animations and transitions
- New product badges
## Technical Details
The implementation uses:
- Vanilla JavaScript
- jQuery 3.6.3
- CSS for styling and animations
- Browser's localStorage for data persistence
## Functionality
- Automatically tracks product views on product detail pages
- Stores last 3 viewed products
- Displays product information including:
- Product image
- Product title
- Product description
- "NEW" badge
- Toggle notification panel by clicking the bell icon
## Usage
1. Include the required jQuery dependency:
```html
```
2. Include the main.js file in your project
3. The notification center will automatically initialize on page load
## Storage
The notification center uses localStorage to persist viewed products. The storage key is 'notificationCenter' and stores an array of product objects containing:
- title
- description
- image
- productLink
## UI Components
- Small notification bell (🔔) that toggles to close button (❌) when panel is open
- Main notification panel with header "DISCOVER OUR DEALS"
- Product cards with images, titles, and descriptions
- Styled with a purple theme (#A34476)
## Notes
This was implemented as an interview case study demonstrating front-end development skills including:
- DOM manipulation
- State management
- UI/UX design
- Event handling
- Local storage usage