Skip to content

Latest commit

 

History

History
106 lines (76 loc) · 2.87 KB

README.md

File metadata and controls

106 lines (76 loc) · 2.87 KB

Vue Project Visualizer

Vue Project Visualizer is a web tool that generates interactive visualizations for Vue.js, Nuxt.js, and Astro+Vue repositories. It provides insights into the file structure, dependencies, and relationships within your repository, helping developers better understand their project's architecture.

GitHub Repo stars GitHub license

Features

  • Repository Analysis: Validate Vue-based projects automatically.
  • File Structure Visualization: Interactive graph representation of the project hierarchy.
  • File Type Filtering: Highlight only relevant code files.
  • Error Handling: Clear messages for invalid URLs, rate limits, and non-Vue repositories.
  • No External API Requirements: Works without GitHub authentication tokens.

Tech Stack

  • Vue 3: Progressive JavaScript framework.
  • TypeScript: For type safety and maintainability.
  • Pinia: State management.
  • Vue Router: Client-side navigation.
  • D3.js: Interactive visualization library.
  • Tailwind CSS: Utility-first CSS framework.

Project Structure

src/
├── App.vue
├── assets/
|  └── vue.svg
├── components/
|  └── GraphVisualization.vue
├── main.ts
├── style.css
├── types/
|  └── index.ts
├── utils/
|  ├── fileUtils.ts
|  └── github.ts
└── vite-env.d.ts

Getting Started

  1. Clone the repository:

    git clone https://github.com/vue-project-visualizer.git

  2. Install dependencies:

    cd vue-project-visualizer
npm install

  3. Start the development server:

    npm run dev

  4. Build for production:

    npm run build

Features Breakdown

Repository Analysis

  • Validate Vue, Nuxt, and Astro+Vue projects.
  • Uses package.json and file structure for verification.

File Structure Visualization

  • Uses D3.js for dynamic rendering.
  • Provides an interactive force-directed graph.
  • Zoom and pan functionality for navigation.

Error Handling

  • Detects and displays errors for:
    • Invalid repository URLs.
    • Non-Vue repositories.
    • GitHub API rate limits.
    • Network issues.

Contributing

We welcome community contributions! To get started:

  1. Fork the repository.
  2. Create your feature branch.
  3. Commit your changes.
  4. Push to the branch.
  5. Create a Pull Request.

For guidelines, refer to the Contribution Guide.

License

This project is licensed under the MIT License. See the MIT License for details.