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:

   git clone https://git.admonitum.com/david/magpie-frontend.git
   cd magpie-frontend
   

2. Install dependencies:

   npm install
   

Development

Start the development server:

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:

npm run build

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

Preview Production Build

Preview the production build locally:

npm run preview

🧪 Development Tools

Linting

Run ESLint to check code quality:

npm run lint

Fix linting issues automatically:

npm run lint:fix

Type Checking

Run TypeScript type checking:

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.

🐛 Issues

If you encounter any issues or have suggestions, please open an issue on the repository.

---

Last Updated: June 2025