vision

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 9 Open GitHub ↗

An interactive web application that visualizes your project's dependencies from a package.json file.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vision DV (Dependency Visualizer)

Vision DV is an interactive web application that visualizes your project's dependencies from a package.json file in a beautiful, interconnected graph. It helps developers understand their project's dependency structure through an intuitive visual interface.

![Vision DV Screenshot](https://raw.githubusercontent.com/topboyasante/vision/master/public/shot.png)

## Features

- 📊 Interactive dependency visualization
- 🔄 Real-time graph updates
- 📁 Simple package.json file upload
- 🎨 Visual distinction between dependencies and devDependencies
- 🔍 Zoomable and pannable interface
- 📱 Responsive design

## Tech Stack

- [Remix](https://remix.run/) - Full-stack web framework
- [React Flow](https://reactflow.dev/) - Highly customizable graph visualization
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Lucide Icons](https://lucide.dev/) - Beautiful and consistent icons
- [shadcn/ui](https://ui.shadcn.com/) - Re-usable UI components

## Getting Started

### Prerequisites

- Node.js 18.0.0 or later
- npm or yarn

### Installation

1. Clone the repository:

```bash
git clone https://github.com/yourusername/vision-dv.git
cd vision-dv
```

2. Install dependencies:

```bash
npm install
# or
yarn install
```

3. Start the development server:

```bash
npm run dev
# or
yarn dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## Usage

To visualize your project's dependencies:

1. Locate your project's `package.json` file
2. Click the upload button in Vision DV
3. Select your `package.json` file
4. Click "Visualize Dependencies"

The application will automatically generate an interactive visualization of your project's dependency structure.

## Graph Features

- **Node Types**:

- Root node (your project)
  - Dependency nodes (regular dependencies)
  - DevDependency nodes (development dependencies)

- **Visual Elements**:
  - Animated edges showing connections
  - Color-coded nodes for different dependency types
  - Interactive controls for zoom and pan
  - Automatic layout organization

## Contributing

We welcome contributions! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Acknowledgments

- [Remix](https://remix.run/) for the amazing web framework
- [React Flow](https://reactflow.dev/) for the powerful graph visualization library
- [shadcn/ui](https://ui.shadcn.com/) for the beautiful UI components

## Support

If you encounter any issues or have questions, please [open an issue](https://github.com/yourusername/vision-dv/issues) on GitHub.

---

Made with ❤️ by Nana Kwasi Asante

vision

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README