Quickstart
Overview of CodinIT
Welcome to this step-by-step guide on how to create a full-stack application using CodinIT. CodinIT is an AI-powered platform that enables users of any skill level to create full-stack web applications without requiring coding expertise by simply describing what they want in plain English.
Create your First Project
Step 1: Create Account
To get started, head over to CodinIT.dev and create an account.
Step 2: Create Your Project
Once registered, you'll be able to create your first project from the dashboard.
Step 3: Enter Initial Prompt
Simply enter an initial prompt to kick things off, and CodinIT will do the rest! This is the starting block for any project in CodinIT, where you can bring your ideas to life instantly.
CodinIT Dashboard
At CodinIT, simplicity is key. The dashboard provides everything you need:
- Kickstart projects with a single prompt
- Explore all projects, including the latest and featured ones
- Jumpstart with templates from our curated selection
- Personalize your experience by viewing and editing your profile
- Manage your account to check monthly credits and adjust settings
- Experiment with Labs features like Chat mode—toggle them on or off
- Upgrade or downgrade your plan seamlessly
Project Overview
At CodinIT, every project follows a structured workflow:
Edit with Ease
Using a chat-based interface for seamless development
Attach Images
For precision edits and inspiration
Visual Editing
Select and visually edit components for seamless design
Version History
Track changes and restore any previous version
Supabase Integration
Connect with Supabase for backend capabilities
GitHub Collaboration
Edit and manage your code collaboratively
Publish & Deploy
Share your project with a preview link
Responsive Design
Toggle between web and mobile view
Project Settings
Every project's settings empower you to:
- View key project details like total edits and creation date
- Set up custom knowledge to tailor your project's context
- Connect to a GitHub repository for seamless collaboration
- Adjust project visibility from public to private
- Manage the badge display (available for paid plans only)
- Rename your project anytime
- Delete your project (⚠️ Danger Zone)
Start your Project
There are several ways to get started with CodinIT, depending on your preferences and resources:
Method 1: Using Prompts
CodinIT's prompt-based system makes app creation simple:
- Describe what you want to build in the prompt box
- Be specific - the more detailed you are, the better the results
- Start with clear prompts and refine as you go
Example: "Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart."
Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart.
Method 2: Using Templates
Step 1: Choose Template
CodinIT offers templates to help you get started quickly on popular project types, such as dashboards, e-commerce sites, or social apps.
Step 2: Customize Template
Once the template loads, use prompts to adjust features, add new elements, or fine-tune the design to match your vision.
Method 3: Remix an Existing Project
You can remix an existing public project or one of your own. Remixing allows you to reuse the current state of a project as a starting point and build upon it.
Method 4: Using Figma
If you have a design in Figma:
- Using screenshots: Take a screenshot and paste/drag-drop into CodinIT
- Using Builder.io integration: Structure your Figma design using Auto-Layout, then use the Builder.io plugin
Method 5: Using a Sketch
Step 1: Create Sketch
Use Excalidraw or any similar tool to sketch your UI.
Step 2: Capture Screenshot
Take a screenshot of your drawing, then paste or drag-and-drop it into CodinIT.
Step 3: Generate Code
The platform will transform your sketch into working code.
Method 6: Cloning a Website or Application
Step 1: Capture Screenshot
Take a screenshot using shortcuts like Cmd+Shift+4 on Mac or tools like the GoFullPage Chrome Extension.
Step 2: Upload to CodinIT
Paste or drag the screenshot into CodinIT.
Step 3: Generate Structure
CodinIT will recreate the structure of the webpage in your project.
Edit your Project
Add Custom Knowledge to your Project
The Knowledge Base in CodinIT acts as your project's blueprint, organizing functionality, design, and goals in one place.
Step 1: Access Knowledge Base
Go to the Knowledge Base section in your dashboard.
Step 2: Add Entries
Click "Add Entry" and categorize them under:
- 📌 Project Overview – Define objectives and scope
- 🚀 Key Features – List core functionalities
- 🎨 Design Guidelines – Document UI/UX principles
Step 3: Keep Updated
Regularly review and update entries as your project evolves to ensure development stays on track.
Other Editing Features
Select & Visual Edit
AI-driven development with Tailwind-native visual controls
Revert Changes
Restore past versions instantly and bookmark key edits
Add Animations
Enhance your app with modern animations
Add Images to Prompts
Attach images directly to chat for better context
Add New Pages
Expand your project with additional pages
Refactor Code
Improve code structure and performance
Add Fullstack Capabilities to your Project
Connect a Backend with Supabase
Supabase is a backend-as-a-service platform that integrates smoothly with CodinIT to add powerful backend capabilities.
Step 1: Set Up Supabase
Create an account on Supabase and create a new project.
Step 2: Link to CodinIT
In CodinIT, go to Settings → Connect Supabase and follow the steps.
Step 3: Manage Data
Set up tables, manage user data, and configure email notifications.
Authentication with Supabase
Step 1: Create Supabase Account
Visit Supabase and sign up to access the dashboard.
Step 2: Integrate with CodinIT
Input your Supabase project URL and API keys to establish connection.
Step 3: Design Authentication Forms
Use CodinIT's AI form builder to craft intuitive login and sign-up forms.
Step 4: Implement Workflows
Set up Supabase Edge Functions for token validation and user sessions.
Step 5: Enable Email Verification
Configure Supabase to send verification emails upon user registration.
Step 6: Test and Deploy
Thoroughly test authentication flows before deploying your application.
Add AI Capabilities
Enhance your app with AI features using:
OpenAI
Integration with GPT models
Gemini
Google's AI API
Groq
High-performance AI services
Add Payment Capabilities
Connect Stripe to CodinIT using Stripe's built-in payment links for the most straightforward integration.
Add Email Capabilities
Integrate email functionality using Resend for reliable email delivery.
Deploy & Publish your Project
Set up SEO
Ensure all SEO capabilities are properly enabled for better search engine visibility.
Add a Custom Domain
You can add a custom domain using:
Entri
Native to CodinIT
Netlify
Popular hosting platform
Vercel
Optimized for modern frameworks
Namecheap
Domain registration service
Publish your Project
When your project is ready, publish it to generate a shareable URL. This makes it easy to showcase your application or share it with collaborators and stakeholders.