Merge branch 'main' of https://github.com/codeboltai/codeboltai.github.io

Author: Nursid

docs/user/2_onboarding.md

@@ -88,3 +88,9 @@ For users who have previously completed the onboarding process, signing in throu
 ![Application Dashboard](../../static/img/codebolt_application.png)
 
 From here, you can access your existing projects, create new projects, and leverage the full capabilities of the CodeBolt platform to build and publish your applications efficiently.
+
+
+### Video Guide
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/YpZV_AFHsX8?si=aJOMHWsyMYJWAeaw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+

docs/user/Templates/myTemplates.md

@@ -1,17 +1,12 @@
-# My Template
+# My Templates
 
-The Template  is designed to facilitate the quick creation of new projects with predefined setups for popular JavaScript frameworks and libraries. By using templates, developers can skip the repetitive tasks involved in setting up project configurations and can jumpstart their work with an organized structure. The available templates include setups for React, Express, Next.js, and an Empty project option.
+Streamline Your Workflow with Custom Templates: Codebolt enables users to upload their own project templates directly to their Codebolt portal. This powerful feature is designed for professionals who regularly initiate projects with specific structures or configurations.
 
-<!-- ![get started](../../static/img/template.png) -->
+Seamless Integration with Codebolt: Once uploaded, your custom templates are seamlessly integrated into the Codebolt app, empowering you to kickstart new projects efficiently while leveraging your personalized settings and configurations.
 
+![myTemplate](../../../static/img/mytemplates.png)
 
-### Template Options
-* React: Sets up a new React app with ES6+, JSX, and Webpack or Vite. Essential dependencies and folder structure are pre-configured. Start quickly by selecting the React template.
 
-* Express: Creates a back-end Express project for RESTful APIs, with basic middleware and error handling. Provides a suitable structure for server-side development; select Express to get started.
+## Video Guide
 
-* Next.js: Initializes a Next.js app with routing, page, and API setup. Perfect for full-stack development; choose Next.js to begin.
-
-* Empty: A minimal template with only essential files. Ideal for custom setups; use Empty to create a basic project foundation.
-
-**Each template is selectable for quick project setup!**
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/WCr68gOgiuw?si=WNd53WSaQ0AtKiku" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/user/Templates/template.md

@@ -1,17 +1,23 @@
-# Template
+# Templates
 
-The Template  is designed to facilitate the quick creation of new projects with predefined setups for popular JavaScript frameworks and libraries. By using templates, developers can skip the repetitive tasks involved in setting up project configurations and can jumpstart their work with an organized structure. The available templates include setups for React, Express, Next.js, and an Empty project option.
+Codebolt provides a library of pre-built project templates to help you get started quickly with popular frameworks and languages. These templates come pre-configured with recommended settings, folder structures, and boilerplate code, allowing you to dive right into building your application.
 
-<!-- ![get started](../../static/img/template.png) -->
+## Benefits of Using Templates
 
+- **Faster Project Setup**: Templates eliminate the need to manually configure your project from scratch. With just a few clicks, you can have a working project ready to go.
 
-### Template Options
-* React: Sets up a new React app with ES6+, JSX, and Webpack or Vite. Essential dependencies and folder structure are pre-configured. Start quickly by selecting the React template.
+- **Best Practices**: Templates follow industry best practices and conventions for the selected framework or language. This ensures your project starts off on the right foot with a clean and organized structure.
 
-* Express: Creates a back-end Express project for RESTful APIs, with basic middleware and error handling. Provides a suitable structure for server-side development; select Express to get started.
+## Creating a Project from a Template
 
-* Next.js: Initializes a Next.js app with routing, page, and API setup. Perfect for full-stack development; choose Next.js to begin.
+To create a new project using a template in Codebolt, follow these steps:
 
-* Empty: A minimal template with only essential files. Ideal for custom setups; use Empty to create a basic project foundation.
+1. Click on the "Create Project in workspace" button in the Codebolt dashboard.
+2. Browse the available templates or use the search bar to find a specific template.
+3. Select the desired template and provide a name for your project.
+5. Click "Create" to generate the project based on the selected template.
+
+Codebolt will then set up your project with the necessary files and configurations, and you'll be ready to start coding!
+
+![Template](../../../static/img/template.png)
 
-**Each template is selectable for quick project setup!**

docs/user/features/layouts.md

@@ -0,0 +1,14 @@
+# Layouts
+
+Codebolt provides three layout options to suit different development needs and preferences:
+
+1. **Basic**: This layout is ideal when you want to focus on updating your app through chat interactions without seeing the code. It provides a streamlined interface for making changes to your app using natural language conversations.
+
+2. **Dev**: The Dev layout is designed for basic development tasks. It includes a chat interface, a code editor, and a preview pane. This layout allows you to have conversations with the AI, make code changes, and see the results in real-time.
+
+3. **Power Dev**: The Power Dev layout is tailored for advanced development scenarios. In addition to the features provided in the Dev layout, it also includes a terminal, console, and debugging tools. This layout gives you full control over your development environment, enabling you to perform complex tasks and troubleshoot issues effectively.
+
+Choose the layout that best fits your development style and requirements. The Basic layout is perfect for quick updates and iterations, while the Dev and Power Dev layouts offer progressively more powerful tools for comprehensive development workflows.
+
+
+### Video Guide

