Quickstart
Get your first CodinIT application running in under 10 minutes with this comprehensive quickstart guide.
New to CodinIT? This guide walks you through the complete workflow from project creation to deployment.
Create Your First Project
Step 1: Start a New Project
Navigate to your CodinIT dashboard and click "Create New Project". Choose from:
- 📱 Mobile App – Responsive mobile-first applications
- 🌐 Web Application – Full-stack web apps with backend
- 🎨 Landing Page – Marketing sites and portfolios
- 📊 Dashboard – Data visualization and admin panels
Step 2: Describe Your App
Use natural language to describe what you want to build:
Create a task management app with user authentication,
the ability to add, edit, and delete tasks, and a
dashboard showing task statistics.
Step 3: Review Generated Code
CodinIT will generate your complete application. Review the:
- Frontend components and styling
- Backend API endpoints
- Database schema and models
- Authentication setup
Step 4: Customize and Iterate
Make changes using natural language prompts or direct code editing:
Add a priority system to tasks with high, medium, low options.
Style the app with a dark theme and modern card layout.
Essential Editing Features
AI-Powered Editing
Make changes using natural language prompts with instant preview
Visual Editor
Click and edit components directly with AI-driven visual controls
Version Control
Restore past versions instantly and bookmark important milestones
Smart Suggestions
Get AI suggestions for improvements and feature additions
Media Integration
Attach images and files directly to prompts for better context
Component Library
Access pre-built components and templates for faster development
Knowledge Base Setup
Organize your project information for better AI assistance:
Step 1: Access Knowledge Base
Go to the Knowledge Base section in your dashboard.
Step 2: Add Project Documentation
Click "Add Entry" and categorize information under:
- 📌 Project Overview – Define objectives and scope
- 🚀 Key Features – List core functionalities
- 🎨 Design Guidelines – Document UI/UX principles
- 🔧 Technical Requirements – Specify technologies and constraints
Step 3: Keep Information Current
Regularly review and update entries as your project evolves to ensure development stays aligned with your vision.
Add Backend Capabilities
Connect with Supabase
Supabase integration provides powerful backend capabilities with minimal setup:
Step 1: Create Supabase Project
Create an account on Supabase and set up a new project.
Step 2: Link to CodinIT
In CodinIT, navigate to Settings → Connect Supabase and follow the integration steps.
Step 3: Configure Data Models
Set up database tables, manage user data, and configure real-time subscriptions.
Step 4: Enable Authentication
Configure user authentication flows including email verification and social logins.
Authentication Implementation
Step 1: Supabase Account Creation
Visit Supabase and sign up to access the project dashboard.
Step 2: Integration Configuration
Input your Supabase project URL and API keys to establish connection.
Step 3: Authentication Forms
Use CodinIT's AI form builder to create intuitive login and registration forms.
Step 4: Workflow Implementation
Set up Supabase Edge Functions for token validation and session management.
Email Verification
Configure automated email verification upon user registration.
Social Authentication
Enable Google, GitHub, and other OAuth provider integrations.
Role-Based Access
Implement user roles and permissions for secure access control.
Session Management
Handle user sessions with automatic refresh and secure logout.
Testing and Deployment
Preview Your Application
Live Preview - Every change is instantly reflected in the preview pane, allowing you to test functionality in real-time.
- Responsive Testing – Check how your app looks on different device sizes
- Feature Testing – Test user flows and interactions
- Performance Monitoring – Monitor loading times and responsiveness
Deploy to Production
Step 1: Pre-Deployment Check
Review your application for:
- Functionality completeness
- Responsive design across devices
- Performance optimization
- Error handling
Step 2: Choose Deployment Option
Select from multiple deployment options:
- CodinIT Hosting – Instant deployment with custom domain support
- GitHub Integration – Deploy via GitHub Pages or other CI/CD platforms
- Custom Hosting – Export code for deployment anywhere
Step 3: Configure Custom Domain
Add your custom domain for professional deployment:
- Point your domain to CodinIT's servers
- Configure SSL certificates automatically
- Set up redirect rules and routing