📖 How to Add Problems & Solutions

This guide covers the complete workflow for adding new problems, marking them solved, and attaching approaches, PDFs, code files, and external solution links.

How the System Works

All problems live in one file: _data/problems.yml. Every change you make there automatically propagates to:

• /problems/ — the interactive Problems Hub (searchable, filterable table)
• /learning/dsa/<topic>/<topic>-problems/ — every topic page whose slug matches an entry in the problem’s topics array

You never need to edit topic pages manually to add or update problems.

Quick Checklist — Adding a New Problem

1. Open _data/problems.yml
2. Add a new entry block (see schema below)
3. Set topics: to the correct slug(s)
4. Save — it auto-appears everywhere
5. (Optional) Attach a solution/approach link

problems.yml Schema

Each entry in _data/problems.yml looks like this:

- id: '1'                          # LeetCode number, or a custom slug like 'gfg-two-sum'
  title: Two Sum                   # Exact problem title
  platform: leetcode               # leetcode | gfg | interviewbit | codeforces
  difficulty: easy                 # easy | medium | hard  (all lowercase)
  topics:                          # list of topic slugs — drives which pages show this problem
    - arrays
    - searching-sorting
  solved: false                    # true once you've solved it
  problem_url: https://leetcode.com/problems/two-sum/
  approach_url: ''                 # written notes, PDF, or external link — see below
  solution_url: ''                 # code file or external solution link — see below

Field reference

Recognised topic slugs

A problem can have multiple topics. It will appear on every matching topic page.

Attaching Solutions & Approaches

The Problems Hub generates buttons automatically based on what you put in approach_url and solution_url. The button label and colour are detected from the link type.

Option 1 — Written Editorial (Markdown)

Best for: written explanations, complexity analysis, diagrams, embedded code.

Step 1. Create a file in the corresponding topic subdirectory inside _editorials/ (e.g., arrays, linked-list):

_editorials/arrays/two-sum-approach.md

Step 2. Add front matter. Crucial: You must include a permalink formatted as /editorials/<slug>/ so the URL remains stable regardless of the subdirectory structure:

---
permalink: /editorials/two-sum-approach/
layout: editorial
title: "Two Sum — Approach"
problem_id: "1"
date: 2025-02-28T12:00:00.000Z
---

Step 3. Write your explanation in Markdown below the front matter.

Step 4. In _data/problems.yml, set:

approach_url: '/editorials/two-sum-approach/'

The hub renders a 📖 Editorial button.

Option 2 — Handwritten PDF Notes

Best for: scanned notebook pages, visual diagrams, hand-drawn trees/graphs.

Step 1. Place the PDF in the relevant topic directory:

_learning/dsa/Arrays/two-sum-notes.pdf

Step 2. In _data/problems.yml, set (path is case-sensitive):

approach_url: '/learning/dsa/Arrays/two-sum-notes.pdf'

The hub renders a 📝 PDF Notes button.

Note: GitHub Pages paths are case-sensitive. /Arrays/ and /arrays/ are different URLs.

Option 3 — Raw Code File (.cpp, .py, .java, etc.)

Best for: saving your solution code alongside the problem notes.

Step 1. Save your code file in the topic directory:

_learning/dsa/Arrays/solution-two-sum.cpp

Step 2. In _data/problems.yml, set:

solution_url: '/learning/dsa/Arrays/solution-two-sum.cpp'

The hub renders a 💻 Raw Code button.

Option 4 — External LeetCode Solution Link

Best for: linking to a well-upvoted community solution or your own published solution.

Copy the full URL of the solution post and set it in problems.yml:

solution_url: 'https://leetcode.com/problems/two-sum/solutions/123456/my-solution/'

The hub detects the leetcode.com domain and renders a 🔗 Solution button.

Use approach_url for editorial/theory links, solution_url for code-focused links.

Option 5 — Decap CMS (Netlify Admin UI)

If you prefer a GUI instead of editing YAML directly:

1. Go to ajdevhub.netlify.app/admin and log in.
2. Click DSA Editorials → New DSA Editorial, write your Markdown, and publish. (Note: Decap CMS may save new editorials to the root of _editorials/. You can move them into topic subdirectories later; just ensure the permalink frontmatter is set).
3. Go to Data Files → DSA Problems Database, find the problem, and paste the slug into approach_url.

Rules for approach_url vs solution_url

Never point to GitHub blob URLs. Use Jekyll-relative paths (/editorials/..., /learning/...) for internal files.

Marking a Problem as Solved

Simply change solved: false to solved: true in _data/problems.yml:

solved: true

The ✓ Solved badge updates on both the Problems Hub and the topic page automatically.

Complete Example

A fully-filled entry with a PDF note:

- id: '875'
  title: Koko Eating Bananas
  platform: leetcode
  difficulty: medium
  topics:
    - searching-sorting
    - arrays
  solved: true
  problem_url: https://leetcode.com/problems/koko-eating-bananas/
  approach_url: '/learning/dsa/Searching-Sorting/koko-banana.pdf'
  solution_url: ''

Adding a New Topic Page

If you want a dedicated problems page for a new topic (e.g., graphs):

Step 1. Create _learning/dsa/graphs/graphs-problems.md using this template:

---
layout: default
title: Graphs - Practice Problems
permalink: /learning/dsa/graphs/graphs-problems/
---

{% assign topic_slug = "graphs" %}
{% assign topic_back_url = "/learning/dsa/graphs/" %}
{% assign topic_all    = site.data.problems.problems | where_exp: "p", "p.topics contains topic_slug" %}
{% assign topic_solved = topic_all | where: "solved", true %}
{% assign topic_easy   = topic_all | where: "difficulty", "easy" %}
{% assign topic_medium = topic_all | where: "difficulty", "medium" %}
{% assign topic_hard   = topic_all | where: "difficulty", "hard" %}

Copy the full structure from any existing topic page such as _learning/dsa/Strings/strings-problems.md and update only the three topic_slug, topic_back_url, and heading values.

Step 2. Register the page in assets/js/problems.js inside topicPages:

const topicPages = {
    // existing entries...
    'graphs': '/learning/dsa/graphs/graphs-problems/',
};

Step 3. Add a chip in problems.md inside the topic-chips div:

<a href="/learning/dsa/graphs/graphs-problems/" class="topic-chip">🕸️ Graphs</a>

Step 4. Add problems with topics: [graphs] in _data/problems.yml and they appear instantly.

Troubleshooting