Added the free or paid badge to each developer bootcamp card

[SamarthJ2004]

Description

Added a “Free” or “Paid” badge to each developer bootcamp card to indicate the pricing type. A new property, priceType, of type string, has been added to the bootcamps array to store this value. The badge is displayed using the pre-existing Subject Badge component within the learning tool component.

Each bootcamp card now includes a badge that clearly shows if the bootcamp is “Free” or “Paid,” enhancing user experience by providing immediate pricing information.

Here’s a list with each bootcamp’s name and its type:
• ConsenSys Academy: Paid
• BloomTech: Paid
• Questbook: Free
• Metaschool: Free
• NFT School: Free
• Platzi: Paid
• Speed Run Ethereum: Free
• Alchemy University: Free
• LearnWeb3: Free
• Cyfrin Updraft: Free

Related Issue

• Closes Developer bootcamps: free vs paid #10677

As I am proficient with English, I have changed the second heading but it will require its translation in other languages.

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	d253a25
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/68c68854d4a85a0008a35f59
😎 Deploy Preview	https://deploy-preview-14717--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 45 (🔴 down 6 from production) Accessibility: 96 (🟢 up 1 from production) Best Practices: 92 (🔴 down 8 from production) SEO: 92 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[konopkja]

@coderabbitai check the code

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

I'll examine the codebase to review the implementation of the free/paid badges for developer bootcamp cards.

---

🏁 Script executed:

#!/bin/bash
# Find bootcamp-related files to understand the implementation
echo "=== Finding bootcamp-related files ==="
fd -t f -e js -e jsx -e ts -e tsx -e json | xargs rg -l "bootcamp" -i

echo -e "\n=== Looking for priceType property usage ==="
rg "priceType" -n -C3

echo -e "\n=== Finding Subject Badge component usage ==="
rg "SubjectBadge" -n -C2

echo -e "\n=== Looking for bootcamp data structure ==="
rg "bootcamps.*\[" -n -A10 -B2

Length of output: 9969

---

🏁 Script executed:

#!/bin/bash
# Let's examine the complete ProductCard component to understand the SubjectBadge styling
echo "=== Examining ProductCard component ==="
cat src/components/ProductCard.tsx

echo -e "\n=== Checking the type definitions ==="
cat src/lib/types.ts | rg -A20 -B5 "LearningTool"

echo -e "\n=== Looking at the SubjectBadge styling logic ==="
rg -A30 "backgroundProp.*=" src/components/ProductCard.tsx

Length of output: 5030

---

🏁 Script executed:

#!/bin/bash
# Let's check the Tag component to understand the available status options
echo "=== Finding Tag component ==="
fd -t f -e tsx -e ts | xargs rg -l "Tag.*=.*" | head -5

echo -e "\n=== Examining Tag component implementation ==="
rg -A20 -B5 "status.*:" src/components/ui/tag.tsx 2>/dev/null || rg -A20 -B5 "Tag.*=" src/components/ui/

echo -e "\n=== Looking for Tag component exports ==="
fd -t f -e tsx -e ts -p "**/tag*" | head -3 | xargs cat

echo -e "\n=== Checking if there are any styling issues or improvements needed ==="
rg -n "priceType.*Free|priceType.*Paid" -C2

Length of output: 7363

---

🏁 Script executed:

#!/bin/bash
# Let's check for any TypeScript or linting errors and validate the data consistency
echo "=== Checking TypeScript types and consistency ==="
rg -n "priceType" src/lib/types.ts -A2 -B2

echo -e "\n=== Validating all bootcamp entries have priceType ==="
echo "Total bootcamp entries:"
rg "name:.*\".*\"" src/pages/developers/learning-tools.tsx | wc -l

echo -e "\nBootcamp entries with priceType:"
rg "priceType:" src/pages/developers/learning-tools.tsx | wc -l

echo -e "\n=== Checking for consistent priceType values ==="
rg "priceType.*\".*\"" src/pages/developers/learning-tools.tsx | sort | uniq -c

echo -e "\n=== Looking for any potential issues with the SubjectBadge implementation ==="
# Check if Free and Paid have specific styling
rg -C3 "case.*Free|case.*Paid" src/components/ProductCard.tsx

echo -e "\n=== Checking the bootcamp data structure for consistency ==="
# Verify all bootcamp entries have the required fields
rg -A15 -B2 "name:.*ConsenSys Academy" src/pages/developers/learning-tools.tsx

Length of output: 1070

