A dynamic, interactive Vue.js application for designing, previewing, and managing customizable toast notifications with a focus on production-grade architecture.
Note: This project was created by me, with coding assistance from Cursor IDE. Learn more about this approach.
- Live Preview: Real-time feedback as you adjust settings.
- Dynamic Positioning: Supports 4 positions (Top-Left, Top-Right, Bottom-Left, Bottom-Right) with smart stacking logic.
- Auto-Dismiss: Configurable duration with a visual progress bar.
- Stacking Logic: Toasts appear above or below each other gracefully without overlapping.
- 🎨 Dark/Light Theme: Fully semantic SCSS + Tailwind implementation.
- ✨ 3 Animation Styles: Choose between Slide, Fade, and Bounce effects per toast.
- 💾 Presets System: Save, Load, and Delete your favorite configurations using LocalStorage.
- 📋 Code Export: One-click JSON export to copy the current config to the clipboard.
- ⏳ Visual Progress: Smooth CSS animation showing time remaining.
This project was built with a focus on scalability and clean code, avoiding "tutorial-style" shortcuts.
| Tech | Usage |
|---|---|
| Vue 3 | Composition API with <script setup> for clean logic. |
| TypeScript | Strict typing for Props, Store State, and Config objects (No any). |
| Pinia | Centralized state management for the Active Toasts array. |
| Tailwind + SCSS | Semantic design tokens (--bg-app, --text-primary) mapped to Tailwind config. |
| Jest | Unit testing for Components and Store logic. |
1. The "Invisible Overlay" Strategy
Instead of calculating absolute coordinates for every toast, the app uses a ToastContainer component with pointer-events-none. This overlay sits on top of the app and uses Flexbox to handle the "stacking" logic automatically for different screen corners.
2. Semantic Theming
Dark mode isn't just a switch. It uses a themes.scss file with CSS variables. Tailwind is configured to map bg-card to these variables, meaning components don't need messy dark:bg-gray-800 classes. They simply use bg-card, and the CSS variables handle the color swap.
3. Composable Logic
Features like Theme Toggling (useTheme) and Preset Management (usePresets) are extracted into Composables to keep the UI components "dumb" and testable.
src/
├── __mocks__/ # Jest Mock files (styleMock.js)
├── assets/
│ ├── main.css # Tailwind imports
│ └── themes.scss # Semantic CSS Variables (Light/Dark tokens)
├── components/
│ ├── __tests__/ # Jest Unit Tests (Component & Logic)
│ ├── AppHeader.vue # Application Header
│ ├── BaseButton.vue # Reusable Button Component
│ ├── BasePanel.vue # Reusable Card/Panel Component
│ ├── PresetManager.vue # Saved Presets UI (Load/Delete)
│ ├── ThemeToggle.vue # Dark Mode Switcher
│ ├── ToastBuilder.vue # Main Configuration Form
│ ├── ToastContainer.vue# Global Overlay (The "Manager")
│ ├── ToastNotification.vue # The visual Toast Card
│ └── ToastPreview.vue # Static preview component
├── composables/
│ ├── usePresets.ts # LocalStorage Logic
│ └── useTheme.ts # Dark Mode Logic
├── stores/
│ └── toast.ts # Pinia Store (Add/Remove/Timer Logic)
├── types.ts # Shared TypeScript Interfaces
├── shims-vue.d.ts # Vue Type Definitions for TS
├── App.vue # Root Component
└── main.ts # App Entry Point
- Node.js (v18+)
- npm or pnpm
# 1. Clone the repo
git clone https://github.com/ssamilg/toast-notification-builder.git
# 2. Install dependencies
npm install# Start the Vite development server
npm run dev# Run unit tests with Jest
npm run testThis project was developed by me, utilizing a hybrid AI workflow combining Gemini 2.0 and Cursor IDE (running Claude-4.5-Opus).
I created the application logic, made all architectural decisions (such as the Pinia state management flow and Semantic Theming strategy), and directed the implementation process while using Cursor as a coding tool to execute my specific directives.
As part of exploring AI-assisted development, I used this workflow to:
- Generate boilerplate code based on my specific instructions
- Create unit tests according to my specifications
- Draft documentation following my outlined structure
- Asset Generation: The project logo and favicon were created using the Nano Banana model.
I believe in transparent disclosure about AI tool usage in development. I maintained complete control over the application design, logic, and feature decisions, with these tools serving purely as assistants rather than autonomous agents.