A Laravel-based contact form application with Livewire, Alpine.js, and Tailwind CSS. Features include real-time form validation, spam protection, and an admin interface for viewing submissions.
- Interactive Contact Form: Real-time validation with Livewire
- Spam Protection: Honeypot and time-trap protection
- Admin Interface: View, search, and paginate submissions
- Responsive Design: Mobile-first design with Tailwind CSS
- Modern Stack: Laravel 12, Livewire 3, Alpine.js, Tailwind CSS 4.0
Before installing, ensure you have the following installed:
- Docker & Docker Compose: Latest version
- Git: For cloning the repository
git clone git@github.com:AnthonyLJ96/Developer-Exercise---Contact-Form-TALL-Stack.git
cd developer_exercise_contact_form# Copy environment file
cp .env.example .env
# Edit .env with the database credentials. In dev environment you can check the compose.yaml file
# The default Docker configuration should work out of the box# Start Docker containers
docker compose up -d
# Install PHP dependencies
docker compose exec app composer install
# Generate application key
docker compose exec app php artisan key:generate
# Install Node.js dependencies
docker compose exec app npm install
# Generate compiled js and css
docker compose exec app npm run build# Run database migrations
docker compose exec app php artisan migrate
# Run database migrations with seed data (includes 1000 test submissions)
docker compose exec app php artisan migrate --seed
# Or run seeders separately:
docker compose exec app php artisan db:seedFor testing email functionality, configure a free service like Mailtrap:
- Create free account at mailtrap.io
- Get credentials from your Mailtrap inbox
- Update .env file:
MAIL_USERNAME=your_mailtrap_username
MAIL_PASSWORD=your_mailtrap_password
Benefits: View all outgoing emails in Mailtrap dashboard without sending real emails during development.
Access the application:
- Contact Form: http://localhost (homepage)
- Admin Submissions: http://localhost/admin/submissions
- Database Adminer: http://localhost:8080
- Contact Form:
/ - Admin Submissions List:
/admin/submissions
- Real-time Validation: Livewire-powered form validation
- Spam Protection:
- Honeypot field (hidden from users)
- Time trap (prevents too-fast submissions)
- Minimum 5-second submission delay
- Success Feedback: Animated success message with Alpine.js
- Email Integration: Sends emails via configured mail driver
- Submissions List: Paginated table view (15 per page)
- Search: Filter by name, email, or subject
- Responsive: Horizontal scroll on mobile devices
- Server-side Processing: All filtering and pagination handled server-side
- Why: Latest LTS with improved performance and security
- Benefits: Robust foundation, excellent ecosystem, built-in security features
- Why: Enables reactive interfaces without complex JavaScript
- Benefits: Real-time form validation, server-side rendering, reduced complexity
- Why: Lightweight JavaScript framework for UI interactions
- Benefits: Minimal footprint, perfect complement to Livewire
- Use Cases: Success message animations, responsive interactions
- Why: Latest version with improved performance and new features
- Benefits: Utility-first approach, consistent design system, purged CSS
- Configuration: Custom color palette, responsive design patterns
- Why: Consistent development environment across all machines
- Services:
- App: PHP 8.3 with Laravel
- Nginx: Web server
- MySQL: Primary database
- Adminer: Database administration interface
// ContactSubmission model uses $fillable
protected $fillable = ['name', 'email', 'subject', 'message', 'ip_address', 'user_agent'];- Built-in Laravel CSRF tokens on all forms
- Livewire automatic CSRF handling
- Server-side validation with Laravel's validation rules
- Real-time client-side feedback via Livewire
- Honeypot Field: Hidden input that bots fill but humans ignore
- Time Trap: Prevents submissions faster than 5 seconds
- Rate Limiting: 3 submissions per minute per IP address
// Implemented in ContactForm component $key = 'contact-form:' . request()->ip(); if (RateLimiter::tooManyAttempts($key, 3)) { // Block submission and show error message }
- id (primary key)
- name (varchar 100)
- email (varchar 255, indexed)
- subject (varchar 200)
- message (text)
- ip_address (varchar 45, nullable)
- user_agent (text, nullable)
- created_at, updated_at (timestamps)- Vite: Fast build tool with hot module replacement
- Tailwind Purging: Removes unused CSS in production
- Alpine.js: Minimal JavaScript footprint
- Lazy Loading: Livewire components load on demand
- Query Optimization: Efficient database queries with proper indexing
- Pagination: Server-side pagination to handle large datasets
- Development:
npm run devfor hot reload - Production:
npm run buildfor optimized assets - Docker Integration: Assets compiled within container
- PHPUnit: Comprehensive testing suite
- Environment-based Config: Secure configuration management
Assets not loading:
# Rebuild assets
docker compose exec app npm run buildFor production deployments, it's highly recommended to implement a Web Application Firewall (WAF) for additional security:
- AWS: Use AWS WAF with CloudFront for DDoS protection and advanced bot detection
- Google Cloud: Implement Cloud Armor for comprehensive web security
- Azure: Deploy Application Gateway WAF with custom security rules
These services provide additional protection beyond the application's built-in spam protection, rate limiting, and security measures.
- Set
APP_ENV=productionandAPP_DEBUG=false - Enable HTTPS with valid SSL certificates
- Deploy Web Application Firewall (WAF)
- Configure production database with backups
- Set up monitoring and error tracking
- Optimize assets:
npm run build - Cache configuration:
php artisan optimize