Hey! I'm Ajay Dhangar, a software engineer, full-stack developer, and open-source advocate fueled by a single core conviction: technical learning shouldn't feel like an uphill battle against dry text.

As the Founder & CEO of CodeHarborHub, I spend my time building platforms that bridge the massive gap between academic computer science theory and actual, hands-on enterprise engineering. With a solid foundation in engineering systems, I quickly realized that the best software isn't just built to run efficiently—it's built to empower the people using it.

I consider myself an educator at heart who speaks fluent code. When I'm not configuring complex automated CI/CD workflows, diving deep into React state architecture, or optimizing performance pipelines for Algo, you can find me reviewing community pull requests, crafting tech paths, and brainstorming how next-gen automation can make open source accessible to absolutely everyone.

The Genesis: Staring at a Blank Screen​

Every line of code in Algo comes from a place of deep personal frustration. When I first dove into the world of complex data structures and algorithms, I didn't find an open, welcoming landscape. Instead, I found myself staring at cold, academic jargon, hidden behind steep paywalls, or trapped inside isolated code snippets that offered zero context on how things actually worked in production.

I remember spending countless late nights tracing recursion trees on scrap paper, wondering why technical documentation felt like it was written for compilers rather than human beings.

Driven by a passion for full-stack engineering and building things that scale, I founded CodeHarborHub. But I knew we needed a dedicated space purely for algorithms—and that’s how Algo was born. It is my attempt to build the documentation platform I desperately wished I had when I was starting out.

The Architectural Vision: Why We Build Differently​

When we started mapping out Algo, I made a conscious decision to steer clear of traditional, static Markdown files. If we want to change how people learn, we have to change how we present information. By leveraging Docusaurus (React + MDX), we treat documentation as a living application based on three core beliefs:

1. Code is Tactical, Not Textual​

Reading about a data structure without interacting with it is like reading a recipe without ever tasting the food. By integrating MDX, we empower contributors to embed live, interactive React components directly into the explanations. When you learn about a stack or a queue here, you won't just look at code—you will eventually watch elements slide in and out of memory in real-time.

2. We Think in Shapes, Not Syntax​

A raw script file doesn't teach you how an algorithm thinks; it only shows you the final result. To bridge this gap, we treat our UI like a canvas. We lean heavily on Mermaid.js for clear visual flowcharts and KaTeX to make the mathematical proofs behind time-complexity feel elegant rather than intimidating.

3. Open Source is Production Software​

I don't believe in "beginner-grade" code. At Algo, we treat our open-source project like enterprise software. From automated linting to strict semantic branching and rigorous CI/CD pipelines, we ensure that every contributor learns industry-standard habits from their very first pull request.

The GSSoC '26 Chapter: Let’s Build Together​

Having Algo selected as a featured project for the GirlScript Summer of Code (GSSoC) 2026 is incredibly meaningful to me. It brings this entire journey full circle.

As a Project Admin and mentor, my philosophy is deeply rooted in empathy: No contribution is too small, and no standard is too high.

I still remember the sheer intimidation of opening my very first pull request—the fear of a maintainer rejecting my code. Because of that, I promise you that Algo will always be a safe harbor for learners. Whether you are hunting for your very first good first issue to fix a typo, or you are an advanced engineer looking to optimize our Docusaurus pipeline rendering, there is a seat at the table with your name on it.

What’s Next on the Horizon?​

We are just getting started. We are aggressively pushing past simple text documentation to build a robust ecosystem, including:

• Interactive Simulators: Drag-and-drop visualizers built completely in React to demystify complex graph and tree traversals.
• Collaborative Learning Spaces: Real-time feedback tools right inside the docs to connect absolute beginners with core maintainers.
• Global Inclusivity: Breaking down language barriers by localizing the Algo documentation into multiple native languages.

Thank you for stopping by the repository, reading through our vision, and choosing to build the future of technical education alongside me. Take a look at our contribution guidelines, find an issue that excites you, and let's review some PRs!

Let's Connect & Collaborate​

• GitHub: @ajay-dhangar
• Project Hub: Algo Live Docs

This page acts as both a step-by-step guide on how to submit your developer spotlight and a live blueprint showcasing the advanced layout features you can use to make your story look beautiful.

Quick Start Guide​

Step 1: Create Your File​

Navigate to your local clone of the repository and create a new MDX file inside the stories directory:

# Naming convention: your-github-username.mdx
docs/stories/your-github-username.mdx

Step 2: Add Your Profile Image​

