All your essential developer tools in one place. Format, test, generate, and manage with ease.
- JSON Formatter & Validator - Format, validate, and minify JSON data with syntax highlighting
- Regex Tester - Test regular expressions with real-time matching and replacement
- UUID Generator - Generate Version 1, Version 4, and Nil UUIDs in bulk
- Base64 Tool - Encode and decode Base64 data with file support
- URL Tool - Encode and decode URLs with component breakdown
- Hash Generator - Generate MD5, SHA-1, SHA-256, and other hash types
- Snippet Manager - Save, organize, and share code snippets with cloud sync
- 🌙 Dark/Light Mode - Toggle between themes with persistence
- 📱 Responsive Design - Works seamlessly on desktop and mobile
- ☁️ Cloud Sync - Save snippets to the cloud with Supabase integration
- 🔗 Share Snippets - Generate public links for collaboration
- 💾 Local Storage - Works offline with local snippet storage
- 🎨 Modern UI - Built with Flowbite design system and Tailwind CSS
- Frontend: React 18, TypeScript, Vite
- Styling: Tailwind CSS v4, Flowbite design system
- UI Components: Radix UI primitives, shadcn/ui
- Backend: Supabase (Auth, Database, Storage)
- Icons: Lucide React
- Notifications: Sonner
- Node.js 18+
- npm or yarn
- Supabase account (optional, for cloud features)
- Clone the repository:
git clone https://github.com/yourusername/devtoolbox.git
cd devtoolbox- Install dependencies:
npm install- Create environment variables (optional, for Supabase features):
cp .env.example .env.local- Add your Supabase credentials to
.env.local:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:3000
npm run buildThe built files will be in the dist directory.
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy!
- Build the project:
npm run build - Upload the
distfolder to Netlify - Configure environment variables
- Set up continuous deployment
The app is a static SPA and can be deployed to any static hosting service like:
- GitHub Pages
- Firebase Hosting
- AWS S3 + CloudFront
- DigitalOcean App Platform
# Supabase Configuration (Optional)
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_keydevtoolbox/
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components
│ │ ├── JsonFormatter.tsx
│ │ ├── RegexTester.tsx
│ │ └── ...
│ ├── services/ # API services
│ ├── utils/ # Utility functions
│ ├── styles/ # Global styles
│ └── App.tsx # Main app component
├── public/ # Static assets
├── supabase/ # Supabase configuration
└── ...
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Alex Martinez
- Website: antid.co
- GitHub: @yourusername
- React – Component-based JavaScript framework you’re migrating your portfolio to.
- Tailwind CSS – Utility-first CSS framework for styling UI quickly without writing custom CSS.
- Vercel – Hosting and deployment platform for static and frontend frameworks (e.g., React, Next.js).
- Environment Variables – Configured via Vercel for securely managing sensitive data like JWT tokens.
- Datadog Code Security – Static analysis tool scanning your codebase for hardcoded secrets, vulnerabilities, and insecure patterns.
- Radix UI for accessible component primitives
- Tailwind CSS for utility-first styling
- Lucide for beautiful icons
- Supabase for backend services
- Flowbite for design inspiration
Made with ❤️ by Alex Martinez