Skip to main content
Skip to main content

Custom Documentation Components

This page demonstrates the custom React components created for the Mifty documentation.

CommandBlock Component​

Use this component to display CLI commands with descriptions and copy functionality:

Install Mifty CLI globally on your system
npm install -g @mifty/cli
Create a new Mifty project with API template
mifty init my-project --template=api

ComparisonTable Component​

Perfect for showing Traditional vs Mifty approaches:

Development Speed Comparison

FeatureTraditional ApproachWith MiftyTime Saved
Project Setup
❌Hours of manual configuration, dependency management, and boilerplate code
✅mifty init - Complete setup in 30 seconds
⚡~2 hours
Database Design
❌Manual schema creation, migration files, ORM configuration
✅Visual designer with automatic migrations
⚡~1 hour
API Development
❌Manual route creation, validation, error handling
✅Auto-generated CRUD APIs with validation
⚡~3 hours

ServiceTable Component​

Display running services and their status:

Development Services

ServiceStatusURLDescription
API Server:3000
●Running
Main REST API server
Database:5432
●Running
—PostgreSQL database server
Redis Cache:6379
●Stopped
Redis caching server

CodeTabs Component​

Show code examples for different databases or languages:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
DB_TYPE="postgresql"

AdapterGuide Component​

Comprehensive adapter documentation:

🔐auth

GitHub OAuth Adapter

Integrate GitHub OAuth authentication into your Mifty application

Installation

npm run adapter install github-oauth

Environment Variables

GITHUB_CLIENT_IDRequired

Your GitHub OAuth app client ID

Example: your_github_client_id
GITHUB_CLIENT_SECRETRequired

Your GitHub OAuth app client secret

Example: your_github_client_secret
GITHUB_CALLBACK_URL

OAuth callback URL for your application

Example: http://localhost:3000/auth/github/callback(Default: http://localhost:3000/auth/github/callback)
Complete .env example:
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GITHUB_CALLBACK_URL=http://localhost:3000/auth/github/callback