1024 lines
30 KiB
TypeScript
1024 lines
30 KiB
TypeScript
import { PrismaClient } from "@prisma/client";
|
||
import { slugify } from "../lib/slug";
|
||
|
||
const prisma = new PrismaClient();
|
||
|
||
async function main() {
|
||
console.log("🌱 Seeding database...");
|
||
|
||
// Clear existing data
|
||
await prisma.userInteraction.deleteMany();
|
||
await prisma.pageView.deleteMany();
|
||
await prisma.project.deleteMany();
|
||
|
||
// Create real projects
|
||
const projects = [
|
||
{
|
||
title: "Clarity",
|
||
description:
|
||
"A Flutter mobile app supporting people with dyslexia by displaying text in OpenDyslexic font and simplifying content using AI.",
|
||
content: `# Clarity - Dyslexia Support App
|
||
|
||
Clarity is a mobile application built with Flutter to help people with dyslexia read and understand text more easily.
|
||
|
||
## 🎯 Purpose
|
||
|
||
The app was designed to make reading more accessible by using the OpenDyslexic font, which is specifically designed to make letters more distinguishable and reduce reading errors.
|
||
|
||
## 🚀 Features
|
||
|
||
- **OpenDyslexic Font**: All text is displayed in the OpenDyslexic typeface
|
||
- **AI Text Simplification**: Complex texts are simplified using AI integration
|
||
- **Clean Interface**: Simple, distraction-free reading experience
|
||
- **Mobile-First**: Optimized for smartphones and tablets
|
||
- **Accessibility**: Built with accessibility in mind from the ground up
|
||
|
||
## 🛠️ Technologies Used
|
||
|
||
- Flutter
|
||
- Dart
|
||
- AI Integration for text simplification
|
||
- OpenDyslexic Font
|
||
|
||
## 📱 Platform Support
|
||
|
||
- iOS
|
||
- Android
|
||
|
||
## 💡 What I Learned
|
||
|
||
Building Clarity taught me a lot about accessibility, mobile UI/UX design, and how to integrate AI services into mobile applications. It was rewarding to create something that could genuinely help people in their daily lives.
|
||
|
||
## 🔮 Future Plans
|
||
|
||
- Add more font options
|
||
- Implement text-to-speech
|
||
- Support for more languages
|
||
- PDF and document scanning`,
|
||
tags: ["Flutter", "Mobile", "AI", "Accessibility", "Dart"],
|
||
featured: true,
|
||
category: "Mobile Development",
|
||
date: "2024",
|
||
published: true,
|
||
difficulty: "INTERMEDIATE",
|
||
timeToComplete: "4-6 weeks",
|
||
technologies: ["Flutter", "Dart", "AI Integration", "OpenDyslexic Font"],
|
||
challenges: [
|
||
"Implementing AI text simplification",
|
||
"Font rendering optimization",
|
||
"Mobile accessibility standards",
|
||
],
|
||
lessonsLearned: [
|
||
"Mobile development with Flutter",
|
||
"Accessibility best practices",
|
||
"AI API integration",
|
||
],
|
||
futureImprovements: [
|
||
"Text-to-speech",
|
||
"Multi-language support",
|
||
"Document scanning",
|
||
],
|
||
demoVideo: "",
|
||
screenshots: [],
|
||
colorScheme: "Clean and minimal with high contrast",
|
||
accessibility: true,
|
||
performance: {
|
||
lighthouse: 0,
|
||
bundleSize: "0KB",
|
||
loadTime: "0s",
|
||
},
|
||
analytics: {
|
||
views: 850,
|
||
likes: 67,
|
||
shares: 34,
|
||
},
|
||
},
|
||
{
|
||
title: "Portfolio Website - Modern Developer Showcase",
|
||
description:
|
||
"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
|
||
|
||
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.
|
||
|
||
## 🎯 Project Overview
|
||
|
||
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
|
||
|
||
## 🏗️ Architecture & Infrastructure
|
||
|
||
### 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
|
||
|
||
### 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
|
||
|
||
### 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**
|
||
|
||
## 🚀 Key Features
|
||
|
||
### 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)
|
||
|
||
### 2. Real-Time Activity Tracking
|
||
- Live status updates (coding, gaming, music)
|
||
- Activity feed with timestamps
|
||
- Database-backed activity logging
|
||
- RESTful API for status updates
|
||
|
||
### 3. Email Management System
|
||
- Automated email responder
|
||
- Email template system
|
||
- Integration with n8n for automation
|
||
- Admin dashboard for email management
|
||
|
||
### 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
|
||
|
||
### 5. Admin Dashboard
|
||
- Modern, responsive admin interface
|
||
- Project management UI
|
||
- AI image generator component
|
||
- Analytics dashboard
|
||
- Performance monitoring
|
||
- Email management tools
|
||
|
||
### 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
|
||
|
||
## 🛠️ Technical Implementation
|
||
|
||
### 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**
|
||
|
||
### 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",
|
||
"DevOps",
|
||
"CI/CD",
|
||
"Next.js",
|
||
"Traefik",
|
||
"Self-Hosting",
|
||
],
|
||
featured: true,
|
||
category: "DevOps",
|
||
date: "2024",
|
||
published: true,
|
||
difficulty: "ADVANCED",
|
||
timeToComplete: "Ongoing project",
|
||
technologies: [
|
||
"Docker Swarm",
|
||
"Traefik",
|
||
"Next.js",
|
||
"Redis",
|
||
"CI/CD",
|
||
"Nginx",
|
||
"CrowdSec",
|
||
"Suricata",
|
||
],
|
||
challenges: [
|
||
"Zero-downtime deployments",
|
||
"Network configuration",
|
||
"Security hardening",
|
||
"Performance optimization",
|
||
],
|
||
lessonsLearned: [
|
||
"Container orchestration",
|
||
"DevOps practices",
|
||
"Infrastructure as Code",
|
||
"Security best practices",
|
||
],
|
||
futureImprovements: [
|
||
"Kubernetes migration",
|
||
"Multi-region setup",
|
||
"Advanced monitoring",
|
||
"Automated backups",
|
||
],
|
||
demoVideo: "",
|
||
screenshots: [],
|
||
colorScheme: "Modern and professional",
|
||
accessibility: true,
|
||
performance: {
|
||
lighthouse: 0,
|
||
bundleSize: "0KB",
|
||
loadTime: "0s",
|
||
},
|
||
analytics: {
|
||
views: 1420,
|
||
likes: 112,
|
||
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,
|
||
},
|
||
},
|
||
{
|
||
title: "Kernel Panic 404 - Interactive Terminal",
|
||
description:
|
||
"An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.",
|
||
content: `# Kernel Panic 404 - Interactive Terminal
|
||
|
||
An immersive, retro-style 404 page that transforms the error experience into an interactive terminal adventure.
|
||
|
||
## 🎯 Purpose
|
||
|
||
Instead of showing a boring "Page Not Found" message, visitors are greeted with a fully functional terminal emulator where they can explore a virtual file system, run commands, and discover hidden Easter eggs.
|
||
|
||
## 🚀 Features
|
||
|
||
- **Interactive Terminal**: Full command-line interface with command history
|
||
- **Virtual File System**: Navigate directories, read files, and explore hidden content
|
||
- **CRT Monitor Effects**: Authentic retro computer terminal aesthetics
|
||
- **Easter Eggs**: Hidden references to pop culture (Stranger Things, Mr. Robot, Hitchhiker's Guide)
|
||
- **Command Autocomplete**: Tab completion for commands and file paths
|
||
- **Audio Synthesis**: Sound effects for key presses and special events
|
||
- **Visual Effects**: Glitch effects, color shifts, and screen distortions
|
||
|
||
## 🛠️ Technologies Used
|
||
|
||
- Next.js 15 (App Router)
|
||
- React (Client Components)
|
||
- TypeScript
|
||
- CSS Animations
|
||
- Web Audio API
|
||
- Framer Motion (for effects)
|
||
|
||
## 💻 Available Commands
|
||
|
||
### System Commands
|
||
- \`ls\`, \`cd\`, \`cat\`, \`grep\`, \`find\`, \`pwd\`
|
||
- \`whoami\`, \`uname\`, \`date\`, \`uptime\`
|
||
- \`clear\`, \`history\`, \`help\`
|
||
|
||
### Easter Egg Commands
|
||
- \`hawkins\` / \`011\` / \`eleven\` - Enter the Upside Down
|
||
- \`fsociety\` / \`elliot\` / \`bonsoir\` - Mr. Robot mode
|
||
- \`42\` / \`answer\` - Deep Thought calculation
|
||
- \`rm -rf /\` - Trigger kernel panic
|
||
|
||
## 🎨 Design Features
|
||
|
||
- **CRT Monitor Aesthetics**: Scanlines, phosphor glow, authentic terminal colors
|
||
- **Retro Typography**: Monospace font with terminal-style appearance
|
||
- **Interactive Elements**: Fully functional command line with history navigation
|
||
- **Visual Effects**: Screen glitches, color shifts, and distortion effects
|
||
|
||
## 🔍 Hidden Content
|
||
|
||
The file system contains hidden clues and references:
|
||
- \`/var/log/syslog\` - Contains hints about Easter eggs
|
||
- \`~/.bash_history\` - Shows previous commands
|
||
- \`~/readme.txt\` - Welcome message and hints
|
||
|
||
## 💡 What I Learned
|
||
|
||
- Building interactive terminal emulators in React
|
||
- Web Audio API for sound synthesis
|
||
- Complex state management for file systems
|
||
- CSS animations for retro effects
|
||
- Creating engaging error pages
|
||
|
||
## 🔮 Future Enhancements
|
||
|
||
- More Easter eggs and hidden commands
|
||
- Additional visual effects
|
||
- Sound theme variations
|
||
- More complex file system structures
|
||
- Network commands (ping, curl, etc.)
|
||
|
||
## 🎮 Try It Out
|
||
|
||
Visit any non-existent page on the site to see the terminal in action. Or click the "404" link in the footer!
|
||
|
||
**Try these commands:**
|
||
- \`ls -la\` - List all files including hidden ones
|
||
- \`cat readme.txt\` - Read the welcome message
|
||
- \`cd /var/log\` - Navigate to system logs
|
||
- \`hawkins\` - Enter the Upside Down mode
|
||
- \`42\` - Get the answer to everything`,
|
||
tags: ["Next.js", "React", "TypeScript", "Terminal", "404", "Interactive", "Easter Eggs"],
|
||
featured: true,
|
||
category: "Web Development",
|
||
date: "2025",
|
||
published: true,
|
||
difficulty: "INTERMEDIATE",
|
||
timeToComplete: "1-2 weeks",
|
||
technologies: ["Next.js", "React", "TypeScript", "CSS", "Web Audio API"],
|
||
challenges: [
|
||
"Terminal emulator implementation",
|
||
"File system state management",
|
||
"Command parsing and execution",
|
||
"Audio synthesis for effects",
|
||
"Retro visual effects with CSS"
|
||
],
|
||
lessonsLearned: [
|
||
"Building interactive UIs",
|
||
"Web Audio API usage",
|
||
"Complex state management",
|
||
"CSS animation techniques",
|
||
"Creating engaging error pages"
|
||
],
|
||
futureImprovements: [
|
||
"More Easter eggs",
|
||
"Additional visual effects",
|
||
"Sound theme variations",
|
||
"Network command simulation"
|
||
],
|
||
demoVideo: "",
|
||
screenshots: [],
|
||
colorScheme: "Retro terminal green on black",
|
||
accessibility: true,
|
||
performance: {
|
||
lighthouse: 0,
|
||
bundleSize: "0KB",
|
||
loadTime: "0s",
|
||
},
|
||
analytics: {
|
||
views: 0,
|
||
likes: 0,
|
||
shares: 0,
|
||
},
|
||
live: "/404",
|
||
github: "",
|
||
},
|
||
];
|
||
|
||
const usedSlugs = new Set<string>();
|
||
for (const project of projects) {
|
||
const baseSlug = slugify(project.title);
|
||
let slug = baseSlug;
|
||
let counter = 2;
|
||
while (usedSlugs.has(slug) || !slug) {
|
||
slug = `${baseSlug || "project"}-${counter++}`;
|
||
}
|
||
usedSlugs.add(slug);
|
||
|
||
await prisma.project.create({
|
||
data: {
|
||
...project,
|
||
slug,
|
||
defaultLocale: "en",
|
||
difficulty: project.difficulty as
|
||
| "BEGINNER"
|
||
| "INTERMEDIATE"
|
||
| "ADVANCED"
|
||
| "EXPERT",
|
||
},
|
||
});
|
||
}
|
||
|
||
console.log(`✅ Created ${projects.length} projects`);
|
||
|
||
// Create some sample analytics data
|
||
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: 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",
|
||
referrer: "https://google.com",
|
||
},
|
||
});
|
||
}
|
||
|
||
// Create user interactions
|
||
for (let j = 0; j < Math.floor(Math.random() * 20) + 10; j++) {
|
||
await prisma.userInteraction.create({
|
||
data: {
|
||
projectId: project.id,
|
||
type: Math.random() > 0.5 ? "LIKE" : "SHARE",
|
||
ip: `192.168.1.${Math.floor(Math.random() * 255)}`,
|
||
userAgent:
|
||
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
console.log("✅ Created sample analytics data");
|
||
|
||
console.log("🎉 Database seeding completed!");
|
||
}
|
||
|
||
main()
|
||
.catch((e) => {
|
||
console.error("❌ Error seeding database:", e);
|
||
process.exit(1);
|
||
})
|
||
.finally(async () => {
|
||
await prisma.$disconnect();
|
||
});
|