Tool Kit Box

A curated collection of reusable components and utilities built with Next.js and TypeScript, designed to accelerate web development workflows.

---

🚀 Overview

Tool Kit Box serves as a centralized repository for modular components, hooks, and utilities commonly used across various projects. By consolidating these tools, developers can maintain consistency and improve productivity in their development processes.

---

🛠 Tech Stack

• Framework: Next.js
• Language: TypeScript
• Styling: vanilla-extract – zero-runtime, type-safe CSS
• State Management: Zustand – minimal, scalable global state
• Package Manager: Yarn
• Linting & Formatting: ESLint, Prettier
• Commit Hooks: Husky

---

📦 Installation

1. Clone the repository:

   git clone https://github.com/coyo-hm/tool-kit-box.git
   cd tool-kit-box

2. Install dependencies:

   yarn install

📁 Project Structure

tool-kit-box/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router (pages, layouts, etc.)
│ ├── components/ # Reusable UI components
│ ├── constants/ # Reusable constants
│ ├── hooks/ # Custom React hooks
│ ├── i18n/ # Next-intl config
│ ├── providers/ # Next-intl config
│ ├── stores/ # Zustand global state stores
│ ├── utils/ # Utility functions
│ └── styles/ # Global styles & vanilla-extract config
├── eslint.config.mjs
├── tsconfig.json
└── next.config.ts

🌐 Live Demo

Check out the live application at: tool-kit-box.vercel.app

📬 Contributing

Feel free to fork the repo and submit pull requests for any improvements or new tools/components you'd like to add.

If you encounter any bugs, have feature requests, or want to discuss improvements, please open an issue — your feedback is always welcome!