AI Development
Jun 11, 2025
12 min read
201 views

Building a Full-Stack Notification System Foundation in 10 Minutes with AI

Watch how Claude Sonnet 4 in Cursor helped build a complete notification system foundation - AWS SNS, database notifications, real-time UI, and admin settings - in just 10 minutes. This isn't about perfect code, it's about creating solid foundations that set up successful refinement prompts.

Building a Full-Stack Notification System Foundation in 10 Minutes with AI

Share this post

Sometimes the best way to build complex features is to just start coding and let the solution emerge. Recently, I needed to add a comprehensive notification system to a Laravel app - SMS alerts via AWS SNS, database notifications, real-time UI updates, and admin settings. Instead of spending hours planning, I decided to vibe code it with Claude Sonnet 4 in Cursor. The result? A solid foundation built in about 10 minutes that sets the stage for quick refinement prompts.

This post shows the actual development process, including the original prompt, real-time code review techniques, and how AI assistance creates a solid foundation for rapid full-stack development.

The Foundation Mindset

Before diving into the implementation details, it's important to understand the mindset that makes this approach so effective. This isn't about building perfect code in one pass - it's about creating a solid foundation that gives us confidence in the approach, then iterating with focused prompts to reach production quality.

Phase 1: Foundation

  • • Get all the pieces in place
  • • Establish the architecture
  • • Create working examples
  • • Validate the approach

Phase 2: Refinement

  • • Polish the user interface
  • • Add error handling
  • • Optimize performance
  • • Enhance security

This separation of concerns allows for rapid experimentation without getting bogged down in perfectionism. Now let's see how this played out in practice.

The Original Prompt

Here's exactly how I started this entire feature - with one comprehensive prompt to Claude Sonnet 4 in Cursor:

🤖 The Complete Original Prompt:

"I'd like to set up a Laravel notification channel for contact requests, so that anytime a new contact request is submitted, a notification is triggered, saved to the database, and an SMS message is sent via Amazon SNS. We'll need to configure AWS and SNS to work with this.

I also want a notification system in the admin dashboard, where I can see new notifications via a bell icon with a badge showing the unread notification count in the navigation bar. When I view a notification, it should be marked as read.

Additionally, I want a notification settings area within the profile settings section of the admin dashboard. This will allow us to store notification preferences as well as the phone number that SMS alerts should be sent to when new contact requests come in. We'll use this profile settings area for other features in the future.

So phase 1: Setup a notification system and channel for sending SMS messages via AWS SNS service whenever there is a new contact form request.

Phase 2: Setup a notification dashboard area for viewing notifications.

Phase 3: Setup a profile settings area in the admin dashboard.

Phase 4: Setup a notification settings area within the profile settings page."

Real-Time Code Review with Git Status

One of the most powerful aspects of AI-assisted development is the ability to do real-time code review. While Claude was generating code, I continuously ran git status and git diff to see exactly what was being created and modified.

The Real-Time Review Process

Like pair programming: It felt like standing over the shoulder of another engineer while they thought through the problem
Immediate feedback: I could see each file being created and catch any issues instantly
High confidence: By the time the AI finished (less than 5 minutes), I had already reviewed everything
Proactive quality control: No surprises - I knew exactly what was being built as it happened
# My workflow during AI generation
git status  # See what files are being created/modified
git diff    # Review the actual changes being made
git add -A && git commit -m "AI generated notification foundation"

# This gave me confidence that the code was accurate and expected

The Challenge: Multi-Channel Notifications

The requirement seemed straightforward: "Send me notifications when someone fills out the contact form." But as I started thinking about it, the scope expanded naturally:

  • SMS notifications via AWS SNS for immediate alerts
  • Database notifications for audit trail and admin dashboard
  • Real-time UI with notification bell and badge
  • Admin settings to configure notification preferences
  • Queue processing for performance
  • Proper error handling and fallbacks

In traditional development, this would require extensive planning, architecture diagrams, and careful coordination between frontend and backend. But with AI assistance, I could explore and build iteratively.

Phase 1: The Foundation (AWS SNS Integration)

I started with the most uncertain part - AWS SNS integration. My initial prompt was simple:

🤖 Initial Prompt:

"I'd like to setup a laravel notification channel for contact requests, that anytime a new contract request happens, a notification is triggered and saved to the database and also sends an SMS message through Amazon SNS."

