A Vue 3 web application featuring a collection of interactive mini-applications and AI-powered tools. Built with modern web technologies and deployed on Netlify.
Live Site: playground.dizid.com
This project serves as a personal digital playground for experimenting with various web technologies, third-party APIs, and AI integrations. Each tool is a self-contained mini-application showcasing different capabilities.
Interactive ChatGPT conversation with 6 unique AI personas:
- Bruce - Grumpy, cynical old man who hates people
- Giomoney - Money-obsessed, incomprehensible business person
- Marc - Drunk and stoned personality with hearing problems
- Alun - Wise psychologist and guru
- Marco - Cheerful French speaker with English mixed in
- Nick - Overly positive, only speaks in affirmations
Powered by OpenAI's GPT-4o-mini model via Netlify serverless functions.
Daily drink consumption tracker with context logging:
- Track daily alcohol intake
- Add notes and context for each entry
- Local storage persistence (no backend required)
- Privacy-focused (data stays in your browser)
Fun compatibility score generator:
- Enter two names
- Get a random compatibility percentage (4-10)
- Results stored in browser cookies
Predicts age based on first name:
- Uses agify.io API
- Real-time age estimation
- Fun way to explore name demographics
Random advice generator and search tool:
- Fetch random advice slips
- Search advice by keyword
- Powered by adviceslip.com API
AI-powered joke and humor generation using ChatGPT.
Advanced meme and image manipulation tool with professional editing capabilities:
- Image Upload & Management: Load images, reset, and undo history
- Drawing Tools:
- Configurable brush color and size (1-50px)
- Smooth circular brush strokes
- Real-time feedback
- Face Distortion: Big eyes, tiny mouth effects
- Image Adjustments:
- Brightness (-100 to +100)
- Contrast (-100 to +100)
- Saturation (-100 to +100)
- Color Filters: Invert, Grayscale, Sepia, Blur, Pixelate
- Transform Effects:
- Flip horizontally & vertically
- Rotate (0°, 90°, 180°, 270°)
- Preset Filters (auto-adjust sliders):
- Vintage (sepia-like aged effect)
- Cool (blue-tinted filter)
- Warm (orange-tinted filter)
- Vivid (high saturation colors)
- Font Selection: Arial, Impact, Comic Sans, Georgia, Courier
- Text Customization:
- Font size (10-200px)
- Custom color picker
- Bold toggle
- Outline option with custom outline color
- Dynamic Text Placement: Click canvas to position text
- 100+ Stickers organized in 4 categories:
- Faces: laughing, cool, evil, animal faces
- Objects: party items, food, fire, stars
- Actions: explosions, checkmarks, alerts
- Symbols: hearts, thumbs up, hand gestures
- Search feature for quick emoji discovery
- Adjustable sticker size (40-300px)
- Click to place on canvas
- Zoom levels (50-200%) for detailed editing
- Grid overlay toggle for alignment
- Responsive canvas adapts to image dimensions
- Download Options: PNG or JPEG format
- Clipboard Copy: Quick sharing (Ctrl+C)
- Social Media Integration: Share to Instagram, Twitter, TikTok
- Unique Share Links: Generate shareable URLs with localStorage
- Social Media Presets: Pre-optimized dimensions and formats
- Ctrl+Z / Cmd+Z: Undo last action
- Ctrl+C / Cmd+C: Copy to clipboard
- Ctrl+S / Cmd+S: Download image
- Esc: Cancel current tool
- Collapsible Sections: Organize effects by category
- Tool Status Indicator: Shows current active tool
- Responsive Design: Works on desktop, tablet, and mobile
- Touch-friendly: Optimized touch controls for tablets
- Visual Feedback: Hover effects and smooth animations
- Accessibility: Proper labels and keyboard navigation
- Vue 3 (v3.4.35) - Progressive JavaScript framework
- Vue Router 4 (v4.4.3) - Official router for Vue.js
- Vite (v6.3.3) - Next-generation frontend build tool
- Axios (v1.7.3) - HTTP client for API requests
- Vue3-Image-Editor - Canvas-based image editing and manipulation
- Netlify Functions - Serverless functions for API proxies
- OpenAI API (v4.55.4) - GPT-4o-mini integration
- Node.js - Runtime for serverless functions
- Custom CSS with CSS variables
- Dark mode support
- Font Awesome 4.7 for icons
- Responsive design
/home/marc/DEV/playground/
├── src/
│ ├── views/ # Page components
│ │ ├── HomeView.vue # Landing page
│ │ ├── ChatGPT.vue # Grumpy AI chat interface
│ │ ├── AlcoholHelp.vue # Alcohol tracker
│ │ ├── Love.vue # Love calculator
│ │ ├── Age.vue # Age guesser
│ │ ├── Advice.vue # Advice search
│ │ ├── Humor.vue # Humor generator
│ │ └── ImageEditor.vue # Funny image editor
│ ├── components/ # Reusable components
│ │ ├── FunnyEffects.vue # Face distortion and color effects
│ │ ├── StickerLibrary.vue # Emoji/sticker picker
│ │ └── ExportPanel.vue # Download and share tools
│ ├── router/ # Vue Router configuration
│ ├── assets/ # CSS and static assets
│ ├── main.js # Application entry point
│ └── App.vue # Root component
├── netlify/
│ └── functions/ # Serverless functions
│ ├── openai-proxy.js # ChatGPT proxy
│ ├── openai-proxy-humor.js # Humor proxy
│ └── advice-proxy.js # Advice API proxy
├── dist/ # Build output
├── vite.config.js # Vite configuration
├── netlify.toml # Netlify deployment config
└── package.json # Project dependencies
- Node.js (v14 or higher)
- npm or yarn
- OpenAI API key (for AI features)
- Clone the repository:
git clone <repository-url>
cd playground- Install dependencies:
npm install- Create a
.envfile in the root directory:
VITE_CHATGPT_APIKEY=your_openai_api_key_here
VITE_CHATGPT_ORG=your_org_id_here # Optional- Start the development server:
npm run dev- Open your browser to
http://localhost:5173
npm run dev- Start Vite dev servernpm run build- Build for productionnpm run preview- Preview production build locally
This project is configured for Netlify deployment:
- Connect your Git repository to Netlify
- Set environment variables in Netlify dashboard:
VITE_CHATGPT_APIKEY- Your OpenAI API keyVITE_CHATGPT_ORG- Your OpenAI organization ID (optional)
- Build settings are configured in
netlify.toml - Deploy automatically on push to main branch
[build]
command = "npm run build"
publish = "dist"
functions = "netlify/functions"VITE_CHATGPT_APIKEY- OpenAI API key for ChatGPT features
VITE_CHATGPT_ORG- OpenAI organization ID
- OpenAI GPT-4o-mini - AI chat and humor generation
- agify.io - Age prediction by name
- adviceslip.com - Random advice and search
- API keys are never exposed to the client
- All API calls are proxied through Netlify Functions
- User data stored locally in browser (localStorage/cookies)
- No backend database or user tracking
- New Funny Image Editor with meme creation tools
- Face distortion and color effect filters
- Emoji/sticker library with 100+ funny assets
- Export with multiple formats and social media presets
- Share links functionality
- v0.2: Major refactor of Alcohol Support Tracker
- v0.704: Added Alcohol Support Tracker
- Removed Movie Search feature (Omdb integration)
- Various bug fixes and improvements
This project uses AI-assisted development (Venice.ai) for rapid prototyping and feature implementation. See ai-prompts file for prompts used during development.
This is a personal learning project, but suggestions and feedback are welcome!
This project is open source and available for educational purposes.
- Built with Vue 3 and Vite
- Deployed on Netlify
- AI powered by OpenAI
- Icons by Font Awesome