create-metaborong-next-app

Metaborong Next.js Template

A modern, production-ready Next.js template with TypeScript, Tailwind CSS, ESLint, Prettier, and Husky pre-configured for rapid development.

✨ Features

• ⚡ Next.js 15 with App Router
• 🔷 TypeScript for type safety
• 🎨 Tailwind CSS 4 for styling
• 📏 ESLint for code linting
• 💅 Prettier for code formatting
• 🐕 Husky for Git hooks
• 🚀 Pre-configured Git hooks for code quality
• 📱 Responsive design ready
• 🔧 Development tools pre-configured

🚀 Quick Start

Using npx (Recommended)

npx create-metaborong-next-app my-app
cd my-app
npm run dev

Manual Installation

git clone https://github.com/0xArchitect/metaborong-next-template.git my-app
cd my-app
npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

📁 Project Structure

├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── globals.css     # Global styles
│   │   ├── layout.tsx      # Root layout
│   │   └── page.tsx        # Home page
│   ├── components/         # Reusable components
│   ├── hooks/             # Custom React hooks
│   ├── utils/             # Utility functions
│   ├── constants/         # App constants
│   └── state/             # State management
├── public/                # Static assets
├── .husky/               # Git hooks
├── .prettierrc           # Prettier configuration
├── .prettierignore       # Prettier ignore rules
├── eslint.config.mjs     # ESLint configuration
├── tailwind.config.js    # Tailwind CSS configuration
└── tsconfig.json         # TypeScript configuration

🛠️ Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint
npm run format       # Format code with Prettier
npm run format:check # Check code formatting

🎯 Code Quality & Git Hooks

This template uses Husky for Git hooks to ensure code quality:

Pre-commit Hook

• 🎨 Runs Prettier to format all code files
• 🔍 Runs ESLint to check for code quality issues
• 🏗️ Builds the application to ensure it compiles successfully
• ❌ Blocks commit if any step fails

Pre-push Hook

• 🚀 Simple notification when pushing to repository

🎨 Customization

Tailwind CSS

The template comes with Tailwind CSS 4 pre-configured. You can customize the design system by editing the Tailwind configuration.

ESLint & Prettier

Code quality tools are pre-configured with sensible defaults. You can customize the rules by editing:

• eslint.config.mjs for ESLint rules
• .prettierrc for Prettier formatting rules

📦 What's Included

• Next.js 15 - The React framework for production
• TypeScript - Static type checking
• Tailwind CSS 4 - Utility-first CSS framework
• ESLint - Code linting and quality checks
• Prettier - Code formatting
• Husky - Git hooks for code quality
• Responsive Design - Mobile-first approach

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js team for the amazing framework
• Vercel for hosting and deployment
• Tailwind CSS for the utility-first CSS framework