https://github.com/swebi/nexus
Nexus is a tool for visualizing and managing complex project structures using flowchart based UIs
https://github.com/swebi/nexus
react react-flow typescript
Last synced: about 1 month ago
JSON representation
Nexus is a tool for visualizing and managing complex project structures using flowchart based UIs
- Host: GitHub
- URL: https://github.com/swebi/nexus
- Owner: Swebi
- License: mit
- Created: 2024-07-27T03:29:54.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-03T17:56:11.000Z (11 months ago)
- Last Synced: 2025-02-17T01:31:47.045Z (4 months ago)
- Topics: react, react-flow, typescript
- Language: JavaScript
- Homepage:
- Size: 2.15 MB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Nexus
Nexus is a powerful solution for visualizing and managing complex project structures. By providing a clear and interactive overview of project components and their relationships, this tool enhances transparency, communication, and decision-making, ultimately leading to more successful and efficient project execution.
## Demo Video
https://youtu.be/8McLDcL-MpQ
Built at FOSS Hack 2024
## Features
- [x] User can give their local folder path to get visualisations.
- [x] User can visualise their repositories using the dynamic flow chart .
- [x] Use of various colours to represent the hierarchy of the directories and the files
- [x] User can change the structure of the code to generate the JSON File.
- [x] The User can specify which all files or folders he wants to omit from the visualisation.
- [x] Use the JSON File thus generated to make flows for the code and for the user to edit accordingly.
🛠Installation Steps:
> [!NOTE]
Run the commands before starting the client and server
```
pnpm i
```
To run only the client
```
pnpm start:client
```
To run only the server
```
pnpm start:server
```
To run both client and server at the same time
```
pnpm dev
```
## Acknowledgements
This project makes use of the following libraries:
- [Biome](https://biomejs.dev/) - A formatter which is better used for linting and formatting purposes
- [React-Flow](https://reactflow.dev/) - A customizable React component for building node-based editors and interactive diagrams
- [DagreJS](https://www.npmjs.com/package/dagrejs)- A Library that generates layout
- [HeadlessUI](https://headlessui.com/) - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
- [FileSaver](https://www.npmjs.com/package/file-saver) - FileSaver.js is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client
- [pnpm](https://pnpm.io/) - Fast Disk Space Efficient Package Manager.
## Future Implementations
- [x] Integration of CI/CD tools like GitHub.
- [x] Integrate LLM for cool explanation and understanding
## Challenges Faced
- [x] Making the recursive function for the generation of nodes.
- [x] Making the service functions for the backend and its clean implementation
- [x] Implementing pnpm workspaces for running client and server together