TechStack Canvas 🎨

Create stunning social media banners showcasing your tech stack with an intuitive drag-and-drop canvas interface.

Best experienced on Desktop

💡 Inspiration

This project was inspired by Manu Arora's tweet about showcasing tech stacks visually. We've transformed that inspiration into a fully functional drag-and-drop canvas for creating professional social media banners.

✨ Features

🎨 Drag & Drop Canvas: Intuitive interface for arranging tech icons on realistic device mockups
📱 Device Templates: Beautiful tablet mockup with precise scaling and positioning
🔧 26+ Tech Icons: Comprehensive library covering AI, development, design, and productivity tools
📤 Social Media Export: One-click export to PNG optimized for Twitter (1500×500) and LinkedIn (1584×396)
🌙 Modern UI: Clean, dark-themed interface with professional styling
↩️ Undo/Redo: Full history management with keyboard shortcuts (Ctrl/Cmd+Z/Y)
🔍 Smart Search: Real-time icon filtering with availability tracking
👆 Touch Support: Native touch interactions for mobile and tablet users
⚡ High Performance: Smooth interactions with efficient re-rendering

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn

Installation

# Clone the repository
git clone https://github.com/jatin33/tech-toolkit-sm-banner.git
cd tech-toolkit-sm-banner

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:5173

Building for Production

# Build the project
npm run build

# Preview the production build
npm run preview

🎯 How to Use

Browse Icons: Search through 26+ tech tool icons in the left sidebar
Drag & Drop: Drag icons from the sidebar onto the tablet mockup canvas
Arrange: Reposition icons within the grid by dragging them around
Replace: Drop new icons on existing positions to replace them instantly
Undo/Redo: Use Ctrl+Z/Y (Cmd+Z/Y on Mac) or footer buttons for history navigation
Export: Click Twitter or LinkedIn buttons to download your professional banner

🔧 Tech Stack

Frontend: React 19.1.0 + TypeScript 5.8.3
Build Tool: Vite 7.0.4 (Lightning fast!)
Styling: Tailwind CSS 4.1.11 with custom design tokens
Icons: High-quality SVG assets for crisp rendering
Export: HTML5 Canvas API for high-quality image generation
State Management: React hooks with useReducer pattern for complex state

📁 Project Structure

src/
├── components/
│   ├── Canvas/           # Main canvas and grid components
│   │   ├── DropZoneGrid.tsx
│   │   ├── GridCell.tsx
│   │   ├── tabletTemplates.ts
│   │   └── TabletPlaceholder.tsx
│   ├── Footer/           # Export and undo/redo controls
│   │   ├── Footer.tsx
│   │   ├── DownloadTwitter.tsx
│   │   └── DownloadLinkedIn.tsx
│   ├── Preview/          # Canvas wrapper component
│   │   └── Canvas.tsx
│   └── ThemeProvider.tsx # Theme management
├── hooks/
│   ├── useIconHistory.ts # Undo/redo functionality
│   └── useTheme.ts      # Theme state management
├── utils/
│   ├── canvasExport.ts  # Image export functionality
│   ├── iconActions.ts   # Icon manipulation actions
│   └── iconReducer.ts   # State management reducer
└── App.tsx              # Main application component

🎨 Available Tech Icons

AI & ML Tools

OpenAI, Claude, Gemini, Grok, Mistral, Perplexity
Hugging Face, Ollama, OpenRouter, DeepSeek

Development Tools

GitHub, GitHub Copilot, Cursor, Cline, Replit
AWS, Cloudflare, n8n, Make

Design & Productivity

Figma, Notion, NotebookLM, v0, Midjourney, ElevenLabs

🖼️ Export Formats

Twitter: 1500×500px (3:1 aspect ratio) - Perfect for Twitter headers
LinkedIn: 1584×396px (4:1 aspect ratio) - Optimized for LinkedIn banners
Format: PNG with 2x scaling for crisp, high-quality output
Background: Solid backgrounds optimized for social media platforms

⌨️ Keyboard Shortcuts

Ctrl+Z / Cmd+Z: Undo last action
Ctrl+Y / Cmd+Y: Redo last action
Ctrl+Shift+Z / Cmd+Shift+Z: Alternative redo

🎯 Key Features Deep Dive

Advanced Drag & Drop System

Multi-source dragging: Icons from sidebar + repositioning within grid
Smart replacements: Drop icons on occupied cells to replace them instantly
Visual feedback: Hover states, drag indicators, and smooth animations
Touch support: Works seamlessly on touch devices

Intelligent State Management

History tracking: 50-action undo/redo buffer with command pattern
Real-time updates: Sidebar automatically updates with available icons
Type safety: Full TypeScript coverage for bulletproof state operations

Professional Export System

Canvas rendering: HTML5 Canvas for pixel-perfect output
Platform optimization: Different dimensions optimized for each social platform
Error handling: Comprehensive error management for image operations
Automatic download: Files save with descriptive, platform-specific names

🔄 Development Workflow

Available Scripts

npm run dev      # Start development server with HMR
npm run build    # Build for production with optimizations
npm run preview  # Preview production build locally
npm run lint     # Run ESLint for code quality checks

Code Quality Standards

TypeScript: Strict type checking for reliability
ESLint: React and TypeScript specific linting rules
Component Architecture: Modular, reusable, and maintainable components
Performance: Optimized re-rendering with React.memo and useCallback

🚀 Deployment

The project is configured for seamless deployment:

Vercel (Recommended)

npm i -g vercel && vercel

Netlify

npm run build
# Deploy the dist/ folder to Netlify

AWS Amplify (Current)

Already deployed at: https://main.d1of3vfbkkw17d.amplifyapp.com/

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 Future Enhancements

Additional device templates (iPhone, MacBook, desktop setups)
Custom icon upload functionality
Save/load project configurations
More export formats (JPG, SVG, PDF)
Social media integration for direct sharing
Batch export multiple formats simultaneously
Custom text/branding overlay options
Mobile-optimized interface improvements

💫 Feedback & Support

Love this project? 😀

⭐ Star the repository
🐛 Report bugs
💡 Request features
🎥 Share your creations on social media

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Inspiration: Manu Arora (@mannupaaji) for the original tech stack visualization idea
Tech Icons: All tech company logos and icons are property of their respective owners
Community: Built with ❤️ for builders who want to showcase their tech stack beautifully

Made with ❤️ for the tech community

🚀 Live Demo • 🎥 Video Demo • 🐛 Report Bug • 💡 Request Feature

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
memory-bank		memory-bank
public		public
src		src
.clinerules		.clinerules
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

jatin33/tech-toolkit-sm-banner

Folders and files

Latest commit

History

Repository files navigation