Gitroom - Libraries

RocksDev Tools

0

A comprehensive collection of developer tools built with modern web technologies. This project aims to provide free, fast, and reliable tools for developers.

Productivity

RocksDev Tools

RocksDev Banner

A comprehensive collection of developer tools built with modern web technologies. This project aims to provide free, fast, and reliable tools for developers.

RocksDev Tools

Buy Me A Coffee

RocksDev Tools - A comprehensive collection of developer tools | Product Hunt

Project Blueprint

This project is built with modern web technologies and best practices:

  • Framework: Next.js 15 with App Router
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Component Library: shadcn/ui
  • Form Validation: Zod
  • Authentication: NextAuth.js
  • Internationalization: next-intl
  • State Management: React Hook Form
  • HTTP Client: Axios
  • Analytics: Vercel Analytics
  • Ads Integration: Google AdSense
  • Code Quality: ESLint, Prettier
  • Git Hooks: Husky
  • CI/CD: GitLab CI
  • Containerization: Docker

Project Structure

.
├── app/
│   └── [locale]/              # Internationalized routes
│       ├── privacy-policy/    # Privacy policy page
│       ├── contact-us/        # Contact us page
│       ├── layout.tsx         # Root layout with providers
│       ├── page.tsx          # Homepage
│       └── tools/            # Developer tools
│           └── json/         # JSON tools
│               ├── formatter/ # JSON formatter tool
│               ├── validator/ # JSON validator tool
│               ├── diff/      # JSON diff tool
│               └── minifier/  # JSON minifier tool
│           └── converters/   # Conversion tools
│               └── base64/   # Base64 converter tool
│               └── json-to-java-bean/ # JSON to Java Bean converter tool
│               └── md2html/ # Markdown to HTML converter tool
│           └── dev/          # Developer tools
│               ├── regex/   # Regex tester tool
│               ├── app-icon-generator/ # App icon generator tool
│               └── ai-sql-generator/ # AI SQL generator tool
│           └── seo/          # SEO tools
│               ├── og-image/ # OG image generator tool
│               └── meta-tags/ # Meta tags generator tool
│           └── text/         # Text tools
│               └── text-formatter/ # Text formatter tool
│
├── components/
│   ├── tools/
│   │   ├── json-formatter # JSON formatter component
│   │   ├── json-validator # JSON validator component
│   │   ├── json-diff      # JSON diff component
│   │   ├── json-minifier  # JSON minifier component
│   │   ├── base64         # Base64 converter component
│   │   ├── regex          # Regex tester component
│   │   ├── og-image       # OG image generator component
│   │   ├── meta-tags      # Meta tags generator component
│   │   ├── text-formatter # Text formatter component
│   │   ├── app-icon-generator # App icon generator component
│   │   ├── ai-sql-generator # AI SQL generator component
│   │   ├── json-to-java-bean # JSON to Java Bean converter component
│   │   └── md2html # Markdown to HTML converter component
│   ├── layouts/
│   │   └── tool-layout   # Common tool layout
│   └── ui/                   # UI Components
│       ├── shadcn         # shadcn components
│
├── lang/                     # i18n translations
│   ├── en/
│   │   ├── common.json
│   │   └── json.json
│   │   └── converters.json
│   │   └── dev.json
│   │   └── seo.json
│   │   └── changelog.json
│   │   └── terms.json
│   ├── zh-CN/
│   │   └── common.json
│   │   └── json.json
│   │   └── converters.json
│   │   └── dev.json
│   │   └── seo.json
│   │   └── changelog.json
│   │   └── terms.json
│   ├── zh-HK/
│   │   └── common.json
│   │   └── json.json
│   │   └── converters.json
│   │   └── dev.json
│   │   └── seo.json
│   │   └── changelog.json
│   │   └── terms.json
├── providers/
│   └── toast-provider.tsx    # Toast notifications provider
│   └── search-provider.tsx    # Search provider
│
├── types/
│   └── next-auth.d.ts       # NextAuth type definitions
│   └── tool.d.ts           # Tool type definitions
│
├── middleware.ts             # Next.js middleware
├── tsconfig.json            # TypeScript configuration
└── .env.example             # Environment variables template

