From 2c053067062bc367f8232d1de198f3cc7ba70d88 Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Fri, 14 Mar 2025 14:34:47 -0600
Subject: [PATCH] update README

---
 README.md | 122 ++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 104 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index a9de5f6..7193575 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,111 @@
-Tailscale ACL Editor - a specialized web application that helps users create, edit, and manage access control lists for Tailscale networks. 
+# Tailscale ACL Editor
 
-Here's what it includes:
-Core Functionality
+<div align="center">
+  <img src="https://img.shields.io/badge/React-18.3.1-blue?logo=react" alt="React 18.3.1" />
+  <img src="https://img.shields.io/badge/TypeScript-5.5.3-blue?logo=typescript" alt="TypeScript 5.5.3" />
+  <img src="https://img.shields.io/badge/Vite-5.4.2-blue?logo=vite" alt="Vite 5.4.2" />
+  <img src="https://img.shields.io/badge/TailwindCSS-3.4.1-blue?logo=tailwindcss" alt="TailwindCSS 3.4.1" />
+  <img src="https://img.shields.io/badge/Docker-Ready-blue?logo=docker" alt="Docker Ready" />
+  <img src="https://img.shields.io/badge/License-MIT-green" alt="MIT License" />
+</div>
 
-    Rule-based ACL Editor: Create and manage ACL rules with sources, destinations, and protocols
-    JSON Import/Export: Import existing ACL configurations and export your changes
-    Real-time Preview: See the JSON representation of your ACL rules as you build them
+<p align="center">
+  <img src="https://tailscale.com/files/tailscale-logo-wordmark-horizontal-black.svg" width="400" alt="Tailscale Logo" />
+</p>
 
-Technical Features
+A modern, user-friendly editor for creating and managing [Tailscale Access Control Lists (ACLs)](https://tailscale.com/kb/1018/acls). This tool simplifies the process of defining network access policies for your Tailnet without having to manually edit complex JSON structures.
 
-    Source & Destination Selectors: Specialized components for defining network sources and destinations
-    Protocol Selection: Support for various network protocols (TCP, UDP, ICMP, etc.)
-    Validation: Comprehensive validation for IP addresses, CIDR notation, ports, and other values
-    Responsive UI: Clean, dark-themed interface that resembles Tailscale's design language
+## ✨ Features
 
-Implementation Details
+- 🔒 Create and manage ACL rules with an intuitive UI
+- 🌐 Support for all Tailscale source and destination types
+- 📋 Import existing ACL configurations
+- 💾 Export your ACLs as properly formatted JSON
+- 🔍 Real-time JSON preview
+- ✅ Comprehensive validation for IPs, CIDRs, ports, and more
+- 🎨 Clean, responsive dark-themed interface
+- 🐳 Docker support for easy deployment
 
-    Modern Stack: Built with React, TypeScript, and Vite for a fast development experience
-    Tailwind CSS: Styled with Tailwind for consistent, responsive design
-    Specialized Validation: Uses libraries like ip-address and is-cidr for accurate network validation
-    Containerized: Docker configuration for easy deployment and distribution
-    Type Safety: Comprehensive TypeScript definitions for ACL structures
+## 🖥️ Screenshots
+
+<div align="center">
+  <i>Screenshots coming soon</i>
+</div>
+
+## 🚀 Quick Start
+
+### Using Docker
+
+```bash
+# Pull and run the Docker image
+docker-compose up -d
+
+# Access the editor at http://localhost:8080
+```
+
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/tailscale-acl-editor.git
+cd tailscale-acl-editor
+
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+## 🛠️ Technology Stack
+
+- **Frontend Framework**: React with TypeScript
+- **Build Tool**: Vite
+- **Styling**: TailwindCSS
+- **Icons**: Lucide React
+- **Validation**: ip-address, is-cidr libraries
+- **Deployment**: Docker with Nginx
+
+## 📖 Usage Guide
+
+1. **Adding Rules**: Click "Add Rule" to create a new ACL rule
+2. **Defining Sources**: Add users, groups, IPs, or other source types
+3. **Setting Destinations**: Specify destination entities and port requirements
+4. **Importing Existing ACLs**: Use the "Import ACL" button to load your current configuration
+5. **Exporting**: Click "Download" to save your ACL as a JSON file ready for Tailscale
+
+## 🧩 ACL Structure
+
+The editor supports the full Tailscale ACL structure:
+
+```typescript
+interface ACLPolicy {
+  acls: ACLRule[];
+}
+
+interface ACLRule {
+  action: 'accept';
+  src: SourceEntry[];
+  proto?: Protocol;
+  dst: DestinationEntry[];
+}
+```
+
+## 🔗 Resources
+
+- [Tailscale ACL Documentation](https://tailscale.com/kb/1018/acls)
+- [Video Tutorial](https://youtu.be/Jn8_Sh4r8d4)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## 🙏 Acknowledgements
+
+- [Tailscale](https://tailscale.com/) for their excellent networking tool and documentation
+- All the open-source libraries that made this project possible
 
-The application provides a user-friendly interface for what would otherwise be a complex JSON editing task, making it easier for network administrators to define and maintain their Tailscale network access policies.