docs/user/module/settings/ProjectSettings/AppSettings.md

@@ -0,0 +1,15 @@
+# App Settings
+
+Customize the name, description and githubUrl. This information is used when publishing  your project.
+
+In the App Settings, you can:
+- Change the name of your app
+- Give it a unique ID 
+- Add a description
+- Specify the GitHub URL where the application's code repository will be maintained
+
+![AppSettings](../../../../../static/settings/projectSettings/1.png)
+
+### Video Guide
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/VOQx8kqKvAE?si=A1Yugc_ub1pOufwv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/user/module/settings/ProjectSettings/Instructions.md

@@ -0,0 +1,5 @@
+# Instructions
+
+
+
+![Instructions](../../../../../static/settings/projectSettings/5.png)

docs/user/module/settings/ProjectSettings/KnowledgeBase.md

@@ -0,0 +1,5 @@
+# Knowledge Base
+
+
+
+![knowledgebase](../../../../../static/settings/projectSettings/4.png)

docs/user/module/settings/ProjectSettings/Secrets.md

@@ -0,0 +1,30 @@
+# Secrets
+
+![AppSettings](../../../../../static/settings/projectSettings/3.png)
+
+Every project needs secrets to store sensitive information like API keys, database passwords, etc. In this section, you can add a list of secrets for your project:
+
+### Creating
+
+1. Click the "Add Secret" button to create a new secret.
+2. Provide a name and description for the secret that describes its purpose. 
+3. Enter the secret value.
+4. Click "Save" to store the secret securely.
+
+
+### Editing
+To edit an existing secret:
+1. Click the "Edit" button next to the secret you want to modify.
+2. Update the secret details as needed.
+3. Click "Save" to apply the changes.
+
+### Deleting
+
+To delete a secret:
+1. Click the "Delete" button next to the secret you want to remove.
+
+
+## Video Guide
+
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/97ndwO6Heek?si=I1luQfciotAy5i0O" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/user/module/settings/ProjectSettings/TechnicalInfo.md

@@ -0,0 +1,6 @@
+# Technical Info
+
+
+
+![technicalinfo](../../../../../static/settings/projectSettings/5.png)
+

docs/user/module/settings/ProjectSettings/Usage.md

@@ -0,0 +1,35 @@
+# Usage
+
+![usages](../../../../../static/settings/projectSettings/6.1.png)
+
+Usage settings are divided into three parts:
+1. Develop Settings 
+2. Install Settings
+3. App Use Settings
+
+## Develop Settings
+![usages](../../../../../static/settings/projectSettings/6.1.png)
+The Develop Settings section provides three options:
+1. Select Agent: Choose the appropriate agent for your project.
+2. Select Layout: Pick from Basic, Developer, or Power Developer layouts based on your needs.
+3. Run Command: Specify any commands to run during the development process.
+
+When user publish their projects as app then to develop on top of this this project they need to know what agent will be best suited what are step to run the project.
+
+## Install Settings
+![usages](../../../../../static/settings/projectSettings/6.2.png)
+The Install Settings section provides instructions and commands to install the app. It includes:
+1. Installation Instructions: Step-by-step guide on how to install the app.
+2. Installation Command: Specify the command(s) needed to install the app, such as `npm install` or `pip install`.
+
+When a user wants to install and use an app created from this project, they will refer to this section for the necessary installation details and commands.
+
+## App Use Settings
+![usages](../../../../../static/settings/projectSettings/6.3.png)
+The App Use Settings section provides options for users to configure how to use the app:
+1. Select Agent: Choose the appropriate agent for running the app.
+2. Select Layout: Pick the layout that is best suited for the app, such as Basic, Dev, or PowerDev.
+3. Pre-run Commands: Specify any commands that need to be run before starting the app.
+4. App Preview: Select whether to preview the app locally or on the web.
+
+These settings allow users to customize the app's runtime environment, UI layout, initialization steps, and preview mode to best fit their needs when using the app created from this project.

docs/user/module/settings/ProjectSettings/projectSettings.md

@@ -1,6 +1,10 @@
-# Project Setting
+# Project Settings
 
-The Project Settings module allows you to configure essential project parameters, technical details, secrets, knowledge base, instructions, and usage preferences. Each section within Project Settings serves a unique purpose, providing organized control over the project's configuration.
+In the **Project Settings** section, you can configure various options for your project:
 
-
-### App Settings
+1. [App Settings](AppSettings)
+2. [Technical Info](TechnicalInfo)
+3. [Secrets](Secrets)
+4. [Knowledge Base](KnowledgeBase)
+5. [Instructions](Instructions)
+5. [Usage](Usage)