The AI immediately understood the scope and suggested a structured approach. Within minutes, I had:

# AWS SDK installation
./vendor/bin/sail composer require aws/aws-sdk-php

# Custom SNS channel creation
./vendor/bin/sail artisan make:notification NewContactRequest

The Custom SNS Channel

The AI helped me create a custom notification channel that handles SMS sending:

<?php
// app/Channels/SnsChannel.php
namespace App\Channels;

use Aws\Sns\SnsClient;
use Illuminate\Notifications\Notification;

class SnsChannel
{
    protected $sns;

    public function __construct()
    {
        $this->sns = new SnsClient([
            'version' => config('services.sns.version'),
            'region' => config('services.sns.region'),
            'credentials' => [
                'key' => config('services.sns.key'),
                'secret' => config('services.sns.secret'),
            ],
        ]);
    }

    public function send($notifiable, Notification $notification)
    {
        $message = $notification->toSns($notifiable);
        
        if (!$message) return;

        return $this->sns->publish([
            'PhoneNumber' => $message['phone'],
            'Message' => $message['message'],
            'MessageAttributes' => [
                'AWS.SNS.SMS.SMSType' => [
                    'DataType' => 'String',
                    'StringValue' => 'Transactional'
                ]
            ]
        ]);
    }
}

💡 Discovery:

The AI suggested adding proper error handling and logging from the start, which saved debugging time later. It also recommended using Laravel's service configuration pattern for AWS credentials.

Phase 2: Database Notifications & Queue Processing

Next challenge: making notifications persistent and handling the queue processing. The AI guided me through Laravel's notification system:

# Create notifications table
./vendor/bin/sail artisan notifications:table
./vendor/bin/sail artisan migrate

# Add notification settings to users
./vendor/bin/sail artisan make:migration add_notification_settings_to_users_table

The Notification Class

The AI helped me design a notification that works with both database and SMS channels:

<?php
// app/Notifications/NewContactRequest.php
class NewContactRequest extends Notification implements ShouldQueue
{
    use Queueable;
    
    protected $contactRequestData;

    public function __construct(ContactRequest $contactRequest)
    {
        // Store data instead of model to avoid serialization issues
        $this->contactRequestData = [
            'id' => $contactRequest->id,
            'name' => $contactRequest->name,
            'email' => $contactRequest->email,
            'company' => $contactRequest->company,
            'service_type_display' => $contactRequest->service_type_display,
        ];
    }

    public function via(object $notifiable): array
    {
        $channels = ['database'];
        
        if ($notifiable->notification_phone) {
            $channels[] = SnsChannel::class;
        }
        
        return $channels;
    }

    public function toSns(object $notifiable): array
    {
        $message = "🔔 New Contact Request\n\n";
        $message .= "From: {$this->contactRequestData['name']}\n";
        $message .= "Email: {$this->contactRequestData['email']}\n";
        
        if ($this->contactRequestData['company']) {
            $message .= "Company: {$this->contactRequestData['company']}\n";
        }
        
        return [
            'phone' => $notifiable->notification_phone,
            'message' => $message,
        ];
    }
}

⚠️ AI Self-Testing & Correction:

Fascinating to watch: the AI initially stored the entire ContactRequest model in the notification, then tested its own code and discovered this would cause serialization issues when the model was deleted before queue processing. It immediately corrected itself to store just the data needed - a common mistake I would have easily made myself. The AI essentially debugged and improved its own solution in real-time.

Phase 3: Real-Time UI Components

Now for the frontend magic. I wanted a notification bell with badge, dropdown, and real-time updates. My prompt:

🎨 UI Prompt:

"I want a notification bell icon with a badge for the new notification count in the nav bar. When I view a notification, it marks it as read. I want real-time updates."

The AI suggested a complete solution with AJAX polling and modern UI patterns:

Navigation Bell Component

<!-- Notification Bell in Navigation -->
<div class="relative ml-4">
    <button id="notificationBell" class="relative p-2 text-gray-500 hover:text-gray-700">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M15 17h5l-5 5v-5z M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
        </svg>
        <span id="notificationBadge" class="hidden absolute -top-1 -right-1 bg-red-600 text-white rounded-full px-2 py-1 text-xs">
            0
        </span>
    </button>
    
    <div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg border">
        <!-- Dropdown content -->
    </div>
