🚀 MAXSTACK

Empower developers to create web applications at lightning speed ⚡

MAXSTACK is a modern, AI-friendly development framework that removes the friction from building web applications. Built with TypeScript, React Router 7, and Tailwind CSS, it provides a comprehensive set of pre-built templates and components that work seamlessly together.

✨ Why MAXSTACK?

• 🧠 AI-Optimized: Less code in your app means AI can understand and help you better
• ⚡ Runtime-First: Skip build-time generation steps that slow down both humans and AI
• 🔒 Type-Safe: Strong typing ensures AI gets things right the first time
• 🎯 Focus on What Matters: Clear interfaces let you focus on what makes your app unique
• 📦 Common Patterns: Pre-built solutions for features every web app needs
• 🚀 Zero Friction: Get from idea to working app in minutes, not hours

🚀 Quick Start

Get up and running in under 2 minutes:

# Install dependencies
pnpm install

# Build the template library
pnpm --filter maxstack build

# See available templates
node apps/cli/bin/cli.js list

# Start development server
pnpm --filter ./apps/web dev

Your app will be running at http://localhost:5173 🎉

📁 Monorepo Structure

maxstack/
├── 📱 apps/
│   ├── web/          # Main React app with React Router 7
│   └── cli/          # Command-line tools for template management
├── 📦 packages/
│   └── maxstack/     # Core template library and components (maxstack-core)
├── 📚 docs/          # Documentation and guides
└── 🔧 configs/       # Shared configuration files

🎯 Core Packages

• apps/web - Production-ready Vite + React application using React Router 7
• apps/cli - CLI tools for listing and managing templates (scaffolding coming soon!)
• packages/maxstack - TypeScript package with React page templates, components, and layouts (published as maxstack-core)

🛠 Development Workflow

Prerequisites

• Node.js (LTS version recommended)
• pnpm package manager
• Git

Available Scripts

# 🏗️ Development
pnpm dev                    # Start development with hot reload
pnpm build                  # Build all packages for production
pnpm build:templates        # Build just the template library

# 🧪 Testing & Quality
pnpm validate               # Run comprehensive validation (recommended)
pnpm typecheck              # TypeScript type checking
pnpm lint                   # Run linter checks
pnpm lint:fix               # Auto-fix linting issues
pnpm test                   # Run all tests
pnpm test:e2e               # Run end-to-end tests

# 🎯 Code Generation
pnpm maxstack gen:e2e-tests # Generate E2E test stubs from mconfig.tsx
pnpm maxstack add:test      # Add unit and E2E tests for a template
pnpm maxstack add:template  # Add a new template to your project

# 📦 Package Management
pnpm bootstrap              # Install all dependencies

Working with Templates

# List all available templates
node apps/cli/bin/cli.js list

# Build templates after making changes
pnpm --filter maxstack-core build

# Start the web app with your templates
pnpm --filter ./apps/web dev

🎨 What's Included

MAXSTACK comes with everything you need to build modern web applications:

🧩 Pre-built Templates

• Marketing pages (landing, about, pricing, contact)
• Blog system (listing, posts, categories)
• User authentication (login, signup, profile)
• Application layouts (dashboard, admin, marketing)

🎛️ UI Components

• Radix UI primitives for accessibility
• Tailwind CSS for styling
• Lucide React icons
• Custom components optimized for templates

🔧 Developer Experience

• TypeScript everywhere for type safety
• React Router 7 for modern routing
• Vite for lightning-fast development
• Biome for linting and formatting
• E2E Test Generation from config for comprehensive testing

🧪 Testing & Quality Assurance

• Config-driven E2E tests - Define test cases in natural language in mconfig.tsx
• Automatic test generation - Generate Playwright test stubs with gen:e2e-tests command
• Vitest for fast unit and integration testing
• Playwright for reliable end-to-end testing
• See E2E Test Generation Guide for details

🤖 AI-Friendly Development

MAXSTACK is designed from the ground up to work seamlessly with AI coding assistants:

• Clear interfaces and consistent patterns
• Comprehensive TypeScript types for better AI understanding
• Minimal boilerplate code that's easy to reason about
• Well-documented components and templates
• Standardized structure across all templates

🚀 Deployment

Ready to deploy? MAXSTACK works with all major hosting platforms:

• Vercel - Zero-config deployment
• Netlify - Simple static hosting
• Fly.io - Full-stack applications
• DigitalOcean - Scalable cloud hosting

Check out our deployment guide for detailed instructions.

📖 Documentation

• 🚀 Getting Started (coming soon)
• 📚 Template Guide (coming soon)
• 🎨 Customization (coming soon)
• 🤖 AI Development
• 🚀 Deployment

🤝 Contributing

We welcome contributions! Please see our Contributing Guide (coming soon) for details.

Quick Contributing Tips

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and test them
4. Run validation: pnpm validate (ensures all checks pass)
5. Submit a pull request

📜 License

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

🙏 Support

• ⭐ Star this repo if you find it helpful!
• 🐛 Report issues via GitHub Issues
• 💡 Request features through our issue templates
• 📧 Contact us for support and questions

---

Made with ❤️ by the MAXSTACK team

Website • Documentation • GitHub • Discord (coming soon)