corrad-af-2024/README.md

215 lines
5.3 KiB
Markdown

# 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 or npm
- Database (PostgreSQL/MySQL recommended)
## 🚀 Quick Start
### 1. Clone the Template
```bash
git clone <repository-url> your-project-name
cd your-project-name
```
### 2. Install Dependencies
```bash
# Using yarn (recommended)
yarn install
# Or using npm
npm install
```
### 3. Environment Setup
```bash
# 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
```bash
# Run database migrations and generate Prisma client
yarn prisma
# Or manually
npx prisma db pull && npx prisma generate
```
### 5. Start Development Server
```bash
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:
```env
DATABASE_URL="postgresql://username:password@localhost:5432/database_name"
```
### Authentication
Set up JWT secrets and authentication settings:
```env
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](https://nuxt.com/docs)
- [TailwindCSS Documentation](https://tailwindcss.com/docs)
- [Prisma Documentation](https://www.prisma.io/docs)
- [FormKit Documentation](https://formkit.com/)
## 🚀 Deployment
### Build for Production
```bash
yarn build
```
### Preview Production Build
```bash
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.**