Development Phases

Phase 1: Foundation Setup (2-3 weeks)

Technical Setup

  • Project initialization with Next.js 15
  • Core layout implementation
  • Ad space integration
  • Analytics setup
  • Error tracking
  • Performance monitoring

Core Features (MVP)

  • Responsive layout
  • Ad integration spaces
  • Analytics setup
  • Basic SEO structure
  • Error tracking
  • Performance monitoring

Phase 2: Initial Tools (1-2 weeks per tool)

JSON Tools

  • JSON Formatter
    • Format/Validate functionality
    • Copy/Download options
  • JSON Validator
    • Format/Validate functionality
    • Copy/Download options
  • JSON Diff
    • Compare functionality
    • Export result as JSON/CSV
    • Fix the table display issue
  • JSON Minifier
    • Minify functionality
    • Copy/Download options
  • JSON Parser & Stringify: Convert between JSON strings and JavaScript objects with support for:
    • Parse JSON strings into formatted objects
    • Stringify JavaScript objects with custom indentation
    • Unicode character escaping
    • Validation and error handling

Conversion Tools

  • Base64 Encoder/Decoder
    • Text encoding/decoding
    • File encoding/decoding
    • URL-safe encoding
  • Markdown to HTML
  • JSON to Java Bean
  • CSV to JSON
  • QR Code Generator

Developer Tools

  • Regular Expression Tester
    • Live testing
    • Common patterns library
    • Match highlighting
  • CSS Formatter/Minifier
  • HTML Formatter/Validator
  • Tailwind Config Generator
  • App Icon Generator
  • AI SQL Generator

Phase 3: Traffic Generation Tools (2-3 weeks)

SEO Tools Cluster

  • Meta Tags Generator
  • Robots.txt Generator
  • XML Sitemap Generator
  • SEO Analyzer
  • OG Image Generator (Open Graph Image)
    • Support batch generation
    • Support crop / resize
  • Social Media Image Size Generator

Text Processing Tools

  • Text Formatter
  • Case Converter
  • Word Counter
  • Markdown Editor
  • Random Data Generator

Phase 4: Monetization & Growth (Ongoing)

Monetization

  • Strategic ad placement

Marketing

  • Technical blog posts
  • Twitter/social presence
  • DEV.to articles
  • GitHub readme tools

User Experience

  • Tool suggestions
  • Recently used tools
  • Save preferences (dock)
    • Dock drop out remove tool bug (Not able to remove tool from dock)
  • Share configurations
  • Mobile menu
  • Search tool

Installed Libraries

Core Dependencies

  • next: ^15.0.3
  • react: 19.0.0-rc.1
  • react-dom: 19.0.0-rc.1
  • typescript: ^5.x
  • next-auth: ^4.24.7
  • next-intl: ^3.23.5

UI & Styling

  • @radix-ui/*: UI primitives
  • tailwindcss: ^3.4.14
  • class-variance-authority: ^0.7.1
  • clsx: ^2.1.1
  • tailwind-merge: ^2.3.0
  • lucide-react: ^0.372.0

Form & Validation

  • zod: ^3.23.8
  • react-hook-form: ^7.53.2
  • @hookform/resolvers: ^3.9.1

Development Tools

  • prettier: ^3.2.5
  • eslint: ^8.x
  • husky: ^9.0.11
  • typescript: ^5.x

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

Docker Build

# Build Docker image
docker build -t dev-tools-hub .

# Run Docker container
docker run -p 3000:3000 dev-tools-hub

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_API_URL=your_api_url
NEXT_PUBLIC_GA_ID=your_google_analytics_id
NEXT_PUBLIC_ADSENSE_ID=your_adsense_id
NEXT_PUBLIC_BASE_URL=your_base_url
OPENROUTER_API_KEY=your_openrouter_api_key
# Add other environment variables

Contributing

See CONTRIBUTING.md

Star History

Star History Chart

License

MIT