---

🏁 Script executed:

#!/bin/bash
# Let's see all bootcamp entries to identify which ones are missing priceType
echo "=== All bootcamp entries and their priceType status ==="
awk '
/name: "/ {
    name = $0
    getline
    desc = $0
    # Read next 10 lines to find priceType
    priceType = ""
    for(i=0; i<10; i++) {
        getline
        if($0 ~ /priceType:/) {
            priceType = $0
            break
        }
        if($0 ~ /^    }/) break
    }
    print name (priceType ? " -> " priceType : " -> MISSING priceType")
}
' src/pages/developers/learning-tools.tsx

echo -e "\n=== Let's check if tutorials/courses also have bootcamps mixed in ==="
rg -B5 -A5 "const.*tutorials|const.*courses" src/pages/developers/learning-tools.tsx

Length of output: 1191

---

🏁 Script executed:

#!/bin/bash
# Let's get the full context of the learning-tools file to understand the structure
echo "=== Understanding the full structure of learning tools ==="
rg -n -A5 -B2 "const.*=.*Array.*LearningTool" src/pages/developers/learning-tools.tsx

echo -e "\n=== Let's see the different sections in the file ==="
grep -n -E "const .* = \[" src/pages/developers/learning-tools.tsx

echo -e "\n=== Checking the Platzi entry which seems to be missing priceType ==="
rg -A10 -B2 "name.*Platzi" src/pages/developers/learning-tools.tsx

Length of output: 673

---

@konopkja I've thoroughly reviewed the code for adding free/paid badges to developer bootcamp cards. Here's my analysis:

✅ What's Working Well:

1. Clean Implementation: The priceType property is properly added to the LearningTool type definition and implemented consistently across components
2. Good Integration: Uses the existing SubjectBadge component which maintains visual consistency with other badges
3. Proper Data Flow: The property flows correctly from data → LearningToolsCardGrid → ProductCard → SubjectBadge
4. Consistent Values: All implemented entries use either "Free" or "Paid" consistently

⚠️ Issues Found:

1. Incomplete Implementation: Only 10 out of 21 total learning tools have the priceType property:

   • ✅ Bootcamps with priceType (10): ConsenSys Academy, BloomTech, Questbook, Metaschool, NFT School, Speed Run Ethereum, Alchemy University, LearnWeb3, Cyfrin Updraft
   • ❌ Missing priceType (11): Remix, Eth.build, Replit, ChainIDE, Tenderly, Atlas, DApp World, CryptoZombies, Ethernauts, Capture The Ether, Node Guardians, and importantly Platzi

2. Platzi Entry Missing priceType: According to your PR description, Platzi should be "Paid" but it's missing the property:

   {
     name: "Platzi",
     description: t("page-developers-learning-tools:page-learning-tools-platzi-description"),
     url: "https://platzi.com/escuela/escuela-blockchain/",
     image: PlatziImage,
     alt: t("page-developers-learning-tools:page-learning-tools-platzi-logo-alt"),
     background: "#121f3d",
     subjects: ["Solidity", "web3"],
     locales: ["es"],
     // Missing: priceType: "Paid",
   }

3. Styling Consideration: The SubjectBadge uses a default "normal" status for unknown subjects (including "Free"/"Paid"), which gives them a neutral gray appearance. Consider if you want distinct colors for pricing badges.

🔧 Recommended Fixes:

1. Add missing Platzi priceType:

   {
     name: "Platzi",
     // ... other properties
     subjects: ["Solidity", "web3"],
     locales: ["es"],
     priceType: "Paid",
   }

2. Clarify scope: The other 11 tools appear to be in the "games" section rather than bootcamps. If pricing badges are only for bootcamps, this is correct. If they should apply to all learning tools, those entries need priceType too.

3. Optional: Enhanced styling for better visual distinction:

   // In SubjectBadge component
   case "Free":
     return "success"  // Green for free
   case "Paid": 
     return "warning"  // Orange for paid

The implementation approach is solid, but needs the missing Platzi entry completed and clarification on whether other learning tools should include pricing information.

[konopkja]

@wackerow lgtm

[wackerow]

Thanks @SamarthJ2004! Looks good!

Been a while since these components have been touches so cleaned up a couple small things, and extracted the "Paid" and "Free" strings for translation... pulling in

[wackerow]

@all-contributors please add @SamarthJ2004 for code

[allcontributors]

@wackerow

I've put up a pull request to add @SamarthJ2004! 🎉