DevToolbox

• 

  Home page

• 

  UI page

🚀 About the Project

💡 Inspiration

As a frontend developer, I often found myself jumping between multiple websites—whether it was for finding the right icons, fonts, color palettes, or UI kits. This repeated context switching was not only time-consuming but also distracting. I wanted to create a central dashboard where developers like me could discover essential frontend tools quickly and visually, all in one place. That’s how this project was born.

⸻

🛠️ What I Built

This is a Frontend Developer Toolkit Dashboard, a curated collection of the most useful websites and tools for modern frontend development. It features: • 🧩 UI Libraries (like Aceternity UI, ShadCN) • 🎨 CSS Frameworks (TailwindCSS) • 🔤 Font & Typography tools (Google Fonts) • 🖼️ Image & Icon platforms (Unsplash, Icons8) • 🎨 Color Palette generators (Coolors, Huemint) • ⚙️ Design collaboration platforms (Figma, Framer) • ⚡ Bonus tools (Vercel, Netlify, Postman, Cloudflare, etc.)

Each tool is showcased with a preview, description, and direct link, laid out in a clean and modern UI.

⸻

🔧 How I Built It • Frontend: React.js + TypeScript • Styling: Tailwind CSS • Animations: Custom scroll-based SVG animation + Framer Motion • Component System: ShadCN UI • Icons & Assets: React Icons, local SVGs, and image optimization • Deployment: Vercel

I also implemented a smooth horizontal scrolling logo strip using a custom InfiniteMovingCards component to showcase all the tools interactively.

⸻

📚 What I Learned • Deepened my understanding of React + TypeScript component typing • Built reusable custom UI components with better accessibility • Learned how to create performant horizontal scrollers using useRef and DOM manipulation • Improved animation techniques with Tailwind and React

⸻

🧱 Challenges Faced • TypeScript Errors: Handling JSX elements in typed arrays caused initial friction, especially with ReactNode vs string types. • Overflow & Responsiveness: Keeping layout responsive across devices while preserving design consistency took iterative tweaking. • Ref Handling: Working with useRef to control DOM animation logic without causing memory leaks was tricky but rewarding. • Balancing Design and Performance: Loading multiple iframes, logos, and assets had to be optimized for a good user experience.

Built With

• react
• tailwind
• typescript