147 lines
3.4 KiB
Markdown
147 lines
3.4 KiB
Markdown
# 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
|