Skip to content

Commit 5b38584

Browse files
committed
Update README.md
1 parent 7c32266 commit 5b38584

File tree

4 files changed

+113
-39
lines changed

4 files changed

+113
-39
lines changed

README.md

Lines changed: 113 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,139 @@
1-
# RepoTree
1+
# RepoTree 🌳
22

3-
A simple tool to visualize GitHub repositories. It helps developers easily explore and understand their project structures.
3+
> A tool to visualize GitHub and GitLab repositories with clean ASCII trees. Perfect for documentation, sharing, and understanding project structures.
44
5-
## Features
5+
[![Live Demo](https://img.shields.io/badge/🌐_Live_Demo-RepoTree-blue?style=for-the-badge)](https://ascii-repotree.vercel.app/)
6+
[![MIT License](https://img.shields.io/badge/📄_License-MIT-green?style=for-the-badge)](LICENSE)
7+
[![GitHub Stars](https://img.shields.io/github/stars/coder-ralph/RepoTree?style=for-the-badge)](https://github.com/coder-ralph/RepoTree)
68

7-
- Clean ASCII view of GitHub repository structure.
8-
- Interactive tree view for easy navigation.
9-
- Download options in various formats.
10-
- Real-time search to find files or folders quickly.
11-
- Dark and Light themes for better readability.
12-
- Easy to use and no installation required.
9+
## 🚀 Features
1310

14-
## Usage
11+
* 👀 **Instant Visualization**: Convert any GitHub & GitLab repository structure into a clean ASCII tree
12+
* 🎯 **Interactive Tree View**: Expand or collapse folders for better navigation and exploration
13+
* 📊 **Repository Analysis**: Visualize file type distribution and language breakdown with interactive graphs
14+
* 🤖 **AI-Powered Feedback** *(Currently Disabled)*: Get intelligent suggestions and analysis for your repository structure
15+
* 💾 **Multiple Export Formats**: Download trees as README.md, .txt, .json, or .html files
16+
* 🔍 **Real-time Search**: Quickly filter and highlight specific files or directories
17+
* 🎨 **Dual View Modes**: Switch between ASCII and Interactive views for enhanced user experience
18+
* 🌙 **Dark & Light Themes**: Comfortable viewing in any lighting condition
19+
***Syntax Highlighting**: Enhanced readability with beautiful code highlighting
20+
* 📋 **One-Click Copy**: Copy directory structure to clipboard
21+
* 💾 **Persistent State**: Remembers your last repository URL between sessions
22+
* 🔒 **Private Repository Support**: Access private repos with personal access tokens
23+
* 🚀 **Zero Installation**: Works directly in your browser - no setup required
1524

16-
1. Visit [RepoTree](https://ascii-repotree.vercel.app/).
17-
2. Enter the GitHub repository URL.
18-
3. Click on the `Generate` button.
19-
4. Explore the repository structure.
20-
5. Download the tree in various formats.
25+
## 🖥 Viewing Modes
2126

22-
### Download Options
27+
![ASCII Mode](ascii-view.png)
2328

24-
- **README**: Download the tree in README format.
25-
- **Text**: Download the tree in text format.
26-
- **JSON**: Download the tree in JSON format.
27-
- **HTML**: Download the tree in HTML format.
29+
![Interactive Mode](interactive-view.png)
2830

29-
## Development
31+
## ⚙️ Tech Stack
3032

31-
1. Clone the repository:
33+
RepoTree is built with modern technologies for optimal performance and user experience:
3234

33-
```bash
34-
git clone
35-
```
35+
| Technology | Purpose |
36+
|------------|---------|
37+
| **Next.js** | React framework for server-side rendering and routing |
38+
| **TypeScript** | Type-safe development and better code quality |
39+
| **Tailwind CSS** | Utility-first CSS framework for rapid UI development |
40+
| **Shadcn UI** | Beautiful, accessible component library |
41+
| **Octokit** | Official GitHub API client for repository data |
42+
| **Recharts** | Composable charting library for data visualization |
43+
| **Framer Motion** | Smooth animations and transitions |
44+
| **Radix UI** | Low-level UI primitives for accessibility |
45+
| **Lucide React** | Beautiful, customizable icon set |
3646

37-
2. Install the dependencies:
47+
## 🚦 Quick Start
3848

39-
```bash
40-
npm install
41-
```
49+
### 1. **Online Usage** (Recommended)
50+
Simply visit [RepoTree](https://ascii-repotree.vercel.app/) and start generating trees instantly!
4251

43-
3. Run the development server:
52+
### 2. **Self-hosting / Local Development**
4453

4554
```bash
55+
# Clone the repository
56+
git clone https://github.com/coder-ralph/RepoTree.git
57+
58+
# Navigate to project directory
59+
cd RepoTree
60+
61+
# Install dependencies
62+
npm install
63+
64+
# Start development server
4665
npm run dev
66+
67+
# Open your browser
68+
open http://localhost:3000
4769
```
4870

49-
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
71+
## 📖 Usage Guide
72+
73+
### Basic Usage
74+
1. 🌐 Visit [RepoTree](https://ascii-repotree.vercel.app/)
75+
2. 📝 Paste your GitHub or GitLab repository URL
76+
3. 🔘 Click the **Generate** button
77+
4. 🎉 Explore your repository structure!
78+
5. 💾 Download in your preferred format
79+
80+
### 🔒 Accessing Private Repositories
81+
82+
For private repositories, you'll need to enable private access:
83+
84+
1. **Click "Enable Private Repos"** at the top of the input field
85+
2. **Follow the setup instructions**:
86+
- **GitHub**: Create a personal access token with `repo` scope
87+
- **GitLab**: Create a token with `read_repository` scope
88+
3. **Enter your token** - it's stored locally and never shared
89+
4. **Generate trees** from your private repositories securely!
90+
91+
### 📊 Understanding Repository Analysis
92+
93+
RepoTree provides insightful visualizations:
94+
- **File Type Distribution**: See what types of files make up your project
95+
- **Language Breakdown**: Understand the programming languages used
96+
97+
![Repository Analysis](repository-analysis.png)
98+
99+
- **Repository Structure** *(Currently Disabled)*: Get AI-powered feedback on your project organization
100+
101+
## 🎯 Use Cases
102+
103+
- 📝 **Documentation**: Include clean directory trees in your README files
104+
- 🎓 **Education**: Help students understand project structures
105+
- 💼 **Code Reviews**: Quickly grasp repository organization
106+
- 🔄 **Migration Planning**: Visualize before restructuring projects
107+
- 📊 **Project Analysis**: Get insights into codebase composition
108+
109+
## 🤔 About
110+
111+
I created RepoTree to help developers easily visualize and share repository structures.
112+
113+
A year ago, I saw a Stack Overflow question about generating directory trees from GitHub repositories, which inspired me to build this tool.
114+
115+
**[Original Stack Overflow Question](https://stackoverflow.com/questions/75522166/how-do-i-get-the-directory-tree-structure-from-a-github-repository-link)** 📚
116+
117+
## 🤝 Contributing
118+
119+
Contributions are welcome! Report issues [here](https://github.com/coder-ralph/RepoTree/issues) or submit a Pull Request [here](https://github.com/coder-ralph/RepoTree/pulls).
50120

51-
## Contributing
121+
## 🫡 Acknowledgements
52122

53-
Contributions are welcome! Report issues [here](https://github.com/coder-ralph/RepoTree/issues) or submit a pull request [here](https://github.com/coder-ralph/RepoTree/pulls).
123+
This project was inspired by Nathan Friend's [Tree Online](https://gitlab.com/nfriend/tree-online) and [ASCII Tree Generator](https://ascii-tree-generator.com/). I used these tools to create documentation for my project before.
54124

55-
## License
125+
## ⭐ Support
56126

57-
This project is licensed under the MIT License. See the [LICENSE](https://github.com/coder-ralph/RepoTree/blob/main/LICENSE) file for details.
127+
If RepoTree has helped you, please consider:
128+
-**Starring this repository** to show your support
129+
- 🐦 **Sharing it** with other developers
58130

59-
## Acknowledgements
131+
---
60132

61-
This project was inspired by Nathan Friend's [Tree Online](https://gitlab.com/nfriend/tree-online) and [ASCII Tree Generator](https://ascii-tree-generator.com/).
133+
<div align="center">
134+
135+
**[🌐 Try RepoTree Now](https://ascii-repotree.vercel.app/)****[📖 Documentation](https://ascii-repotree.vercel.app/docs)**
62136

63-
## Support
137+
Made with ☕ by [coder-ralph](https://github.com/coder-ralph)
64138

65-
⭐ If you find this project helpful, give it a star!
139+
</div>

ascii-view.png

39.6 KB
Loading

interactive-view.png

41.8 KB
Loading

repository-analysis.png

166 KB
Loading

0 commit comments

Comments
 (0)