Upload a profile picture or a custom banner image to the static/img/stories/ folder, or use your direct GitHub avatar URL (https://github.com/your-username.png).

Step 3: Fill Out the Template & Open a PR​

Copy the boilerplate template below, inject your unique human experience, and submit a PR with the tag docs: added contributor story [your-username].

The Blueprint Boilerplate (Copy & Paste)​

Copy the code block below to start writing your story. We have fixed the broken component formats so you can deploy an enterprise-grade design layout effortlessly.

---
title: "My Open Source Journey: [Your Name]"
authors: [your-name]
sidebar_label: "[Your Name]"
tags: [contributor-spotlight, gssoc26, open-source]
description: "How [Your Name] contributed to Algo and overcame the fear of the first pull request."
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# My Open Source Journey: [Your Name]

<!-- Quick Summary Profile Card -->
<div style={{ 
  padding: '1.5rem', 
  background: 'linear-gradient(135deg, rgba(0, 180, 216, 0.08) 0%, rgba(0, 119, 182, 0.05) 100%)', 
  borderRadius: '12px', 
  border: '1px solid rgba(0, 180, 216, 0.2)', 
  marginBottom: '2rem',
  display: 'flex',
  gap: '1.5rem',
  alignItems: 'center',
  flexWrap: 'wrap'
}}>
  <img src="https://github.com/your-github-username.png" alt="Profile" style={{ width: '80px', height: '80px', borderRadius: '50%', border: '3px solid #00b4d8' }} />
  <div>
    <h3 style={{ margin: '0 0 0.5rem 0', color: '#00b4d8' }}>🚀 Developer Profile</h3>
    <p style={{ margin: 0, fontSize: '0.95rem' }}>
      <strong>Role:</strong> Frontend Contributor / Technical Writer <br />
      <strong>GitHub:</strong> <a href="https://github.com/your-github-username" target="_blank">@your-github-username</a> <br />
      <strong>Impact:</strong> Optimized 3 React visualizers & Documented Graph Traversals
    </p>
  </div>
</div>

## The Spark: Finding Algo

*Replace this text with your real story. How did you discover Algo? What caught your attention? Speak genuinely about your initial thoughts, fears, or goals when entering the ecosystem.*

:::tip[My Advice to Beginners]
Don't wait until you feel like an "expert" to contribute. Grab a `good first issue` and start right now!
:::

## The Breakthrough (My Contributions)

Below is how I broken down my technical achievements during my time contributing to the repository:

<Tabs>
  <TabItem default label="Code Contributions" value="code">
    ### Features Built
    * **Feature A:** Implemented an interactive sidebar component utilizing Tailwind CSS.
    * **Feature B:** Fixed a state mutation bug in the Stack Visualizer component.

    ```tsx
    // Example of code you modified or were proud of writing!
    const handleStackPush = (element) => {
      setStack((prev) => [...prev, element]);
    };
    ```
  </TabItem>
  
  <TabItem label="Technical Writing & Visuals" value="docs">
    ### Documentation & Layouts
    * **Graph Algorithms:** Authored the comprehensive documentation for Breadth-First Search (BFS).
    * **Diagrams:** Integrated custom **Mermaid.js** flowcharts to illustrate time complexities visually for newcomers.
  </TabItem>
</Tabs>

## My Milestone Timeline

```mermaid
graph LR
    A[Discovered Algo] --> B[First PR Merged]
    B --> C[Fixed Critical Bug]
    C --> D[Mentoring New Contributors]
    style B fill:#00b4d8,stroke:#fff,stroke-width:2px,color:#fff
    style D fill:#90e0ef,stroke:#0077b6,stroke-width:2px
```

## Reflections & Thank Yous

*Share your thoughts on the Algo community environment. Did you interact with the founder, Ajay Dhangar, or the project maintainers? What did you learn about collaboration?*

:::info[Community Note]
"Open source isn't just about shipping code features; it's about belonging to a community that elevates your growth."
:::

UI & Format Toolkit for a Better Look​

To make your story look highly polished, interactive, and engaging, maximize these native Docusaurus styling tools:

1. Highlight Callouts (Admonitions)​

Break up walls of text using clean markdown callout boxes to highlight critical turning points or struggles.

2. Live Flowcharts (Mermaid.js)​

Show off your learning curves or architecture fixes interactively with direct script parsing:

```mermaid
graph TD
    A[Stuck on Recursion Loops] -->|Read Algo Docs| B[Concept Clicked]
    B --> C[Wrote Interactive MDX Visualizer]

```

3. Modern Glassmorphism Dashboard Cards​

Instead of generic headers, apply inline custom layout styles to build an striking introduction element:

<div style={{ 
  padding: '1.25rem', 
  background: 'rgba(255, 255, 255, 0.03)', 
  backdropFilter: 'blur(10px)',
  borderRadius: '8px', 
  borderLeft: '5px solid #0077b6',
  boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}>
  <strong>💡 Pro-Tip:</strong> Using inline React styling syntax inside MDX files unlocks seamless design control without editing your theme CSS.
</div>

Need Help Reviewing Your Story Layout?​

If you're unsure if your layout renders correctly, drop a message into the CodeHarborHub Discord channel or ping our founder, @ajay-dhangar, directly on your pull request thread. We are always ready to help you optimize your layout!