VSXHub - VSCode Extensions Directory

VSXHub is a modern, comprehensive directory for discovering and exploring Visual Studio Code extensions. Built with Next.js, TypeScript, and Tailwind CSS, it provides a curated collection of the most popular and useful VSCode extensions to supercharge your development workflow.

🌟 Features

• 🔍 Smart Search: Find extensions quickly with intelligent search functionality
• 📂 Category Filtering: Browse extensions organized by categories (Productivity, Themes, Languages, etc.)
• ⭐ Curated Collection: Hand-picked extensions based on popularity, quality, and developer feedback
• 📱 Responsive Design: Fully responsive design that works perfectly on all devices
• 🌙 Dark/Light Mode: Beautiful theme switching with system preference detection
• ⚡ Lightning Fast: Built with Next.js 16 for optimal performance
• 🔗 Direct Links: Direct links to VSCode Marketplace for easy installation
• 📊 Extension Details: Comprehensive information including downloads, ratings, and descriptions

🚀 Live Demo

Visit the live site: VSXHub.top

📸 Screenshots

🛠️ Tech Stack

• Next.js 16 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS v4 - Utility-first CSS framework
• Radix UI - Accessible component primitives
• Directus - Headless CMS for content management
• Lucide React - Beautiful icons
• Biome - Linter and formatter

🚀 Quick Start

Prerequisites

• Node.js 18.0.0 or higher
• pnpm (recommended) or npm/yarn

Installation

1. Clone the repository

   git clone https://github.com/SymphonyIceAttack/vsxhub.git
   cd vsxhub

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Add your Directus configuration:

   NEXT_PUBLIC_DIRECTUS_URL=your_directus_instance_url
   DIRECTUS_ACCESS_TOKEN=your_access_token
   

4. Start the development server

   pnpm dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

vsxhub/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── [category]/        # Dynamic category pages
│   ├── posts/            # Blog pages
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Homepage
│   └── globals.css       # Global styles
├── components/            # Reusable components
│   ├── ui/               # Base UI components
│   ├── blog/             # Blog-specific components
│   ├── extension-card.tsx
│   ├── extension-grid.tsx
│   └── ...
├── lib/                  # Utility libraries
│   ├── directus.ts       # Directus client
│   ├── utils.ts          # General utilities
│   └── category-utils.ts
├── public/               # Static assets
└── ...

🧪 Available Scripts

# Development
pnpm dev                 # Start development server
pnpm build               # Build for production
pnpm start               # Start production server

# Code Quality
pnpm lint                # Run Biome linter
pnpm format              # Format code with Biome
pnpm type-check          # TypeScript type checking

🔧 Configuration

Environment Variables

Create a .env.local file in the root directory:

# Directus Configuration
NEXT_PUBLIC_DIRECTUS_URL=https://your-directus-instance.com
DIRECTUS_ACCESS_TOKEN=your_access_token

# Analytics (Optional)
NEXT_PUBLIC_VERCEL_ANALYTICS_ID=your_analytics_id

Directus Setup

1. Create a Directus instance at directus.io
2. Set up collections for extensions with the following fields:
   • name (string)
   • description (text)
   • category (string)
   • downloads (number)
   • rating (number)
   • image_url (string)
   • marketplace_url (string)
3. Create a static access token
4. Add the credentials to your .env.local

📱 Features Overview

🏠 Homepage

• Hero section with call-to-action
• Search bar with real-time filtering
• Category-based filtering
• Grid of featured extensions
• Responsive design for all devices

🔍 Search & Filter

• Intelligent search across extension names and descriptions
• Category-based filtering system
• Real-time search results
• Mobile-optimized search interface

📄 Extension Details

• Detailed extension information
• Direct links to VSCode Marketplace
• Category tags and metadata
• Responsive card layout

📚 Content Management

• Powered by Directus CMS
• Easy content updates without code changes
• Structured data for extensions
• SEO-optimized content

🎨 Design System

• Component Library: Built on Radix UI primitives
• Styling: Tailwind CSS v4 with custom design tokens
• Icons: Lucide React icon set
• Typography: System fonts with optimized loading
• Color Scheme: Dark/light mode support with automatic detection

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically on every push

Manual Deployment

1. Build the project

   pnpm build

2. Start production server

   pnpm start

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run quality checks (pnpm lint && pnpm format)
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

Code Style

• Linting: Powered by Biome for consistent code style
• Formatting: Automated formatting with Biome
• TypeScript: Strict type checking enabled
• Commit Messages: Follow conventional commit format

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Authors

• SymphoneIceAttack - Initial work - GitHub

🙏 Acknowledgments

• VSCode Marketplace for extension data
• Directus for the excellent headless CMS
• Radix UI for accessible components
• Tailwind Labs for the amazing CSS framework
• Next.js team for the incredible React framework

📊 Stats

📞 Support

• Website: https://vsxhub.top
• Email: hello@vsxhub.top
• GitHub Issues: Report bugs and feature requests

---

Made with ❤️ by developers, for developers