full upgrade to dev

This commit is contained in:
2026-01-08 16:27:40 +01:00
parent 41f404c581
commit cd4d2367ab
20 changed files with 2687 additions and 96 deletions

View File

@@ -93,67 +93,229 @@ Building Clarity taught me a lot about accessibility, mobile UI/UX design, and h
},
},
{
title: "Self-Hosted Infrastructure & Portfolio",
title: "Portfolio Website - Modern Developer Showcase",
description:
"A complete DevOps setup running in Docker Swarm. My Next.js projects are deployed via automated CI/CD pipelines with custom runners.",
content: `# Self-Hosted Infrastructure & Portfolio
"A fully-featured, self-hosted portfolio website built with Next.js 14, featuring AI-powered image generation, real-time activity tracking, email management, and a complete admin dashboard. Deployed on Docker Swarm with zero-downtime deployments.",
content: `# Portfolio Website - Modern Developer Showcase
Not just a website this is a complete self-hosted infrastructure project showcasing my DevOps skills and passion for self-hosting.
This is the website you're currently viewing! A comprehensive, production-ready portfolio platform that showcases not just my projects, but also demonstrates modern web development practices, DevOps expertise, and innovative features.
## 🏗️ Architecture
## 🎯 Project Overview
All my projects run on a Docker Swarm cluster hosted on IONOS and OVHcloud servers. Everything is self-managed, from the networking layer to the application deployments.
This portfolio is more than just a showcase it's a full-stack application demonstrating:
- Modern React/Next.js development patterns
- AI integration (image generation, email automation)
- Real-time features and activity tracking
- Complete admin dashboard
- Self-hosted infrastructure
- Production-grade DevOps practices
## 🚀 Features
## 🏗️ Architecture & Infrastructure
- **Docker Swarm Cluster**: Multi-node orchestration for high availability
- **Traefik Reverse Proxy**: Automatic SSL certificates and routing
- **Automated CI/CD**: Custom GitLab/Gitea runners for continuous deployment
- **Zero-Downtime Deployments**: Rolling updates without service interruption
- **Redis Caching**: Performance optimization with Redis
- **Nginx Proxy Manager**: Additional layer for complex routing scenarios
### Frontend Stack
- **Next.js 14** with App Router for optimal performance
- **TypeScript** for type safety
- **Tailwind CSS** for modern, responsive design
- **Framer Motion** for smooth animations
- **React Server Components** for optimal rendering
- **Next.js Image** optimization for fast loading
## 🛠️ Tech Stack
### Backend & Database
- **PostgreSQL** with Prisma ORM
- **Redis** for caching and performance
- **RESTful API** design with proper error handling
- **Rate limiting** and security middleware
- **Activity logging** and analytics
- **Frontend**: Next.js, Tailwind CSS
- **Infrastructure**: Docker Swarm, Traefik, Nginx Proxy Manager
- **CI/CD**: Custom Git runners with automated pipelines
- **Monitoring**: Self-hosted monitoring stack
- **Security**: CrowdSec, Suricata, Mailcow
- **Caching**: Redis
### DevOps & Deployment
- **Docker Swarm** cluster for orchestration
- **Traefik** reverse proxy with automatic SSL
- **CI/CD pipelines** with custom Gitea runners
- **Zero-downtime deployments** with rolling updates
- **Health checks** and monitoring
- **Automated backups**
## 🔐 Security
## 🚀 Key Features
Security is a top priority. I use CrowdSec for intrusion prevention, Suricata for network monitoring, and Mailcow for secure email communications.
### 1. AI-Powered Image Generation
- Automatic project cover image generation
- Integration with n8n workflows and pollinations.ai
- Category-specific prompt templates
- Admin UI for manual generation/regeneration
- Support for multiple AI models (Flux, Stable Diffusion)
## 📈 DevOps Process
### 2. Real-Time Activity Tracking
- Live status updates (coding, gaming, music)
- Activity feed with timestamps
- Database-backed activity logging
- RESTful API for status updates
1. Code push triggers CI/CD pipeline
2. Automated tests run on custom runners
3. Docker images are built and tagged
4. Rolling deployment to Swarm cluster
5. Traefik automatically routes traffic
6. Zero downtime for users
### 3. Email Management System
- Automated email responder
- Email template system
- Integration with n8n for automation
- Admin dashboard for email management
## 💡 What I Learned
### 4. Project Management
- Full CRUD operations for projects
- Rich markdown content editor
- Tag and category system
- Featured projects showcase
- Analytics tracking (views, likes, shares)
- Import/export functionality
This project taught me everything about production-grade DevOps, from container orchestration to security hardening. Managing my own infrastructure has given me deep insights into networking, load balancing, and system administration.
### 5. Admin Dashboard
- Modern, responsive admin interface
- Project management UI
- AI image generator component
- Analytics dashboard
- Performance monitoring
- Email management tools
## 🎯 Other Projects
### 6. Performance Optimizations
- Server-side rendering (SSR)
- Static site generation (SSG) where possible
- Image optimization with Next.js Image
- Redis caching layer
- Database query optimization
- Code splitting and lazy loading
Besides this portfolio, I host:
- Interactive photo galleries
- Quiz applications
- Game servers
- n8n automation workflows
- Various experimental Next.js apps
## 🛠️ Technical Implementation
## 🔮 Future Improvements
### Code Quality
- **TypeScript** throughout for type safety
- **ESLint** for code quality
- **Prisma** for type-safe database access
- **Error boundaries** for graceful error handling
- **Comprehensive error logging**
- Kubernetes migration for more advanced orchestration
- Automated backup and disaster recovery
- Advanced monitoring with Prometheus and Grafana
- Multi-region deployment`,
### Security Features
- Rate limiting on API endpoints
- CSRF protection
- Secure authentication
- Input validation and sanitization
- Security headers via middleware
- Environment variable management
### Developer Experience
- Hot module replacement (HMR)
- Comprehensive documentation
- Type-safe API routes
- Database migration system
- Seed scripts for development
- Pre-push checklists and validation
## 📊 Performance Metrics
- **Lighthouse Score**: 90+ across all categories
- **First Contentful Paint**: < 1.5s
- **Time to Interactive**: < 3s
- **Bundle Size**: Optimized with code splitting
- **Database Queries**: Optimized with indexes and caching
## 🎨 Design Philosophy
- **Minimalist**: Clean, uncluttered interface
- **Modern**: Contemporary design patterns
- **Accessible**: WCAG 2.1 AA compliant
- **Responsive**: Mobile-first approach
- **Fast**: Performance is a feature
## 🔧 Development Workflow
1. **Local Development**: Docker Compose setup
2. **Version Control**: Git with Gitea
3. **CI/CD**: Automated testing and deployment
4. **Staging**: Test environment before production
5. **Production**: Zero-downtime deployments
## 📈 Analytics & Monitoring
- Page view tracking
- User interaction logging
- Performance monitoring
- Error tracking
- Activity feed analytics
## 💡 What Makes This Special
1. **Self-Hosted**: Complete control over infrastructure
2. **AI Integration**: Cutting-edge AI features
3. **Production-Ready**: Real-world deployment practices
4. **Comprehensive**: Full-stack application
5. **Documented**: Extensive documentation
6. **Maintainable**: Clean, well-structured code
## 🔮 Future Enhancements
- [ ] Blog system integration
- [ ] Comment system for projects
- [ ] Advanced analytics dashboard
- [ ] Multi-language support (i18n)
- [ ] Dark mode toggle
- [ ] Progressive Web App (PWA) features
- [ ] GraphQL API option
- [ ] Real-time collaboration features
## 🎓 Technologies Learned
- Next.js 14 App Router
- Server Components vs Client Components
- Prisma ORM best practices
- Docker Swarm orchestration
- CI/CD pipeline design
- AI API integration
- Real-time features
- Performance optimization
- Security best practices
## 📝 Codebase Structure
\`\`\`
portfolio/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── components/ # React components
│ └── [routes]/ # Page routes
├── prisma/ # Database schema & migrations
├── lib/ # Shared utilities
├── components/ # Reusable components
├── docs/ # Documentation
└── scripts/ # Deployment scripts
\`\`\`
## 🚀 Deployment
Deployed on a Docker Swarm cluster with:
- Automatic SSL via Traefik
- Health checks and auto-restart
- Rolling updates (zero downtime)
- Redis caching layer
- PostgreSQL database
- Automated backups
## 📚 Documentation
Comprehensive documentation includes:
- Setup guides
- API documentation
- Deployment procedures
- AI image generation setup
- Database migration guides
- Security best practices
## 🏆 Achievements
- ✅ Production deployment
- ✅ Zero-downtime deployments
- ✅ AI integration working
- ✅ Real-time features
- ✅ Complete admin dashboard
- ✅ Comprehensive documentation
- ✅ Performance optimized
- ✅ Security hardened
This portfolio website is a living project that evolves with new technologies and best practices. It serves as both a showcase and a demonstration of full-stack development capabilities.`,
tags: [
"Docker",
"Swarm",
@@ -212,6 +374,448 @@ Besides this portfolio, I host:
shares: 45,
},
},
{
title: "E-Commerce Platform API",
description:
"A scalable RESTful API for an e-commerce platform built with Node.js, Express, and PostgreSQL. Features include user authentication, product management, shopping cart, and order processing.",
content: `# E-Commerce Platform API
A production-ready RESTful API for an e-commerce platform, demonstrating best practices in API design, security, and scalability.
## 🎯 Purpose
Built to handle the backend for a modern e-commerce platform with features like user management, product catalog, shopping cart, and order processing.
## 🚀 Features
- **User Authentication**: JWT-based auth with refresh tokens
- **Product Management**: CRUD operations with categories and filters
- **Shopping Cart**: Session-based cart management
- **Order Processing**: Complete order lifecycle
- **Payment Integration**: Stripe integration ready
- **Search & Filtering**: Advanced product search
- **Rate Limiting**: API protection
- **Documentation**: Swagger/OpenAPI docs
## 🛠️ Technologies Used
- Node.js & Express
- PostgreSQL
- Prisma ORM
- JWT Authentication
- Redis (caching)
- Stripe API
- Swagger/OpenAPI
## 💡 What I Learned
- RESTful API design principles
- Authentication and authorization
- Database optimization
- API security best practices
- Payment gateway integration
- Scalability patterns
## 🔮 Future Plans
- GraphQL API option
- Microservices architecture
- Real-time inventory updates
- Advanced analytics`,
tags: ["Node.js", "Express", "PostgreSQL", "API", "E-Commerce", "REST"],
featured: true,
category: "Backend Development",
date: "2024",
published: true,
difficulty: "ADVANCED",
timeToComplete: "6-8 weeks",
technologies: ["Node.js", "Express", "PostgreSQL", "Prisma", "JWT", "Redis", "Stripe"],
challenges: [
"Scalable architecture design",
"Payment integration",
"Inventory management",
"API security",
],
lessonsLearned: [
"RESTful API design",
"Authentication patterns",
"Database optimization",
"Payment processing",
],
futureImprovements: [
"GraphQL support",
"Microservices migration",
"Real-time features",
"Advanced analytics",
],
demoVideo: "",
screenshots: [],
colorScheme: "Professional blue and white",
accessibility: true,
performance: {
lighthouse: 0,
bundleSize: "0KB",
loadTime: "0s",
},
analytics: {
views: 920,
likes: 78,
shares: 32,
},
},
{
title: "Real-Time Chat Application",
description:
"A real-time chat application built with React, Node.js, and Socket.io. Features include multiple rooms, user presence, file sharing, and message history.",
content: `# Real-Time Chat Application
A modern real-time chat application with WebSocket support, multiple chat rooms, and advanced features.
## 🎯 Purpose
Built to demonstrate real-time communication patterns and WebSocket implementation in a modern web application.
## 🚀 Features
- **Real-Time Messaging**: WebSocket-based instant messaging
- **Multiple Rooms**: Create and join chat rooms
- **User Presence**: See who's online
- **File Sharing**: Upload and share files
- **Message History**: Persistent message storage
- **Emoji Support**: Rich emoji reactions
- **Typing Indicators**: See when users are typing
- **Notifications**: Browser notifications
## 🛠️ Technologies Used
- React (Frontend)
- Node.js & Express (Backend)
- Socket.io (WebSockets)
- MongoDB (Message storage)
- AWS S3 (File storage)
- Redis (Presence tracking)
## 💡 What I Learned
- WebSocket programming
- Real-time data synchronization
- Presence systems
- File upload handling
- Scalable chat architecture
- Notification systems
## 🔮 Future Plans
- Voice and video calls
- Screen sharing
- End-to-end encryption
- Mobile app version`,
tags: ["React", "Node.js", "Socket.io", "WebSocket", "Real-Time", "Chat"],
featured: false,
category: "Full-Stack Development",
date: "2023",
published: true,
difficulty: "INTERMEDIATE",
timeToComplete: "4-5 weeks",
technologies: ["React", "Node.js", "Socket.io", "MongoDB", "Redis", "AWS S3"],
challenges: [
"WebSocket connection management",
"Scalable presence system",
"File upload optimization",
"Message synchronization",
],
lessonsLearned: [
"Real-time communication",
"WebSocket patterns",
"Presence systems",
"File handling",
],
futureImprovements: [
"Video calls",
"End-to-end encryption",
"Mobile app",
"Advanced moderation",
],
demoVideo: "",
screenshots: [],
colorScheme: "Modern chat interface",
accessibility: true,
performance: {
lighthouse: 0,
bundleSize: "0KB",
loadTime: "0s",
},
analytics: {
views: 680,
likes: 54,
shares: 28,
},
},
{
title: "Task Management Dashboard",
description:
"A Kanban-style task management dashboard with drag-and-drop functionality, team collaboration, and project tracking. Built with React and TypeScript.",
content: `# Task Management Dashboard
A comprehensive project management tool inspired by Trello and Jira, with Kanban boards, team collaboration, and advanced project tracking.
## 🎯 Purpose
Built to help teams organize tasks, track progress, and collaborate effectively on projects.
## 🚀 Features
- **Kanban Boards**: Drag-and-drop task management
- **Team Collaboration**: Multiple users per project
- **Project Tracking**: Progress visualization
- **Due Dates & Reminders**: Task scheduling
- **Labels & Filters**: Organize tasks
- **Activity Log**: Track all changes
- **Search**: Find tasks quickly
- **Dark Mode**: Eye-friendly interface
## 🛠️ Technologies Used
- React & TypeScript
- Redux Toolkit (State management)
- React DnD (Drag and drop)
- Chart.js (Visualizations)
- PostgreSQL (Data storage)
- Express (Backend API)
## 💡 What I Learned
- Complex state management
- Drag-and-drop implementation
- Real-time collaboration patterns
- Data visualization
- Team-based features
- UI/UX for productivity apps
## 🔮 Future Plans
- Time tracking
- Gantt charts
- Calendar view
- Mobile app
- Integrations (Slack, GitHub)`,
tags: ["React", "TypeScript", "Kanban", "Project Management", "Redux"],
featured: true,
category: "Web Application",
date: "2023",
published: true,
difficulty: "ADVANCED",
timeToComplete: "8-10 weeks",
technologies: ["React", "TypeScript", "Redux", "React DnD", "Chart.js", "PostgreSQL"],
challenges: [
"Complex state management",
"Drag-and-drop performance",
"Real-time sync",
"Permission system",
],
lessonsLearned: [
"State management patterns",
"Drag-and-drop libraries",
"Collaboration features",
"Data visualization",
],
futureImprovements: [
"Time tracking",
"Gantt charts",
"Mobile app",
"Third-party integrations",
],
demoVideo: "",
screenshots: [],
colorScheme: "Productive blue and green",
accessibility: true,
performance: {
lighthouse: 0,
bundleSize: "0KB",
loadTime: "0s",
},
analytics: {
views: 1100,
likes: 89,
shares: 41,
},
},
{
title: "Weather Forecast App",
description:
"A beautiful weather forecast application with location-based forecasts, weather maps, and detailed meteorological data. Built with React and OpenWeatherMap API.",
content: `# Weather Forecast App
A modern, responsive weather application providing detailed forecasts, weather maps, and meteorological insights.
## 🎯 Purpose
Built to demonstrate API integration, geolocation, and data visualization in a practical, user-friendly application.
## 🚀 Features
- **Location-Based Forecasts**: Automatic location detection
- **7-Day Forecast**: Extended weather predictions
- **Weather Maps**: Interactive weather visualization
- **Hourly Forecasts**: Detailed hourly predictions
- **Weather Alerts**: Severe weather notifications
- **Multiple Locations**: Save favorite locations
- **Beautiful UI**: Modern, intuitive design
- **Offline Support**: Cached data when offline
## 🛠️ Technologies Used
- React
- OpenWeatherMap API
- Leaflet Maps
- Chart.js
- LocalStorage
- PWA capabilities
## 💡 What I Learned
- Third-party API integration
- Geolocation APIs
- Map integration
- Data visualization
- PWA development
- Caching strategies
## 🔮 Future Plans
- Weather widgets
- Notifications
- Historical data
- Weather comparisons`,
tags: ["React", "Weather", "API", "Maps", "PWA"],
featured: false,
category: "Web Application",
date: "2023",
published: true,
difficulty: "BEGINNER",
timeToComplete: "2-3 weeks",
technologies: ["React", "OpenWeatherMap API", "Leaflet", "Chart.js"],
challenges: [
"API rate limiting",
"Map performance",
"Offline functionality",
"Location accuracy",
],
lessonsLearned: [
"API integration",
"Geolocation",
"Map libraries",
"PWA features",
],
futureImprovements: [
"Weather widgets",
"Push notifications",
"Historical data",
"Social sharing",
],
demoVideo: "",
screenshots: [],
colorScheme: "Sky blue and white",
accessibility: true,
performance: {
lighthouse: 0,
bundleSize: "0KB",
loadTime: "0s",
},
analytics: {
views: 450,
likes: 38,
shares: 15,
},
},
{
title: "Machine Learning Model API",
description:
"A RESTful API for serving machine learning models, including image classification, text analysis, and prediction endpoints. Built with Python, FastAPI, and TensorFlow.",
content: `# Machine Learning Model API
A production-ready API for serving machine learning models with endpoints for image classification, sentiment analysis, and predictions.
## 🎯 Purpose
Built to demonstrate ML model deployment, API design for ML services, and scalable inference serving.
## 🚀 Features
- **Image Classification**: Upload images for classification
- **Sentiment Analysis**: Analyze text sentiment
- **Prediction Endpoints**: Various ML model predictions
- **Batch Processing**: Process multiple inputs
- **Model Versioning**: Manage model versions
- **API Documentation**: Auto-generated docs
- **Rate Limiting**: Protect resources
- **Monitoring**: Track usage and performance
## 🛠️ Technologies Used
- Python & FastAPI
- TensorFlow / PyTorch
- Docker
- Redis (Caching)
- PostgreSQL (Metadata)
- Prometheus (Monitoring)
## 💡 What I Learned
- ML model deployment
- API design for ML
- Model versioning
- Inference optimization
- Monitoring ML services
- Containerization of ML apps
## 🔮 Future Plans
- Auto-scaling
- Model A/B testing
- Advanced monitoring
- More model types`,
tags: ["Python", "FastAPI", "Machine Learning", "TensorFlow", "AI"],
featured: true,
category: "AI/ML",
date: "2024",
published: true,
difficulty: "EXPERT",
timeToComplete: "10-12 weeks",
technologies: ["Python", "FastAPI", "TensorFlow", "Docker", "Redis"],
challenges: [
"Model optimization",
"Inference latency",
"Scalability",
"Model versioning",
],
lessonsLearned: [
"ML deployment",
"API design for ML",
"Model optimization",
"Production ML practices",
],
futureImprovements: [
"Auto-scaling",
"A/B testing",
"Advanced monitoring",
"More models",
],
demoVideo: "",
screenshots: [],
colorScheme: "Tech-focused dark theme",
accessibility: true,
performance: {
lighthouse: 0,
bundleSize: "0KB",
loadTime: "0s",
},
analytics: {
views: 750,
likes: 62,
shares: 29,
},
},
];
for (const project of projects) {
@@ -230,13 +834,17 @@ Besides this portfolio, I host:
console.log(`✅ Created ${projects.length} projects`);
// Create some sample analytics data
for (let i = 1; i <= projects.length; i++) {
const createdProjects = await prisma.project.findMany({
orderBy: { id: 'asc' }
});
for (const project of createdProjects) {
// Create page views
for (let j = 0; j < Math.floor(Math.random() * 100) + 50; j++) {
await prisma.pageView.create({
data: {
projectId: i,
page: `/projects/${i}`,
projectId: project.id,
page: `/projects/${project.id}`,
ip: `192.168.1.${Math.floor(Math.random() * 255)}`,
userAgent:
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
@@ -249,7 +857,7 @@ Besides this portfolio, I host:
for (let j = 0; j < Math.floor(Math.random() * 20) + 10; j++) {
await prisma.userInteraction.create({
data: {
projectId: i,
projectId: project.id,
type: Math.random() > 0.5 ? "LIKE" : "SHARE",
ip: `192.168.1.${Math.floor(Math.random() * 255)}`,
userAgent: