CodePVG Frontend

A modern, responsive frontend application built with Next.js 15, TypeScript, and Tailwind CSS. This project features a comprehensive UI component library powered by Radix UI and shadcn/ui components.

🚀 Features

• Next.js 15 - Latest React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible, unstyled UI components
• shadcn/ui - Beautiful, reusable components
• React Hook Form - Performant forms with easy validation
• Zod - TypeScript-first schema validation
• Lucide React - Beautiful & consistent icons
• Dark/Light Theme - Theme switching with next-themes
• Responsive Design - Mobile-first approach

🛠️ Tech Stack

• Framework: Next.js 15.2.4
• Language: TypeScript 5
• Styling: Tailwind CSS 4.1.9
• UI Components: Radix UI + shadcn/ui
• Form Handling: React Hook Form + Zod validation
• Icons: Lucide React
• Charts: Recharts
• Animations: Tailwind CSS Animate

📦 Installation

1. Clone the repository:

   git clone https://github.com/CrazAr374/CodePVG_Frontend.git
   cd CodePVG_Frontend

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser: Navigate to http://localhost:3000 to see the application.

🏗️ Project Structure

Frontend/
├── app/                    # Next.js App Router pages
├── components/             # Reusable UI components
├── hooks/                  # Custom React hooks
├── lib/                    # Utility functions and configurations
├── public/                 # Static assets
├── styles/                 # Global styles
├── components.json         # shadcn/ui configuration
├── next.config.mjs         # Next.js configuration
├── tailwind.config.js      # Tailwind CSS configuration
└── tsconfig.json          # TypeScript configuration

🎨 UI Components

This project includes a comprehensive set of pre-built components:

• Layout: Navigation, Sidebar, Header, Footer
• Forms: Input, Select, Checkbox, Radio, Switch
• Feedback: Toast, Alert Dialog, Progress
• Data Display: Tables, Cards, Avatars, Badges
• Navigation: Tabs, Accordion, Dropdown Menu
• Overlays: Dialog, Popover, Tooltip, Hover Card

📱 Available Scripts

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

🎯 Development Guidelines

Code Style

• Use TypeScript for all new components
• Follow the established component structure
• Use Tailwind CSS for styling
• Implement proper error handling

Component Development

• Create reusable components in the components/ directory
• Use proper TypeScript interfaces for props
• Follow the shadcn/ui component patterns
• Ensure components are accessible

Form Handling

• Use React Hook Form for form management
• Implement Zod schemas for validation
• Provide clear error messages

🌟 Key Dependencies

Package	Version	Purpose
Next.js	15.2.4	React framework
React	19	UI library
TypeScript	5	Type safety
Tailwind CSS	4.1.9	Styling
Radix UI	Various	Accessible components
React Hook Form	7.60.0	Form management
Zod	3.25.67	Schema validation
Lucide React	0.454.0	Icons

🚀 Deployment

This project can be deployed on various platforms:

• Vercel (Recommended for Next.js)
• Netlify
• AWS Amplify
• Railway
• DigitalOcean App Platform

🤝 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 private and proprietary.

👨‍💻 Author

CrazAr374

• GitHub: @CrazAr374

---

Built with ❤️ using Next.js and modern web technologies.

Code_PVG

Code_PVG