1.1.0 โข Published 5 months ago
@exlaso/tech-stack-metadata v1.1.0
@exlaso/tech-stack-metadata
A reusable, categorized, and fully-typed metadata structure for tech stacks, including React Icons. Ideal for portfolios, dashboards, and resume sites.
๐ Features
- Categorized technology metadata (languages, frontend, backend, databases, APIs, auth, devops, security, tools)
- Pre-mapped with
react-icons
for UI rendering - Utility functions for searching and filtering metadata
- Fully typed (TypeScript support)
- Lightweight and easy to extend
๐ฆ Installation
npm install @exlaso/tech-stack-metadata
# or
pnpm add @exlaso/tech-stack-metadata
# or
yarn add @exlaso/tech-stack-metadata
๐งฉ Usage
Importing Metadata
import { techMetaData } from "@exlaso/tech-stack-metadata";
// Access all categories
console.log(techMetaData.frontend);
console.log(techMetaData.languages);
// Access all tech metadata as a flat object
console.log(techMetaData.all);
Importing Categories Directly
import { backend, databases, frontend } from "@exlaso/tech-stack-metadata";
Using Utility Functions
import { getAllTechMetadata, getTechMetadata, getTechMetadataByCategory, searchTechMetadata } from "@exlaso/tech-stack-metadata";
// Example: Search for a tech by name
const results = searchTechMetadata("React");
Types
import type { TechMetaData, TechMetaDataKey } from "@exlaso/tech-stack-metadata";
import { IconType } from "@exlaso/tech-stack-metadata";
๐ Structure
Each tech item:
type TechMetaData = {
name: string;
icon: IconType; // from react-icons
url?: string;
// ...other fields
};
All categories are available as named exports and under techMetaData
.
๐ฏ Ideal For
- Developer portfolio websites
- Dashboards showcasing project stacks
- Resume builders
- Personal websites
๐ ๏ธ Built With
- TypeScript
- react-icons
- tsup
๐งช Local Development
pnpm install
pnpm dev # or pnpm build
๐ License
MIT โ Made with โค๏ธ by Vedant Bhavsar