corrad-af-2024/README.md

corradAF - Corrad Application Framework

Welcome to corradAF, a comprehensive Nuxt.js template designed for rapid application development. This framework provides a solid foundation with essential development tools, authentication system, and modern UI components.

🚀 Features

• 🔐 Complete Authentication System - Login, Register, Password Recovery, Logout
• 👥 User Management - User and role management with CRUD operations
• 🛠️ Development Tools Suite - Comprehensive set of dev tools for rapid development
• 🎨 Modern UI Components - Built with TailwindCSS and custom components
• 📱 Responsive Design - Mobile-first approach with modern UX patterns
• 🔧 API Management - Built-in API endpoint design and testing tools
• 📝 Content Management - Dynamic content and template management
• 🎯 Menu Configuration - Easy navigation structure management
• 💻 Code Playground - In-browser code testing and prototyping
• 🗄️ ORM Integration - Database schema management tools
• ⚙️ Configuration Management - System settings and environment setup

🛠️ Development Tools Included

User Management

• User CRUD operations
• Role-based access control
• Permission management

Menu Editor

• Dynamic navigation configuration
• Hierarchical menu structure
• Permission-based menu visibility

API Editor

• Design and test API endpoints
• Interactive API documentation
• Request/response testing

Content Editor

• Dynamic content management
• Template editing
• Content versioning

Code Playground

• Real-time code testing
• Multiple language support
• Instant preview

ORM Tools

• Database schema management
• Query builder interface
• Migration tools

Configuration

• Environment variable management
• System settings
• Feature toggles

📋 Prerequisites

• Node.js 18+
• Yarn (preferred) or npm
• Database (PostgreSQL/MySQL recommended)

🚀 Quick Start

1. Clone the Template

git clone https://git.sena.my/corrad-software/corrad-af-2024.git your-project-name
cd your-project-name

2. Install Dependencies

# Using yarn (recommended)
yarn install

# Or using npm
npm install

3. Environment Setup

# Copy environment template
cp .env.example .env

# Edit your environment variables
nano .env

Configure your database connection and other environment variables in the .env file.

4. Database Setup

# Run database migrations and generate Prisma client
yarn prisma

# Or manually
npx prisma db pull && npx prisma generate

5. Start Development Server

yarn dev

Your application will be available at http://localhost:3000

📁 Project Structure

├── assets/          # Static assets (images, styles)
├── components/      # Vue components
├── composables/     # Vue composables
├── layouts/         # Application layouts
├── middleware/      # Route middleware
├── navigation/      # Navigation configuration
├── pages/           # Application pages
│   ├── devtool/     # Development tools
│   ├── dashboard/   # Main dashboard
│   ├── login/       # Authentication pages
│   ├── register/    # User registration
│   └── ...
├── plugins/         # Nuxt plugins
├── prisma/          # Database schema and migrations
├── public/          # Public static files
├── server/          # Server-side API
├── stores/          # Pinia stores
└── templates/       # Template files

🔧 Configuration

Database

Configure your database connection in the .env file:

DATABASE_URL="postgresql://username:password@localhost:5432/database_name"

Authentication

Set up JWT secrets and authentication settings:

JWT_SECRET="your-super-secret-jwt-key"
AUTH_ORIGIN="http://localhost:3000"

🎨 Customization

Theme Configuration

Customize colors, fonts, and spacing in:

• tailwind.config.js - TailwindCSS configuration
• app.config.js - Application-specific settings

Adding New Development Tools

1. Create a new page in pages/devtool/your-tool/
2. Add navigation entry in the navigation configuration
3. Implement your tool's functionality

📖 Documentation

• Nuxt 3 Documentation
• TailwindCSS Documentation
• Prisma Documentation
• FormKit Documentation

🚀 Deployment

Build for Production

yarn build

Preview Production Build

yarn preview

Environment Variables for Production

Ensure all environment variables are properly set in your production environment:

• DATABASE_URL
• JWT_SECRET
• AUTH_ORIGIN
• NUXT_SECRET_KEY

🤝 Contributing

1. Fork the repository
2. Create your 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 licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Create an issue in the repository
• Check existing documentation
• Review the development tools included in the framework

---

Built with ❤️ using Nuxt 3, TailwindCSS, and modern web technologies.