A modern Single Page Application (SPA) for a fusion restaurant, developed with Vanilla JavaScript, CSS, and PHP backend. This project demonstrates professional frontend architecture without any external frameworks.
🔗 Live Demo – super-rando.dev2k.org
- 🌱 100% Vanilla JavaScript - No external dependencies
- 🎨 Mobile First Responsive - CSS Grid & Flexbox
- 🛒 Smart Shopping Cart - LocalStorage persistent
- 📧 Secure Contact Form - Spam protection & email confirmation
- 🔔 Toast Notifications - User-friendly feedback
- ♿ Accessibility Ready - ARIA & keyboard navigation
npm install
npm run dev
# → Automatically opens http://localhost:3000// Getter/Setter pattern for secure state access
export const getCartItems = () => [...appState.cart];
export const setCurrentPage = (page) => { notifyListeners(); };
// Reactive UI Updates
State change → notifyListeners() → automatic re-renderingsrc/services/
├── cart.js # Cart logic
├── navigation.js # SPA routing
├── contact-form.js # Form handling
└── notification.js # Toast system
// Each function max. 14 lines, single responsibility
const handleCartClick = (itemName) => {
updateCartItem(itemName, { quantity: item.quantity + 1 });
saveCartToStorage();
notifyListeners();
};Super-Rando-SPA/
├── src/
│ ├── app.js # App entry point
│ ├── state.js # Central state + getter/setter
│ ├── components/ # UI components
│ │ ├── pages/ # Page-specific components
│ │ ├── cart.js, header.js # Reusable components
│ ├── services/ # Business logic
│ └── utils/ # Utility functions & constants
├── styles/components/ # Component-based CSS
├── assets/ # Images, icons, PWA manifest
└── api/contact.php # Backend endpoint
- ES6+ Modules - Consistent import/export usage
- 14-Line Rule - All functions comply
- JSDoc Documentation - All public functions
- Immutable Updates - State never mutated directly
- Arrow Functions - Modern syntax
- Mobile First - Breakpoints: 768px, 1024px, 1280px
- CSS Custom Properties - All colors as variables
- Relative Units - rem for sizing, px for borders
- BEM-like Classes - Consistent naming convention
- Honeypot Fields - Bot protection
- Math Captcha - User-friendly spam prevention
- Rate Limiting - IP-based request limit (3/hour)
- Input Sanitization - XSS protection on client & server
// Event-driven architecture
cart.add() → notifyListeners() → renderAllComponents() → reset events// Navigation & cart persist across browser reloads
localStorage: Cart + user preferences
sessionStorage: Current page + category filter// Clear separation: presentation vs. business logic
Components: HTML rendering;
Services: State manipulation + API calls;- Theme System - Dark/Light mode
- Multi-language Support - DE/EN toggle
- PWA Features - Offline functionality
- User Authentication - Login/registration
- Order History - View past orders
- Advanced Search - Ingredient filtering
- Push Notifications - PWA notifications
POST /api/contact.php
Content-Type: application/json
{
"name": "Max Mustermann",
"email": "max@example.com",
"subject": "Reservation",
"message": "Table for 4 persons...",
"captcha": 42
}Features:
- Rate limiting (3 requests/hour per IP)
- Dual email system (admin + confirmation)
- HTML email templates
- Comprehensive input validation
:root {
--color-primary: #ff6b6b; /* Coral */
--color-secondary: #4ecdc4; /* Teal */
--color-accent: #ffe66d; /* Yellow */
--color-surface: #ffffff; /* White */
--color-background: #f8f9fa; /* Light Gray */
}Typography: Comic Neue (locally hosted) + system-ui fallback
- ✅ Chrome/Edge/Firefox (modern versions)
- ✅ Safari (modern versions)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- ⚡ No framework overhead
- 📱 Touch-optimized interactions
- 💾 Aggressive LocalStorage usage
- 🎯 CSS-only animations
MIT License - see LICENSE for details.
🍜 Built with ❤️ for modern web development
A showcase for professional frontend architecture with Vanilla JavaScript
- Order History - Personal order overview
- Push Notifications - PWA notifications
- Advanced Search - Ingredient/allergen filtering
- Social Sharing - Share dishes on social media
- Admin Dashboard - Content Management System
- Unit Tests - Jest test suite
- E2E Tests - Playwright integration
- Performance Monitoring - Lighthouse CI
- Error Logging - Sentry integration
- Code Coverage - Targeting 90%+ coverage
- All JavaScript functions max. 14 lines
- JSDoc comments for all public functions
- Consistent naming conventions (camelCase for JS, kebab-case for CSS)
- Mobile first CSS development
- No inline styles or event handlers
- ✅ Chrome/Edge (modern versions)
- ✅ Firefox (modern versions)
- ✅ Safari (modern versions)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- ⚡ Vanilla JavaScript (no framework overhead)
- 🗜️ CSS-only animations
- 📱 Touch-optimized interactions
- 🎯 Lazy loading for images
- 💾 Aggressive LocalStorage usage
// Contact form with spam protection
{
"name": "Max Mustermann",
"email": "max@example.com",
"subject": "Reservation",
"message": "Table for 4 persons...",
"captcha": 42
}Features:
- Rate limiting (3 requests/hour per IP)
- Honeypot spam protection
- HTML email templates
- Dual email system (admin + confirmation)
- Comprehensive input validation
:root {
--color-primary: #ff6b6b; /* Coral */
--color-secondary: #4ecdc4; /* Teal */
--color-accent: #ffe66d; /* Yellow */
--color-surface: #ffffff; /* White */
--color-background: #f8f9fa; /* Light Gray */
}- Primary Font: Comic Neue (locally hosted)
- Fallback: system-ui, -apple-system, sans-serif
- Sizing System: rem-based for scalability
- App icons (32px to 512px)
- Offline-ready basic structure
- Theme color integration
- Display mode: standalone
- CSS custom properties for fast theme switching
- Event delegation for better performance
- Minimal DOM manipulations via virtual-DOM-like updates
- XSS protection via HTML escaping
- Input length validation
- CSRF token preparation
- Honeypot anti-spam
- Rate limiting with IP tracking
- Input sanitization
- Email header injection protection
- Comprehensive error handling
This project demonstrates modern frontend development without external dependencies and shows how to build a professional SPA with vanilla technologies:
- 🏆 100% Vanilla - No framework lock-in
- 📐 Clean Architecture - Service layer + state management
- ♿ Accessibility First - Developed WCAG-compliant
- 🚀 Performance - Optimized for mobile & desktop
- 🔧 Maintainable - Modular, testable code
- 📱 Modern - PWA-ready & future-proof
# Clone repository
git clone [repository-url]
cd Super-Rando-SPA
# Install dependencies
npm install
# Start development server
npm run dev
# Browser will automatically open http://localhost:3000MIT License - see LICENSE for details.
🍜 Built with ❤️ for modern web development
A showcase for professional frontend architecture with Vanilla JavaScript