{"id":31856745,"url":"https://github.com/kosmaster87/super-rando","last_synced_at":"2026-05-16T11:03:04.568Z","repository":{"id":313685204,"uuid":"1042833790","full_name":"KosMaster87/Super-Rando","owner":"KosMaster87","description":"A modern, mobile-first web app, built with Vanilla JavaScript, CSS, and PHP. The project demonstrates professional frontend architecture and best practices—without relying on external frameworks.","archived":false,"fork":false,"pushed_at":"2025-11-08T13:15:09.000Z","size":2936,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-08T14:52:20.792Z","etag":null,"topics":["es6-modules","listener","php","single-page-application-with-js","state-management"],"latest_commit_sha":null,"homepage":"https://super-rando.dev2k.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KosMaster87.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-22T16:46:55.000Z","updated_at":"2025-11-08T13:15:12.000Z","dependencies_parsed_at":"2025-09-07T21:17:38.223Z","dependency_job_id":"067ac8dc-15ab-46e2-b8ce-0812c893a3a9","html_url":"https://github.com/KosMaster87/Super-Rando","commit_stats":null,"previous_names":["kosmaster87/super-rando"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KosMaster87/Super-Rando","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2FSuper-Rando","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2FSuper-Rando/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2FSuper-Rando/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2FSuper-Rando/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KosMaster87","download_url":"https://codeload.github.com/KosMaster87/Super-Rando/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2FSuper-Rando/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33100319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T04:41:52.686Z","status":"ssl_error","status_checked_at":"2026-05-16T04:41:52.009Z","response_time":115,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6-modules","listener","php","single-page-application-with-js","state-management"],"created_at":"2025-10-12T14:54:44.542Z","updated_at":"2026-05-16T11:03:04.549Z","avatar_url":"https://github.com/KosMaster87.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍜 Super~Rando SPA - Fusion Cuisine Restaurant\n\nA 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.\n\n---\n\n## 🚀 Live Demo\n\n🔗 [Live Demo – super-rando.dev2k.org](https://super-rando.dev2k.org)\n\n🔗 [API Dokumentation](https://super-rando.dev2k.org/docs/index.html)\n\n---\n\n## 📸 Preview\n\n![Portfolio Screenshot](./assets/images/Super~Rando.avif)\n\n---\n\n## ✨ Core Features\n\n- 🌱 **100% Vanilla JavaScript** - No external dependencies\n- 🎨 **Mobile First Responsive** - CSS Grid \u0026 Flexbox\n- 🛒 **Smart Shopping Cart** - LocalStorage persistent\n- 📧 **Secure Contact Form** - Spam protection \u0026 email confirmation\n- 🔔 **Toast Notifications** - User-friendly feedback\n- ♿ **Accessibility Ready** - ARIA \u0026 keyboard navigation\n\n## 🚀 Quick Start\n\n```bash\nnpm install\nnpm run dev\n# → Automatically opens http://localhost:3000\n```\n\n## 🏗️ Architecture Highlights\n\n### State Management ✅\n\n```js\n// Getter/Setter pattern for secure state access\nexport const getCartItems = () =\u003e [...appState.cart];\nexport const setCurrentPage = (page) =\u003e { notifyListeners(); };\n\n// Reactive UI Updates\nState change → notifyListeners() → automatic re-rendering\n```\n\n### Service Layer ✅\n\n```\nsrc/services/\n├── cart.js           # Cart logic\n├── navigation.js     # SPA routing\n├── contact-form.js   # Form handling\n└── notification.js   # Toast system\n```\n\n### 14-Line Functions ✅\n\n```js\n// Each function max. 14 lines, single responsibility\nconst handleCartClick = (itemName) =\u003e {\n  updateCartItem(itemName, { quantity: item.quantity + 1 });\n  saveCartToStorage();\n  notifyListeners();\n};\n```\n\n## 📁 Project Structure\n\n```\nSuper-Rando-SPA/\n├── src/\n│   ├── app.js                   # App entry point\n│   ├── state.js                 # Central state + getter/setter\n│   ├── components/              # UI components\n│   │   ├── pages/               # Page-specific components\n│   │   ├── cart.js, header.js   # Reusable components\n│   ├── services/                # Business logic\n│   └── utils/                   # Utility functions \u0026 constants\n├── styles/components/           # Component-based CSS\n├── assets/                      # Images, icons, PWA manifest\n└── api/contact.php              # Backend endpoint\n```\n\n## 🔧 Implemented Standards\n\n### JavaScript ✅\n\n- **ES6+ Modules** - Consistent import/export usage\n- **14-Line Rule** - All functions comply\n- **JSDoc Documentation** - All public functions\n- **Immutable Updates** - State never mutated directly\n- **Arrow Functions** - Modern syntax\n\n### CSS ✅\n\n- **Mobile First** - Breakpoints: 768px, 1024px, 1280px\n- **CSS Custom Properties** - All colors as variables\n- **Relative Units** - rem for sizing, px for borders\n- **BEM-like Classes** - Consistent naming convention\n\n### Security ✅\n\n- **Honeypot Fields** - Bot protection\n- **Math Captcha** - User-friendly spam prevention\n- **Rate Limiting** - IP-based request limit (3/hour)\n- **Input Sanitization** - XSS protection on client \u0026 server\n\n## 🌟 Special Features\n\n### Reactive UI Without Framework\n\n```js\n// Event-driven architecture\ncart.add() → notifyListeners() → renderAllComponents() → reset events\n```\n\n### Session Restoration\n\n```js\n// Navigation \u0026 cart persist across browser reloads\nlocalStorage: Cart + user preferences\nsessionStorage: Current page + category filter\n```\n\n### Service-Oriented Architecture\n\n```js\n// Clear separation: presentation vs. business logic\nComponents: HTML rendering;\nServices: State manipulation + API calls;\n```\n\n## 🎯 Upcoming Features\n\n### 🚧 In Development\n\n- [ ] **Theme System** - Dark/Light mode\n- [ ] **Multi-language Support** - DE/EN toggle\n- [ ] **PWA Features** - Offline functionality\n\n### 📋 Roadmap\n\n- [ ] **User Authentication** - Login/registration\n- [ ] **Order History** - View past orders\n- [ ] **Advanced Search** - Ingredient filtering\n- [ ] **Push Notifications** - PWA notifications\n\n## 📧 API Documentation\n\n### Contact Endpoint\n\n```bash\nPOST /api/contact.php\nContent-Type: application/json\n\n{\n  \"name\": \"Max Mustermann\",\n  \"email\": \"max@example.com\",\n  \"subject\": \"Reservation\",\n  \"message\": \"Table for 4 persons...\",\n  \"captcha\": 42\n}\n```\n\n**Features:**\n\n- Rate limiting (3 requests/hour per IP)\n- Dual email system (admin + confirmation)\n- HTML email templates\n- Comprehensive input validation\n\n## 🎨 Design System\n\n```css\n:root {\n  --color-primary: #ff6b6b; /* Coral */\n  --color-secondary: #4ecdc4; /* Teal */\n  --color-accent: #ffe66d; /* Yellow */\n  --color-surface: #ffffff; /* White */\n  --color-background: #f8f9fa; /* Light Gray */\n}\n```\n\n**Typography:** Comic Neue (locally hosted) + system-ui fallback\n\n## 💻 Development\n\n### Browser Support\n\n- ✅ Chrome/Edge/Firefox (modern versions)\n- ✅ Safari (modern versions)\n- ✅ Mobile browsers (iOS Safari, Chrome Mobile)\n\n### Performance\n\n- ⚡ No framework overhead\n- 📱 Touch-optimized interactions\n- 💾 Aggressive LocalStorage usage\n- 🎯 CSS-only animations\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n---\n\n**🍜 Built with ❤️ for modern web development**\n\n_A showcase for professional frontend architecture with Vanilla JavaScript_\n\n- [ ] **Order History** - Personal order overview\n- [ ] **Push Notifications** - PWA notifications\n- [ ] **Advanced Search** - Ingredient/allergen filtering\n- [ ] **Social Sharing** - Share dishes on social media\n- [ ] **Admin Dashboard** - Content Management System\n\n### 🔍 Code Quality \u0026 Testing\n\n- [ ] **Unit Tests** - Jest test suite\n- [ ] **E2E Tests** - Playwright integration\n- [ ] **Performance Monitoring** - Lighthouse CI\n- [ ] **Error Logging** - Sentry integration\n- [ ] **Code Coverage** - Targeting 90%+ coverage\n\n## 🛠️ Development\n\n### Coding Standards ✅\n\n- All JavaScript functions max. 14 lines\n- JSDoc comments for all public functions\n- Consistent naming conventions (camelCase for JS, kebab-case for CSS)\n- Mobile first CSS development\n- No inline styles or event handlers\n\n### Browser Support ✅\n\n- ✅ Chrome/Edge (modern versions)\n- ✅ Firefox (modern versions)\n- ✅ Safari (modern versions)\n- ✅ Mobile browsers (iOS Safari, Chrome Mobile)\n\n### Performance ✅\n\n- ⚡ Vanilla JavaScript (no framework overhead)\n- 🗜️ CSS-only animations\n- 📱 Touch-optimized interactions\n- 🎯 Lazy loading for images\n- 💾 Aggressive LocalStorage usage\n\n## 📧 API Endpoints\n\n### POST /api/contact.php ✅\n\n```js\n// Contact form with spam protection\n{\n  \"name\": \"Max Mustermann\",\n  \"email\": \"max@example.com\",\n  \"subject\": \"Reservation\",\n  \"message\": \"Table for 4 persons...\",\n  \"captcha\": 42\n}\n```\n\n**Features:**\n\n- Rate limiting (3 requests/hour per IP)\n- Honeypot spam protection\n- HTML email templates\n- Dual email system (admin + confirmation)\n- Comprehensive input validation\n\n## 🎨 Design System\n\n### Color Palette ✅\n\n```css\n:root {\n  --color-primary: #ff6b6b; /* Coral */\n  --color-secondary: #4ecdc4; /* Teal */\n  --color-accent: #ffe66d; /* Yellow */\n  --color-surface: #ffffff; /* White */\n  --color-background: #f8f9fa; /* Light Gray */\n}\n```\n\n### Typography ✅\n\n- **Primary Font:** Comic Neue (locally hosted)\n- **Fallback:** system-ui, -apple-system, sans-serif\n- **Sizing System:** rem-based for scalability\n\n## 📱 Progressive Web App\n\n### Manifest ✅\n\n- App icons (32px to 512px)\n- Offline-ready basic structure\n- Theme color integration\n- Display mode: standalone\n\n### Performance Optimizations ✅\n\n- CSS custom properties for fast theme switching\n- Event delegation for better performance\n- Minimal DOM manipulations via virtual-DOM-like updates\n\n## 🔒 Security Features\n\n### Frontend Security ✅\n\n- XSS protection via HTML escaping\n- Input length validation\n- CSRF token preparation\n- Honeypot anti-spam\n\n### Backend Security ✅\n\n- Rate limiting with IP tracking\n- Input sanitization\n- Email header injection protection\n- Comprehensive error handling\n\n## 🌟 Highlights\n\nThis project demonstrates modern frontend development **without external dependencies** and shows how to build a professional SPA with vanilla technologies:\n\n- **🏆 100% Vanilla** - No framework lock-in\n- **📐 Clean Architecture** - Service layer + state management\n- **♿ Accessibility First** - Developed WCAG-compliant\n- **🚀 Performance** - Optimized for mobile \u0026 desktop\n- **🔧 Maintainable** - Modular, testable code\n- **📱 Modern** - PWA-ready \u0026 future-proof\n\n## 💻 Local Development\n\n```bash\n# Clone repository\ngit clone [repository-url]\ncd Super-Rando-SPA\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Browser will automatically open http://localhost:3000\n```\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n---\n\n**🍜 Built with ❤️ for modern web development**\n\n_A showcase for professional frontend architecture with Vanilla JavaScript_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosmaster87%2Fsuper-rando","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkosmaster87%2Fsuper-rando","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosmaster87%2Fsuper-rando/lists"}