51 id generator

Frontend/package.json

@@ -31,6 +31,7 @@
     "rxjs": "~7.8.0",
     "smol-toml": "^1.3.1",
     "tslib": "^2.3.0",
+    "uuid": "^11.0.5",
     "yamljs": "^0.3.0",
     "zone.js": "~0.14.10"
   },
@@ -41,6 +42,7 @@
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
+    "@types/uuid": "^10.0.0",
     "@types/yamljs": "^0.2.34",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",

Frontend/src/app/app.routes.ts

@@ -6,13 +6,15 @@ import { Md2htmlComponent } from './md2html/md2html.component';
 import { SerializedToolComponent } from './serialized-tool/serialized-tool.component';
 import { MssqlScaffolderComponent } from './mssql-scaffolder/mssql-scaffolder.component';
 import { DownloadsComponent } from './downloads/downloads.component';
+import { IdGeneratorComponent } from './id-generator/id-generator.component';
 
 export const routes: Routes = [
     { path: '', title: "CodeChef", component: HomeComponent, data: { header: false } },
     { path: 'cs2ts', title: "C# to TS • CodeChef", component: Cs2tsComponent },
     { path: 'md2html', title: "MD to HTML • CodeChef", component: Md2htmlComponent },
     { path: 'serialized', title: "Serialized Tool • CodeChef", component: SerializedToolComponent },
     { path: 'mssqlscaffold', title: "MSSQL Scaffolder • CodeChef", component: MssqlScaffolderComponent },
+    { path: 'id', title: "ID Generator • CodeChef", component: IdGeneratorComponent },
     { path: 'downloads', title: "Downloads • CodeChef", component: DownloadsComponent },
 
     { path: '**', title: "Not Found • CodeChef", component: NotFoundComponent },

Frontend/src/app/header/header.component.html

@@ -30,11 +30,10 @@ <h1 class="fs-3 m-0">CodeChef</h1>
                     </a>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                         <li><a role="button" class="dropdown-item" [routerLink]="['/cs2ts']">C# to TS Converter</a></li>
-                        <li><a role="button" class="dropdown-item" [routerLink]="['/md2html']">Markdown to HTML
-                                Converter</a></li>
+                        <li><a role="button" class="dropdown-item" [routerLink]="['/md2html']">Markdown to HTML Converter</a></li>
                         <li><a role="button" class="dropdown-item" [routerLink]="['/serialized']">Serialized Tool</a></li>
-                        <li><a role="button" class="dropdown-item" [routerLink]="['/mssqlscaffold']">MSSQL Scaffolder</a>
-                        </li>
+                        <li><a role="button" class="dropdown-item" [routerLink]="['/mssqlscaffold']">MSSQL Scaffolder</a></li>
+                        <li><a role="button" class="dropdown-item" [routerLink]="['/id']">ID Generator</a></li>
                     </ul>
                 </div>
                 <a role="button" class="btn-header btn-hover" [routerLink]="['/downloads']"><i class="bi bi-download"></i>

Frontend/src/app/home/home.component.html

@@ -30,6 +30,7 @@ <h1>CodeChef</h1>
         <a role="button" class="btn btn-outline-success" [routerLink]="['/md2html']">Markdown to HTML Converter</a>
         <a role="button" class="btn btn-outline-success" [routerLink]="['/serialized']">Serialized Tool</a>
         <a role="button" class="btn btn-outline-success" [routerLink]="['/mssqlscaffold']">MSSQL Scaffolder</a>
+        <a role="button" class="btn btn-outline-success" [routerLink]="['/id']">ID Generator</a>
       </div>
     </div>
     <br />

Frontend/src/app/id-generator/id-generator.component.html

@@ -0,0 +1,105 @@
+<div class="container-fluid page p-4">
+    <div class="row mb-3">
+        <h2>ID Generator</h2>
+        <p>You can easily generate GUID/UUID or NanoID using this tool.<br />
+            Just configure the tool and keep generating as many valid IDs as you like!</p>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-sm-6 d-flex gap-2">
+            <div class="form-check">
+                <input class="form-check-input" type="radio" name="idTypeRadio" id="guid" [value]="true"
+                    [(ngModel)]="isGuid" (change)="generate()">
+                <label class="form-check-label" for="guid">GUID / UUID</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="radio" name="idTypeRadio" id="nanoid" [value]="false"
+                    [(ngModel)]="isGuid" (change)="generate()">
+                <label class="form-check-label" for="nanoid">NanoID</label>
+            </div>
+        </div>
+        <div class="col-sm-6 d-flex gap-2">
+            <label class="form-label d-block me-2">Options:</label>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="hyphens" [disabled]="!isGuid" [(ngModel)]="hyphen"
+                    (change)="generate()" />
+                <label class="form-check-label" for="hyphens">Hyphens</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="uppercase" [(ngModel)]="uppercase"
+                    (change)="generate()" />
+                <label class="form-check-label" for="uppercase">Uppercase</label>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-sm-4">
+            <label for="idCount" class="form-label">ID Count</label>
+            <input type="number" class="form-control" id="idCount" [(ngModel)]="count" (change)="generate()" />
+        </div>
+        <div class="col-sm-4">
+            <label for="prependText" class="form-label">Prepend Text</label>
+            <input type="text" class="form-control" id="prependText" [(ngModel)]="prepend" (change)="generate()" />
+        </div>
+        <div class="col-sm-4">
+            <label for="appendText" class="form-label">Append Text</label>
+            <input type="text" class="form-control" id="appendText" [(ngModel)]="append" (change)="generate()" />
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col d-flex gap-2">
+            <label class="form-label d-block me-2">Encoding:</label>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="base64" [(ngModel)]="base64"
+                    (change)="generate()" />
+                <label class="form-check-label" for="base64">Base64</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="rfc7515" [disabled]="!base64" [(ngModel)]="rfc7515" (change)="generate()" />
+                <label class="form-check-label" for="rfc7515">RFC7515</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="urlEncode" [disabled]="!base64"
+                    [(ngModel)]="urlEncode" (change)="generate()" />
+                <label class="form-check-label" for="urlEncode">URL Encode</label>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="row">
+        <div class="col-12">
+            <label for="csharp-code" class="form-label">Generated IDs:</label>
+            <div class="code-border" [@valueChangeAnim]="status">
+                <code-area innerStyle="min-height:300px;" [(code)]="idsCode" language="typescript" readonly="true" />
+            </div>
+            <br />
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 d-flex justify-content-center">
+            <button class="btn btn-success" (click)="generate()">Generate <i class="bi bi-stars"></i></button>
+        </div>
+    </div>
+
+    <br />
+
+    <div class="row">
+        <div class="col-12">
+            <p><strong>GUID &amp; UUID</strong><br>GUID (Globally Unique Identifier) and UUID (Universally Unique
+                Identifier) are 128-bit unique IDs widely used in databases, distributed systems, and APIs. These
+                alphanumeric strings (like <code>550e8400-e29b-41d4-a716-446655440000</code>) ensure uniqueness across
+                systems. UUIDs follow the <strong>RFC 4122</strong> standard and come in versions like <strong>v1
+                    (time-based)</strong> or <strong>v4 (random)</strong>, making them perfect for decentralized setups
+                where collisions must be avoided.</p>
+            <p><strong>NanoID</strong><br>NanoID is the sleek, modern alternative to UUIDs. It’s
+                <strong>faster</strong>, <strong>customizable</strong>, and <strong>shorter</strong>—ideal for use cases
+                like short URLs, user sessions, or SPAs. With adjustable lengths and character sets, NanoID gives
+                developers full control while staying efficient and secure. Need a compact, unique ID that’s easy to
+                work with? NanoID has you covered.</p>
+        </div>
+    </div>
+</div>

Frontend/src/app/id-generator/id-generator.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IdGeneratorComponent } from './id-generator.component';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+describe('IdGeneratorComponent', () => {
+  let component: IdGeneratorComponent;
+  let fixture: ComponentFixture<IdGeneratorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IdGeneratorComponent],
+      providers: [
+        provideAnimations(),
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(IdGeneratorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/id-generator/id-generator.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { CodeAreaComponent } from "../code-area/code-area.component";
+import { valueChangeAnim } from '../../animations/common-animations';
+import { Meta } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { v4 as uuidv4 } from 'uuid';
+import { nanoid } from 'nanoid';
+
+@Component({
+  selector: 'app-id-generator',
+  standalone: true,
+  imports: [FormsModule, CodeAreaComponent],
+  templateUrl: './id-generator.component.html',
+  animations: [valueChangeAnim]
+})
+export class IdGeneratorComponent {
+  protected status: boolean = false;
+  protected idsCode: string = "";
+  protected isGuid: boolean = true;
+  protected uppercase: boolean = false;
+  protected hyphen: boolean = true;
+  protected base64: boolean = false;
+  protected rfc7515: boolean = false;
+  protected urlEncode: boolean = false;
+  protected count: number = 7;
+  protected prepend: string = "{\"";
+  protected append: string = "\"},";
+
+  constructor(meta: Meta) {
+    meta.addTags([
+      { name: "description", content: "Generates GUID/UUID or NanoIDs with advanced settings." },
+      { name: "keywords", content: "generate, generator, ID, GUID, UUID, nanoID, free, online, advanced, setting, code, encode, encoder, encoding, base64, base, 64, url, url encode, RFC7515, RFC, 7515" },
+    ]);
+
+    this.generate();
+  }
+
+  protected generate() {
+    this.idsCode = "";
+    for (let i = 0; i < this.count; i++) {
+      let id = this.isGuid ? uuidv4().toString() : nanoid().toString();
+      if (this.uppercase) id = id.toUpperCase();
+      if (this.isGuid) if (!this.hyphen) id = id.replaceAll("-", "");
+      if (this.base64) id = btoa(id);
+      if (this.base64) if (this.rfc7515) id = id.replaceAll("+", "-").replaceAll("/", "_").replaceAll("=", "");
+      if (this.base64) if (this.urlEncode) id = encodeURIComponent(id);
+      this.idsCode += this.prepend + id + this.append + "\n";
+    }
+
+    this.status = !this.status;
+  }
+}

README.md

@@ -15,6 +15,7 @@ CodeChef is an online developer tool that aims to eliminate repetitive developer
 - **Markdown to HTML converter**<br/>Converts Markdown code to HTML code.
 - **Serialized tool**<br/>Converts serialized objects between different formats(JSON, XML, YAML, TOML).
 - **MSSQL Scaffolder**<br/>Scaffolds C# Models from MSSQL Tables and Stored Procedures.
+- **ID Generator**<br/>Generates GUID/UUID and NanoIDs with code formating and encoding.
 - **Need more tools?**<br/><a href="#Contribution">Open issue/pull request</a>, Everyone is welcome for contribution.
 
 You can [**Go to Live Website**](https://codechef.ipdotsetaf.ir) or Run the website locally.