# Vultr DNS Manager

<div align="center">
  
![Vultr DNS Manager](https://img.shields.io/badge/Vultr-DNS%20Manager-007BFC?style=for-the-badge)
[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.5-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
[![Next.js](https://img.shields.io/badge/Next.js-13.5.1-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.3.3-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com/)
[![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)

</div>

A modern, user-friendly interface for managing DNS records on Vultr's platform. Built with Next.js, TypeScript, and Tailwind CSS.

## ✨ Features

- 🔐 Secure API key management
- 🌐 Domain listing and management
- 📝 DNS record creation, editing, and deletion
- 🔄 Real-time updates
- 🌙 Dark/light theme support
- 📱 Responsive design for all devices

## 🖥️ Screenshots

<div align="center">
  <em>Screenshots will be added here</em>
</div>

## 🚀 Getting Started

### Prerequisites

- Node.js 16.x or later
- npm or yarn

### Installation

1. Clone the repository:
   ```bash
   git clone https://github.com/yourusername/vultr-dns-manager.git
   cd vultr-dns-manager
   ```

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.

### Docker Deployment

```bash
# Build the Docker image
docker build -t vultr-dns-manager .

# Run the container
docker run -p 3000:3000 vultr-dns-manager
```

## 🔧 Usage

1. Enter your Vultr API key on the welcome screen
2. Select a domain from the sidebar
3. Manage DNS records in the main panel
4. View API logs for troubleshooting

## 🏗️ Architecture

The application is built with a modern React stack:

- **Next.js**: For server-side rendering and API routes
- **TypeScript**: For type safety and better developer experience
- **Tailwind CSS**: For styling
- **shadcn/ui**: For UI components
- **React Hook Form**: For form handling
- **Zod**: For validation

## 📦 Project Structure

```
vultr-dns-manager/
├── app/                  # Next.js app directory
│   ├── api/              # API routes
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── components/           # React components
│   ├── ui/               # UI components
│   └── ...               # Feature components
├── lib/                  # Utility functions
├── public/               # Static assets
├── styles/               # Global styles
└── ...                   # Config files
```

## 🛠️ Development

### Commands

- `npm run dev`: Start development server
- `npm run build`: Build for production
- `npm run start`: Start production server
- `npm run lint`: Run ESLint

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

## 📄 License

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

## 🙏 Acknowledgements

- [Vultr API](https://www.vultr.com/api/)
- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [shadcn/ui](https://ui.shadcn.com/)