</div>

Real-Time JavaScript

The AI provided a complete JavaScript solution with polling and AJAX updates:

// Real-time notification polling
function pollNotifications() {
    fetch('/manage/notifications/unread-count')
        .then(response => response.json())
        .then(data => updateNotificationBadge(data.count))
        .catch(error => console.error('Error:', error));
}

function loadNotifications() {
    fetch('/manage/notifications/recent')
        .then(response => response.json())
        .then(data => {
            updateNotificationList(data.notifications);
            updateNotificationBadge(data.unread_count);
        });
}

// Poll every 30 seconds
setInterval(pollNotifications, 30000);

Phase 4: Admin Dashboard Integration

The system needed proper admin interfaces. The AI suggested a complete admin experience:

Notification Management

  • • Full notification index page
  • • Mark as read/unread functionality
  • • Delete notifications
  • • Pagination and filtering

Profile Settings

  • • Phone number configuration
  • • SMS/email toggle switches
  • • Notification type preferences
  • • Master notification switch

Profile Settings Interface

The AI designed a tabbed interface for comprehensive settings management:

<?php
// Profile Settings Controller
public function updateNotificationSettings(Request $request)
{
    $validated = $request->validate([
        'notification_phone' => 'nullable|string|max:255',
        'notifications_enabled' => 'boolean',
        'sms_notifications' => 'boolean',
        'email_notifications' => 'boolean',
        'notification_settings' => 'nullable|array',
    ]);

    // Handle checkbox states properly
    $validated['notifications_enabled'] = $request->has('notifications_enabled');
    $validated['sms_notifications'] = $request->has('sms_notifications');
    
    Auth::user()->update($validated);
    
    return redirect()->back()->with('success', 'Settings updated!');
}

The File Structure That Emerged

Here's what the AI helped me create across the entire application stack:

Files Created/Modified (23 total)

Backend Infrastructure:
├── app/Channels/SnsChannel.php                           # Custom SMS channel
├── app/Notifications/NewContactRequest.php               # Notification class
├── app/Console/Commands/TestNotification.php             # Testing command
├── config/services.php                                   # AWS configuration
└── database/migrations/
    ├── add_notification_settings_to_users_table.php      # User settings
    └── create_notifications_table.php                    # Notification storage

Controllers & Logic:
├── app/Http/Controllers/ContactController.php            # Trigger notifications
├── app/Http/Controllers/Admin/NotificationController.php # Admin management
├── app/Http/Controllers/Admin/ProfileSettingsController.php # Settings
├── app/Http/Controllers/Admin/DashboardController.php    # Dashboard stats
└── app/Models/User.php                                   # User model updates

Frontend & Views:
├── resources/views/layouts/app.blade.php                 # Navigation bell
├── resources/views/admin/notifications/index.blade.php   # Notification list
├── resources/views/admin/profile/index.blade.php         # Settings page
├── resources/views/admin/dashboard.blade.php             # Dashboard updates
└── routes/web.php                                        # All new routes

Documentation:
└── NOTIFICATION_SETUP.md                                # Complete setup guide

Testing the Complete System

The AI even helped me create a comprehensive testing command:

# Test the complete flow
./vendor/bin/sail artisan test:notification --phone="+1234567890"

# Process the queue
./vendor/bin/sail artisan queue:work --once

# Check results
./vendor/bin/sail artisan tinker --execute="echo 'Notifications: ' . \App\Models\User::first()->notifications()->count();"

✅ End Result:

A comprehensive notification system foundation with SMS, database storage, real-time UI, admin management, and settings structure - all built in a single focused session through iterative AI-assisted development. Nearly production-ready with just minor refinements needed.

Why This Approach Works

This notification system would typically take an experienced developer 2-3 days to plan, architect, and implement properly. With AI-assisted vibe coding, it was completed in a few hours. Here's why this approach is so effective:

Rapid Iteration

AI removes the friction of syntax and boilerplate, letting you focus on the logic and user experience.

Pattern Discovery

AI suggests best practices and patterns you might not know, improving code quality as you build.

Full-Stack Thinking

AI helps you consider the entire system - from infrastructure to UI - without getting overwhelmed.

The Safety Net Strategy

Throughout this process, I committed frequently with descriptive messages:

