Header Image

DevToolPack

Your tool box dev!

NextJSTypescriptZodShadcnUINeon - Data-baseClerkGoogle cloudDrizzle ORMOpenAI API
/project-devtools.png
DevToolsPack: list of tools

Introduction

DevToolsPack was born from a personal need to organize and save the various developer tools I use daily. I realized that by building a dedicated platform, I could easily catalog these tools and share access with other developers, streamlining both my workflow and community collaboration.

/project-devtools-admin.png
DevToolsPack: admin page

Requirements

The main requirements were: an intuitive page displaying tools as stylish cards (including title, category, and a brief description); two action buttons (read more and visit tool website); and an admin page with a form to add new tools—including name, subtitles, descriptions in both Portuguese and English, AI-assisted translation, and image upload via Google Cloud. The public site, available at devtoolspack.tech, lists all the tools for easy browsing and sharing.

Objective

The project’s primary objective is to help myself and other developers efficiently organize, manage, and share essential tools in one centralized space.

Technologies

type Technologies = {
      NextJs: "framework",
      TypeScript: "for type safety",
      Zod: "validation",
      ShadcnUI: "user interface",
      Neon: "database",
      Clerk: "authentication",
      Google Cloud: "image storage",
      Drizzle ORM: "data handling",
      ChatGPT: "generating translations and descriptions",
    };

Challenges

The greatest challenge was selecting the right database solution for image storage. Having never worked with this requirement before, I researched and chose Google Cloud for its robust free tier, extensive documentation, and helpful AI tools.

/project-devtools-list.png
DevToolsPack: admin page list of tools

Conclusion

Throughout the development of DevToolsPack, I greatly expanded my knowledge of database integration using Neon and Drizzle ORM, and honed my skills in automating translations and descriptions. The platform consists of two main areas: the admin page, where new tools are registered and managed, and the public listing at devtoolspack.tech, where developers can explore and discover them. The project has improved my own workflow and created opportunities for other developers to discover and share useful tools. I believe DevToolsPack can grow with community suggestions for new tools or use cases, making it an ever-more valuable resource.