React Notion-Style Notification Inbox

A high-fidelity, minimalist notification inbox component for React, inspired by Notion's clean and functional design. It focuses on clarity, simplicity, and a smooth user experience, built with modern tools like TypeScript and Tailwind CSS.

---

A brief demo showing the component in both light and dark modes.

🚀 Live Demo

You can view and interact with a live demo of the component here:

➡️ View Live Demo

✨ Features

• Notion-Inspired UI/UX: Clean, minimal, and intuitive design.
• Light & Dark Mode: A sleek theme switcher that respects user preference and saves it to local storage.
• Real-time Notifications: Simulates a real-time feed with a subtle shake animation and sound effects for new notifications.
• Advanced Filtering: Filter notifications by status (unread, archived) or by type (mentions, updates, etc.).
• Bulk Actions: Enter "selection mode" to mark multiple notifications as read or archive them at once.
• Notification Grouping: Automatically groups notifications into logical time-based sections like "This Week" and "Last Week".
• Comprehensive Settings Panel: A separate view to mute notifications by brand or toggle different notification types on/off.
• Toast Notifications with Undo: Actions like marking as read or muting a brand trigger a non-intrusive toast message with an "Undo" option.
• Fully Responsive: Adapts beautifully to different screen sizes, from mobile to desktop.
• Zero Dependencies: Built purely with React, with no external utility libraries.
• Accessible: Implements ARIA attributes for better screen reader support.

🚀 Tech Stack

• React 19: For building the user interface.
• TypeScript: For static typing and improved developer experience.
• Tailwind CSS: For a utility-first CSS workflow and easy customization.
• Vite/esbuild: (Assumed for local development) For a fast and modern development environment.

🏁 Getting Started

Prerequisites

• Node.js (v18 or later)
• npm, yarn, or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/your-username/react-notion-inbox.git

2. Navigate to the project directory:

   cd react-notion-inbox

3. Install the dependencies (only React types, as dependencies are managed via import maps):

   npm install

Running Locally

Since this project uses modern browser features like import maps and is self-contained, you can run it with a simple local server.

1. Install live-server globally if you don't have it:

   npm install -g live-server

2. Start the server from the project root:

   live-server

Your browser will open automatically to the correct address.

🛠️ Project Structure

The project is organized into logical directories to keep the codebase clean and maintainable.

/
├── components/         # All React components
│   ├── icons/          # SVG icon components
│   ├── Notifications.tsx # Main component with state management
│   ├── NotificationList.tsx # Renders the list and controls
│   ├── NotificationItem.tsx # A single notification item
│   ├── NotificationSettings.tsx # Settings panel
│   └── ...
├── contexts/           # React context providers (e.g., ThemeContext)
├── hooks/              # Custom React hooks (e.g., useClickOutside)
├── services/           # Mock API service (notificationService.ts)
├── types.ts            # TypeScript type definitions
├── App.tsx             # Main application component
├── index.tsx           # Entry point of the React app
└── index.html          # The single HTML file

🔧 Customization

Connecting to a Real API

The notification data is currently mocked in src/services/notificationService.ts. To connect to a real backend:

1. Modify fetchNotifications: Update this function to make an authenticated API call to your backend endpoint that returns a list of notifications.
2. Implement Real-time Updates: Replace the subscribeToNotifications function with a WebSocket or Server-Sent Events (SSE) client to receive real-time updates from your server.
3. Update Actions: Modify functions like handleMarkAsRead, handleArchive, etc., in Notifications.tsx to send POST or PUT requests to your API instead of just updating local state.

Theming and Styling

The entire UI is built with Tailwind CSS. You can easily customize colors, fonts, spacing, and more by editing the tailwind.config object in index.html or by applying different Tailwind classes directly to the components.

The light/dark mode colors are configured using Tailwind's dark: variant. For example: bg-white dark:bg-zinc-800.

🤝 Contributing

Contributions are welcome! If you have a feature request, bug report, or want to improve the code, please follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature-name
3. Make your changes.
4. Commit your changes: git commit -m 'feat: Add some amazing feature'
5. Push to the branch: git push origin feature/your-feature-name
6. Open a Pull Request.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.