git commit -m "Phase 1: AWS SNS integration working"
git commit -m "Phase 2: Database notifications and queue processing"  
git commit -m "Phase 3: Real-time UI with notification bell"
git commit -m "Phase 4: Complete admin dashboard integration"

This gave me the confidence to experiment boldly, knowing I could always roll back to a working state.

Lessons for Your Next Vibe Coding Session

Key Takeaways

  • Start with the hardest part: I began with AWS SNS integration because it was the most uncertain. Getting that working early gave confidence for the rest.
  • Let the AI suggest architecture: Instead of over-planning, I described what I wanted and let the AI suggest implementation patterns.
  • Commit frequently: Small, frequent commits with descriptive messages create safe experimentation points.
  • Test as you build: The AI helped create testing commands that verified each phase worked correctly.
  • Document discoveries: I captured the complete setup process in a README for future reference.

The Reality: Foundation vs Production-Ready

Let's be clear about what we accomplished: this isn't production-ready code, but it's an excellent foundation that sets up the next phase of refinement prompts. The AI created a working system that demonstrates all the key concepts and provides a solid base for iteration.

What We Have vs What's Next

✅ Foundation Complete
  • • AWS SNS integration working
  • • Database notifications storing
  • • Basic UI components in place
  • • Admin settings structure
  • • Queue processing functional
🔧 Refinement Needed
  • • UI polish and responsiveness
  • • Error handling edge cases
  • • Performance optimizations
  • • Security hardening
  • • Comprehensive testing

The Time Reality Check

Here's an honest comparison of development timelines for this notification system:

Traditional Senior Engineer

Planning & Research: 1-2 hours
AWS SNS Setup: 1-2 hours
Backend Implementation: 3-4 hours
Frontend Development: 2-3 hours
Testing & Debugging: 1-2 hours

Total: 8-12 hours
For a senior engineer familiar with all the technologies involved

AI-Assisted Development

Foundation Generation: 10 minutes
Real-time Review: 5 minutes
Testing & Validation: 5 minutes
Refinement to Nearly Production-Ready: 15-20 minutes
Blog Post Creation: 5-10 minutes

Total: ~30 minutes
Including documentation and blog post

The 20x Speed Multiplier

The AI didn't just speed up the coding - it eliminated the research phase, suggested architectural patterns, and provided working examples across the entire stack simultaneously.

Even accounting for refinement time, we're looking at roughly 20x faster development for complex full-stack features.

When to Use This Approach

Vibe coding with AI assistance works best for:

  • MVP features where speed matters more than perfect architecture
  • Exploratory development when you're not sure of the best approach
  • Learning new technologies like AWS services or new Laravel features
  • Full-stack features that touch multiple layers of the application
  • Prototyping to validate ideas quickly

It's not ideal for mission-critical systems that need extensive planning, or when you're working with a large team that needs detailed specifications.

Try It Yourself

Next time you need to build a moderately complex feature, try the AI-assisted foundation approach:

  1. Start with a comprehensive, high-level prompt describing the entire feature
  2. Use git status and git diff for real-time code review
  3. Let the AI build the complete foundation across all layers
  4. Commit frequently with descriptive messages
  5. Test the foundation to ensure core functionality works
  6. Use follow-up prompts to refine and polish for production

The Meta Achievement

Not only did we build a notification system foundation in 10 minutes, but this entire blog post was also created using AI assistance in another 5-10 minutes.

The AI analyzed our development process, extracted the key insights, and formatted them into educational content - demonstrating how AI can help with both building and documenting your work.

You might be surprised at how solid a foundation you can create in just a few minutes. The key is thinking of AI-assisted development as a two-phase process: rapid foundation building, followed by targeted refinement prompts.

Ready to Build Your Foundation?

Pick a feature you've been putting off because it seems complex. Write one comprehensive prompt describing the entire system, then watch as AI creates a working foundation in minutes.

Remember: the goal isn't perfect code on the first try - it's a solid foundation that proves the concept and sets up successful refinement. You'll be amazed at what emerges when you trust the process.

Chris Page

Chris Page

Fractional CTO and Software Engineer with 25+ years of experience. I help startups scale from 0 to 7 figures using AI-assisted development and proven frameworks.

Related Posts

Continue reading

Ready to Scale Your Startup?

Let's discuss how I can help you build your MVP or optimize your existing technology stack.