🚀 Welcome to MasAI

MasAI is a modern, production-ready web application scaffold built with cutting-edge technologies, designed to accelerate your development workflow and provide a solid foundation for building high-quality applications.

✨ Technology Stack

This scaffold provides a robust foundation built with:

🎯 Core Framework

• ⚡ Next.js 15 – Production-grade React framework with App Router
• 📘 TypeScript 5 – Type-safe JavaScript for scalable development
• 🎨 Tailwind CSS 4 – Utility-first CSS framework

🧩 UI Components & Styling

• 🧩 shadcn/ui – Accessible, high-quality UI components
• 🎯 Lucide React – Clean and consistent icon set
• 🌈 Framer Motion – Motion library for expressive animations
• 🎨 Next Themes – Simple and flexible dark/light mode

📋 Forms & Validation

• 🎣 React Hook Form – Performant form system
• ✅ Zod – TypeScript-first schema validation

🔄 State Management & Data Fetching

• 🐻 Zustand – Lightweight state management
• 🔄 TanStack Query – Data synchronization, caching, fetching
• 🌐 Axios – HTTP client

🗄️ Database & Backend

• 🗄️ Prisma – Type-safe database ORM
• 🔐 NextAuth.js – Complete authentication system

🎨 Advanced UI Features

• 📊 TanStack Table – Tables, filters, sorting, pagination
• 🖱️ DND Kit – Drag-and-drop interactions
• 📊 Recharts – Beautiful charts built with React
• 🖼️ Sharp – High-performance image processing

🌍 Internationalization & Utilities

• 🌍 Next Intl – Internationalization support
• 📅 Date-fns – Modern date utilities
• 🪝 ReactUse – Essential React hooks

---

🎯 Why Choose MasAI?

• 🏎️ Fast Development — Preconfigured setup with best practices
• 🎨 Beautiful UI — Modern and responsive component system
• 🔒 Type Safety — Full TypeScript integration
• 📱 Mobile-Ready — Smooth, responsive design
• 🗄️ Database Ready — Prisma integration
• 🔐 Auth Included — NextAuth.js setup
• 📊 Data Visualization — Charts, tables, and drag-and-drop
• 🌍 i18n Ready — Multi-language support
• 🚀 Production Ready — Optimized for deployment

---

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000
 to view the application.

📁 Project Structure
src/
├── app/                 # Next.js App Router pages
├── components/          # Reusable React components
│   └── ui/              # shadcn/ui components
├── hooks/               # Custom React hooks
└── lib/                 # Utility functions and configurations

🎨 Available Features & Components
🧩 UI Components (shadcn/ui)

Layout: Card, Separator, Aspect Ratio, Resizable Panels

Forms: Input, Textarea, Select, Checkbox, Radio Group, Switch

Feedback: Alert, Toast (Sonner), Progress, Skeleton

Navigation: Breadcrumb, Menubar, Navigation Menu, Pagination

Overlay: Dialog, Sheet, Popover, Tooltip, Hover Card

Data Display: Badge, Avatar, Calendar

📊 Advanced Data Features

Data tables with sorting, filtering, pagination

Charts powered by Recharts

Type-safe forms with React Hook Form + Zod

🎨 Interactive Features

Smooth animations (Framer Motion)

Drag & drop interfaces (DND Kit)

Theme switching (light/dark)

🔐 Backend Integration

Authentication with NextAuth.js

Database ORM with Prisma

HTTP requests via Axios + TanStack Query

Global state via Zustand

🌍 Production Features

Multi-language support (Next Intl)

Optimized images (Sharp)

End-to-end TypeScript

100+ React hooks (ReactUse)