onboarding documentation completed

Author: faisal004

docs/user/2_onboarding.md

@@ -1,40 +1,90 @@
 # Onboarding
 
-### Step 1: Getting Started
+### Getting Started
+
 Begin by clicking the **Get Started** button on the home page.
 
 ![get started](../../static/img/get_started.png)
 
+### Sign Up
 
-### Step 2: Sign Up
 Once you click **Get Started**, you will be redirected to the portal for **Sign Up**.
 
-
 Here, you will have two options for signing up:
+
 - **Google**
 - **GitHub**
 
 ![sign up](../../static/img/sing-up.png)
 
-### Step 3: Authentication
+### Authentication
+
 - **If you choose Google or Github**:
   - You will be redirected to Google's or Github authentication page for Verification.
   - If you are a new user, you will be redirected to the username page.
-You need to create and add a username. After adding the username, you can proceed further.
+    You need to create and add a username. After adding the username, you can proceed further.
 
 ![username](../../static/img/username.png)
 
 - After successful authentication, a message will appear:  
-    *"You have successfully signed in. You can close this Page, Now you can return to the app"*
+   _"You have successfully signed in. You can close this Page, Now you can return to the app"_
   - Once the authentication process is completed, you can proceed to use the application.
 
-
 ![authentication success](../../static/img/authentication-success.png)
 
-After successfully completing the onboarding process, users can sign in to explore the application dashboard. On the dashboard, users can:
+### First Time Users
+
+After signing in for the first time, you will see an onboarding screen
+
+Let's walk through every step
+
+1. **Welcome Screen**: Upon successful authentication, new users will be greeted with a welcome message. This screen serves as an introduction to the onboarding process.
+
+![Onboarding Welcome](../../static/onboarding/1.png)
+
+2. **Select Default Provider and Model**: In this step, you will choose your preferred provider from a range of options:
+
+   - Cloud Providers:
+     - OpenAI
+     - Anthropic
+   - Local Providers:
+     - LMStudio
+   - CodeBolt Provider
+
+   This selection will determine the default provider for you project(you can change it later).
+
+![Onboarding Provider Selection](../../static/onboarding/2.png)
+
+Now on the same page select a model provided by list of models from the selected provider
+(After entering correct key to provider you will se the list of models)
+
+![Onboarding Model Selection](../../static/onboarding/3.png)
+
+3. **Choose Default Workspace**: Select the default workspace where you'd like your project to be organized and managed.
+
+![Onboarding Welcome](../../static/onboarding/4.png)
+
+4. **Create Your First Project**: In this step, you will create your first project. Provide a name for your project and click "Create Project in workspace" to get started.
+
+![Onboarding Project Creation](../../static/onboarding/5.png)
+
+After clicking on "Create Project in workspace" this screen will pop-up
+
+Here we can see [Template](./Templates/template.md) and [My Templates](./Templates/myTemplates.md) <br/>
+Just give a name to you project or you can keep a random name and click "Create Project"
+
+![Onboarding Project Creation](../../static/onboarding/6.png)
+
+5. **Developer Page**: After creating your project, you will be taken to the Developer Page where you can start working on your project.
+
+   ![ Project Created](../../static/onboarding/7.png)
+
+6. **Congratulations!** You have successfully created your first project. You can now begin exploring the features and capabilities of the platform to build and publish your applications.
+
+### Returning Users
+
+For users who have previously completed the onboarding process, signing in through the portal will redirect you directly to the main application dashboard.
 
-* Create new project in the workspace or open the project folder.
-* Access recent projects and files for quick continuation of their work.
-* Create new workspace, accessible from the top-right of the dashboard..
+![Application Dashboard](../../static/img/codebolt_application.png)
 
-![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.

docs/user/Templates/myTemplates.md

@@ -0,0 +1,17 @@
+# My Template
+
+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.
+
+<!-- ![get started](../../static/img/template.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.
+
+* 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!**

docs/user/template.md docs/user/Templates/template.md

@@ -2,7 +2,7 @@
 
 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.
 
-![get started](../../static/img/template.png)
+<!-- ![get started](../../static/img/template.png) -->
 
 
 ### Template Options