diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 000000000..b8596b3f6 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,266 @@ +# Proxmox VE Helper-Scripts Frontend + +> ๐ **Modern frontend for the Community-Scripts Proxmox VE Helper-Scripts repository** + +A comprehensive, user-friendly interface built with Next.js that provides access to 300+ automation scripts for Proxmox Virtual Environment management. This frontend serves as the official website for the Community-Scripts organization's Proxmox VE Helper-Scripts repository. + + + + + + + +## ๐ Features + +### Core Functionality +- **๐ Script Management**: Browse, search, and filter 300+ Proxmox VE scripts +- **๐ฑ Responsive Design**: Mobile-first approach with modern UI/UX +- **๐ Advanced Search**: Fuzzy search with category filtering +- **๐ Analytics Integration**: Built-in analytics for usage tracking +- **๐ Dark/Light Mode**: Theme switching with system preference detection +- **โก Performance Optimized**: Static site generation for lightning-fast loading + +### Technical Features +- **๐จ Modern UI Components**: Built with Radix UI and shadcn/ui +- **๐ Data Visualization**: Charts and metrics using Chart.js +- **๐ State Management**: React Query for efficient data fetching +- **๐ Type Safety**: Full TypeScript implementation +- **๐ Static Export**: Optimized for GitHub Pages deployment + +## ๐ ๏ธ Tech Stack + +### Frontend Framework +- **[Next.js 15.2.4](https://nextjs.org/)** - React framework with App Router +- **[React 19.0.0](https://react.dev/)** - Latest React with concurrent features +- **[TypeScript 5.8.2](https://www.typescriptlang.org/)** - Type-safe JavaScript + +### Styling & UI +- **[Tailwind CSS 3.4.17](https://tailwindcss.com/)** - Utility-first CSS framework +- **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible UI components +- **[shadcn/ui](https://ui.shadcn.com/)** - Re-usable components built on Radix UI +- **[Framer Motion](https://www.framer.com/motion/)** - Animation library +- **[Lucide React](https://lucide.dev/)** - Icon library + +### Data & State Management +- **[TanStack Query 5.71.1](https://tanstack.com/query)** - Powerful data synchronization +- **[Zod 3.24.2](https://zod.dev/)** - TypeScript-first schema validation +- **[nuqs 2.4.1](https://nuqs.47ng.com/)** - Type-safe search params state manager + +### Development Tools +- **[Vitest 3.1.1](https://vitest.dev/)** - Fast unit testing framework +- **[React Testing Library](https://testing-library.com/react)** - Simple testing utilities +- **[ESLint](https://eslint.org/)** - Code linting and formatting +- **[Prettier](https://prettier.io/)** - Code formatting + +### Additional Libraries +- **[Chart.js](https://www.chartjs.org/)** - Data visualization +- **[Fuse.js](https://fusejs.io/)** - Fuzzy search +- **[date-fns](https://date-fns.org/)** - Date utility library +- **[Next Themes](https://github.com/pacocoursey/next-themes)** - Theme management + +## ๐ Getting Started + +### Prerequisites + +- **Node.js 18+** (recommend using the latest LTS version) +- **npm**, **yarn**, **pnpm**, or **bun** package manager +- **Git** for version control + +### Installation + +1. **Clone the repository** + ```bash + git clone https://github.com/community-scripts/ProxmoxVE.git + cd ProxmoxVE/frontend + ``` + +2. **Install dependencies** + ```bash + # Using npm + npm install + + # Using yarn + yarn install + + # Using pnpm + pnpm install + + # Using bun + bun install + ``` + +3. **Start the development server** + ```bash + npm run dev + # or + yarn dev + # or + pnpm dev + # or + bun dev + ``` + +4. **Open your browser** + + Navigate to [http://localhost:3000](http://localhost:3000) to see the application running. + +### Environment Configuration + +The application uses the following environment variables: + +- `BASE_PATH`: Set to "ProxmoxVE" for GitHub Pages deployment +- Analytics configuration is handled in `src/config/siteConfig.tsx` + +## ๐งช Development + +### Available Scripts + +```bash +# Development +npm run dev # Start development server with Turbopack +npm run build # Build for production +npm run start # Start production server (after build) + +# Code Quality +npm run lint # Run ESLint +npm run typecheck # Run TypeScript type checking +npm run format:write # Format code with Prettier +npm run format:check # Check code formatting + +# Deployment +npm run deploy # Build and deploy to GitHub Pages +``` + +### Development Workflow + +1. **Feature Development** + - Create a new branch for your feature + - Follow the established TypeScript and React patterns + - Use the existing component library (shadcn/ui) + - Ensure responsive design principles + +2. **Code Standards** + - Follow TypeScript strict mode + - Use functional components with hooks + - Implement proper error boundaries + - Write descriptive variable and function names + - Use early returns for better readability + +3. **Styling Guidelines** + - Use Tailwind CSS utility classes + - Follow mobile-first responsive design + - Implement dark/light mode considerations + - Use CSS variables from the design system + +4. **Testing** + - Write unit tests for utility functions + - Test React components with React Testing Library + - Ensure accessibility standards are met + - Run tests before committing + +### Component Development + +The project uses a component-driven development approach: + +```typescript +// Example component structure +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; + +interface ComponentProps { + title: string; + className?: string; +} + +export const Component = ({ title, className }: ComponentProps) => { + return ( +