# Magpie Frontend

A modern web application frontend built with TypeScript, Vite, and Tailwind CSS.

## 🚀 Features

- **Modern Stack**: Built with Vite for fast development and optimized builds
- **TypeScript**: Full type safety and enhanced developer experience
- **Tailwind CSS**: Utility-first CSS framework for rapid UI development
- **ESLint**: Code linting for consistent code quality
- **PostCSS**: Advanced CSS processing

## 🛠️ Tech Stack

- **Build Tool**: Vite
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **Linting**: ESLint
- **CSS Processing**: PostCSS

## 📁 Project Structure

```
magpie-frontend/
├── .bolt/              # Bolt configuration
├── public/             # Static assets
├── src/                # Source code
├── .gitignore          # Git ignore rules
├── eslint.config.js    # ESLint configuration
├── index.html          # Main HTML template
├── package.json        # Dependencies and scripts
├── postcss.config.js   # PostCSS configuration
├── tailwind.config.js  # Tailwind CSS configuration
├── tsconfig.*.json     # TypeScript configurations
└── vite.config.ts      # Vite configuration
```

## 🚀 Getting Started

### Prerequisites

- Node.js (v18 or higher recommended)
- npm or yarn package manager

### Installation

1. Clone the repository:
   ```bash
   git clone https://git.admonitum.com/david/magpie-frontend.git
   cd magpie-frontend
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

### Development

Start the development server:
```bash
npm run dev
```

The application will be available at `http://localhost:5173` (or another port if 5173 is occupied).

### Building for Production

Build the application for production:
```bash
npm run build
```

The built files will be generated in the `dist/` directory.

### Preview Production Build

Preview the production build locally:
```bash
npm run preview
```

## 🧪 Development Tools

### Linting

Run ESLint to check code quality:
```bash
npm run lint
```

Fix linting issues automatically:
```bash
npm run lint:fix
```

### Type Checking

Run TypeScript type checking:
```bash
npm run type-check
```

## 🔧 Configuration

### Tailwind CSS
The project uses Tailwind CSS for styling. Configuration can be found in `tailwind.config.js`.

### TypeScript
TypeScript configuration is split into multiple files:
- `tsconfig.json` - Base configuration
- `tsconfig.app.json` - Application-specific configuration
- `tsconfig.node.json` - Node.js specific configuration

### Vite
Vite configuration is in `vite.config.ts` and includes TypeScript support and other optimizations.

## 📚 Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build |
| `npm run lint` | Run ESLint |
| `npm run type-check` | Run TypeScript type checking |

## 🤝 Contributing

1. Fork the repository
2. Create a 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 [BSD License](LICENSE).

## 🐛 Issues

If you encounter any issues or have suggestions, please [open an issue](https://git.admonitum.com/david/magpie-frontend/issues) on the repository.

---

**Last Updated**: June 2025