​
Project Creation

Creating a new project in CodeNull is the first step in your journey to building modern, AI-powered web applications. This guide will walk you through the process of setting up a new project and configuring its initial settings.

​
Getting Started

Project Creation Screen
1

Access the Project Creation Screen

There are multiple ways to access the project creation screen:
  • From the dashboard, click the New Project button
  • From the main navigation, click + in the project selector
  • From any screen, use the keyboard shortcut Ctrl+N (Windows/Linux) or ⌘+N (macOS)
2

Choose a Project Template

Select a template that matches your project needs:

Blank Project

Start with a clean slate and build from scratch

E-commerce

Pre-configured for online stores

Blog

Content-focused site with publishing features

Portfolio

Showcase your work or services

Dashboard

Data visualization and analytics

Landing Page

Conversion-focused single page
You can also choose from your previously saved templates or browse the template marketplace for community and premium options.
3

Enter Basic Information

Fill in the essential details for your project:
​
projectName
string
required
A descriptive name for your project
​
description
string
Optional brief description of the project purpose
​
tags
string[]
Optional keywords to categorize your project
​
visibility
enum
default:"private"
  • private: Only accessible to you and invited collaborators
  • team: Available to all members of your organization
  • public: Visible to all CodeNull users (code not publicly accessible)
4

Configure Technology Stack

Select the technologies you want to use in your project:
​
frontendFramework
enum
default:"react"
  • react: React.js (with Next.js)
  • vue: Vue.js (with Nuxt.js)
  • angular: Angular
  • svelte: Svelte/SvelteKit
  • static: Static HTML/CSS/JS
​
cssFramework
enum
default:"tailwind"
  • tailwind: Tailwind CSS
  • mui: Material UI
  • bootstrap: Bootstrap
  • chakra: Chakra UI
  • vanilla: Plain CSS
  • none: No CSS framework
​
componentLibrary
enum
default:"shadcn"
  • shadcn: shadcn/ui
  • radix: Radix UI
  • mantine: Mantine
  • none: No component library
Changing the technology stack after project creation may require migration effort. Choose carefully based on your project requirements.
5

Create Project

Click the Create Project button to initialize your project. CodeNull will:
  1. Set up the project structure based on your selected template and technologies
  2. Initialize the necessary configuration files
  3. Create a Git repository for version control
  4. Install default dependencies
Project Initialization
This process typically takes 30-60 seconds depending on the selected options and your connection speed.

​
Project Structure

After creation, your project will have a standardized structure: 
my-project/
├── .codenull/                  # CodeNull configuration
├── frontend/                   # Frontend code
│   ├── public/                 # Static assets
│   ├── src/                    # Source code
│   ├── components/             # UI components
│   └── pages/                  # Page components
├── backend/                    # Backend code
│   ├── src/                    # Source code
│   ├── api/                    # API endpoints
│   ├── models/                 # Data models
│   └── services/               # Business logic
├── database/                   # Database scripts and migrations
├── ai/                         # AI models and prompts
└── README.md                   # Project documentation

​
Initial Configuration

Once your project is created, you’ll be guided through some initial configuration steps:
Project Settings
Review and adjust general project settings:
  • Update project name, description, or tags
  • Configure version control settings
  • Set up collaboration permissions
  • Define environment variables
API Key Configuration
If your project uses external services, you’ll need to configure API keys:

AI Services

Configure keys for OpenAI, Azure OpenAI, or other AI providers

Database

Set up connection strings for your database

Authentication

Configure auth providers (Google, GitHub, etc.)

Analytics

Set up services like Google Analytics or Mixpanel
All API keys are securely encrypted and stored according to industry best practices. They’re never exposed in your source code.
Deployment Settings
Configure how your project will be deployed:

CodeNull Cloud

One-click deployment to CodeNull’s managed infrastructure

Custom Hosting

Configure deployment to your own servers or cloud provider

Export Code

Export your project to deploy manually

​
Creating from an Existing Project

If you already have an existing project, you can import it into CodeNull:
1

Access Import Screen

From the project creation screen, select the Import Existing Project tab.
2

Connect Repository

Import Project
Connect to your existing repository:

GitHub

Import from a GitHub repository

GitLab

Import from a GitLab repository

Bitbucket

Import from a Bitbucket repository

Local Files

Upload files from your local machine
3

Project Analysis

CodeNull will analyze your project structure to detect:
  • Front-end and back-end frameworks
  • Component libraries
  • Database connections
  • Dependencies
Project Analysis
You can confirm or adjust these detected settings.
4

Import Configuration

Configure additional settings:
​
preserveStructure
boolean
default:true
Keep your existing project structure (recommended)
​
importHistory
boolean
default:false
Import full git history (larger projects may take longer)
5

Complete Import

Click Import Project to complete the process. CodeNull will:
  1. Clone your repository
  2. Set up the CodeNull configuration
  3. Prepare the project for editing in the CodeNull interface

​
Project Templates

You can save your project configuration as a template for future use:
Save as Template

Save Current Project as Template

From your project settings, select Save as Template to create a reusable template from your current project.

Manage Templates

Review, edit, and share your saved templates from the Templates section of your account.

​
Next Steps

Now that you’ve created your project, you’re ready to start building:

Explore the Interface

Learn how to navigate the CodeNull interface

Frontend Development

Start building your user interface

Backend Development

Set up your API and backend logic

Database Configuration

Configure your database models and queries

AI Integration

Explore AI capabilities in your project