​
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

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

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:

​
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

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

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 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