DEV Community: Victor Maina

How to Automate Image CAPTCHA Solving Using 2Captcha API with Python & Selenium

Victor Maina — Wed, 23 Jul 2025 21:33:50 +0000

CAPTCHAs are a common security measure to prevent bots from accessing websites. While they serve a legitimate purpose, they can be a hurdle for automation tasks. In this guide, we'll explore how to automate solving image-based CAPTCHAs using the 2Captcha API with Python and Selenium.

Prerequisites
Before we begin, ensure you have:

Python installed (3.6+ recommended)

A 2Captcha API key (Sign up here)

Basic knowledge of Selenium WebDriver

Required Python packages:

bash
pip install selenium requests pillow python-dotenv twocaptcha-python
Step 1: Setting Up the Environment
1.1 Install Required Libraries
bash
pip install selenium requests pillow python-dotenv twocaptcha
1.2 Store API Key in .env
Create a .env file:

env
APIKEY=your_2captcha_api_key_here
1.3 Initialize Selenium WebDriver
python

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

def create_browser(headless=False):
    options = Options()
    options.add_argument("--disable-blink-features=AutomationControlled")
    options.add_argument("--no-sandbox")
    options.add_argument("--disable-dev-shm-usage")

    if headless:
        options.add_argument("--headless=new")

    driver = webdriver.Chrome(
        service=Service(ChromeDriverManager().install()),
        options=options
    )
    return driver

Step 2: Extracting the CAPTCHA Image
We need to locate the CAPTCHA image and download it for processing.

python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import base64
import requests

def get_captcha_image(driver):
    try:
        captcha_img = WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.XPATH, 
                "//img[contains(@src, 'captcha') or contains(@src, 'code')]"))
        )

        img_src = captcha_img.get_attribute('src')
        if img_src.startswith('data:image'):
            img_data = base64.b64decode(img_src.split(',')[1])
        else:
            img_data = requests.get(img_src).content

        with open('captcha.jpg', 'wb') as f:
            f.write(img_data)

        return 'captcha.jpg'
    except Exception as e:
        print(f"❌ Failed to get CAPTCHA: {str(e)}")
        return None

Step 3: Solving CAPTCHA Using 2Captcha API
Now, we'll send the CAPTCHA image to 2Captcha and retrieve the solution.

python

from twocaptcha import TwoCaptcha
from dotenv import load_dotenv
import os

load_dotenv()
API_KEY = os.getenv("APIKEY")
solver = TwoCaptcha(API_KEY)

def solve_captcha(image_path):
    try:
        result = solver.normal(image_path, numeric=0, minLen=4, maxLen=6)
        return result['code']
    except Exception as e:
        print(f"❌ CAPTCHA solving failed: {str(e)}")
        return None

Step 4: Submitting the Solved CAPTCHA
Once we have the solution, we fill the input field and submit the form.

python

def submit_captcha_solution(driver, solution):
    try:
        input_field = WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.XPATH, 
                "//input[contains(@name, 'captcha') or contains(@id, 'captcha')]"))
        )
        input_field.clear()
        input_field.send_keys(solution)

        submit_button = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, "//button[@type='submit']"))
        )
        submit_button.click()
        return True
    except Exception as e:
        print(f"❌ Failed to submit CAPTCHA: {str(e)}")
        return False

Step 5: Putting It All Together
Now, let's combine all steps into a single workflow.

python

def automate_captcha_solving(driver, url):
    driver.get(url)

    # Step 1: Get CAPTCHA image
    captcha_image = get_captcha_image(driver)
    if not captcha_image:
        return False

    # Step 2: Solve CAPTCHA
    solution = solve_captcha(captcha_image)
    if not solution:
        return False

    # Step 3: Submit solution
    return submit_captcha_solution(driver, solution)

# Example Usage
if __name__ == "__main__":
    driver = create_browser(headless=False)
    success = automate_captcha_solving(driver, "https://example.com/captcha-page")
    print("✅ CAPTCHA solved successfully!" if success else "❌ Failed to solve CAPTCHA")
    driver.quit()

Common Issues & Fixes

CAPTCHA Not Detected Fix: Adjust the XPath to match the website’s CAPTCHA element.

Example:

python
"//img[contains(@class, 'captcha-img')]"

2Captcha API Fails Fix: Check your API key balance and ensure the image is clear.

Enhance image quality before sending:

python

from PIL import Image, ImageFilter, ImageEnhance

def enhance_image(image_path):
    img = Image.open(image_path)
    img = img.convert('L')  # Grayscale
    enhancer = ImageEnhance.Contrast(img)
    img = enhancer.enhance(2.0)  # Increase contrast
    img.save('enhanced_captcha.jpg')
    return 'enhanced_captcha.jpg'

Submit Button Not Clickable Fix: Use JavaScript click as a fallback:

python
driver.execute_script("arguments[0].click();", submit_button)
Conclusion
By using 2Captcha API with Selenium, we can automate CAPTCHA solving efficiently. This method is useful for:

Web scraping (where CAPTCHAs block data extraction)

Automated testing (bypassing CAPTCHAs in test environments)

Bot automation (for repetitive tasks requiring login)

Final Thoughts
While automation is powerful, always respect website policies and use this method ethically. Some websites may block automated CAPTCHA-solving attempts, so use it responsibly.

How to Create and Publish a VS Code Extension

Victor Maina — Sat, 19 Jul 2025 23:47:50 +0000

📦 Step 1: Install Required Tools
We started by installing the Yeoman generator for VS Code:

npm install -g yo generator-code
Then we used the generator to scaffold a new extension:

yo code
💡 This gives you multiple options like creating a TypeScript/JavaScript extension, web extension, or even a theme/snippet pack. We selected the basic TypeScript extension for this demo.

⚙️ Step 2: Install the VSCE Publisher Tool
VSCE (Visual Studio Code Extension) is the CLI tool used to package and publish your extension to the marketplace.

We installed it using:

npm install -g @vscode/vsce

⚠️ If you see a warning like EBADENGINE, it means your Node.js version is slightly outdated. VSCE is asking for Node >=20.18.1, while you have v20.17.0. Consider updating Node.js if issues persist.

🔐 Step 3: Get a Personal Access Token (PAT)
To publish to the VS Code Marketplace, you need a Personal Access Token (PAT) from your Microsoft account via Azure DevOps. Here's how:

Go to: https://dev.azure.com

In the top-right corner, click on your profile picture → "Personal access tokens".

Click New Token:

Organization: All accessible organizations

Scopes: Select only "Marketplace" → "Manage"

Expiry: You can choose 90 days or custom

Save the token (copy it somewhere safe — it's shown once).

👤 Step 4: Create a Publisher
Before publishing, you need to create a publisher (your dev alias or brand name):

vsce create-publisher your-publisher-name
You'll be asked for:

Your Personal Access Token

Publisher display name

This will register your publisher to the VS Code Marketplace.

📦 Step 5: Package Your Extension
Now, navigate into your extension folder and run:

vsce package

This will generate a .vsix file (e.g., my-extension-0.0.1.vsix) that contains your whole extension, ready for publishing or manual installation.

🚀 Step 6: Publish to Marketplace
Once packaged, you can publish directly:

vsce publish

Or specify a version bump manually:

vsce publish minor vsce publish major vsce publish patch
🔑 You'll be prompted for your PAT again unless it's cached.

🎯 Optional: Install Locally for Testing
Before publishing, you can test your .vsix locally by running:

code --install-extension my-extension-0.0.1.vsix

💰 Do People Earn from Publishing Extensions?
Publishing alone doesn’t pay. However, you can monetize in several ways:

Offer pro features via APIs or subscriptions

Integrate SaaS tools (e.g., integrations with GPT, Firebase, etc.)

Offer paid versions outside the marketplace

Accept donations via GitHub Sponsors or Buy Me a Coffee

Build a portfolio/brand that leads to freelance or dev job offers

✅ Final Thoughts
Now that your extension is published:

Track downloads & installs via Visual Studio Marketplace

Update frequently with new features and fixes

Share it on GitHub, Reddit, Twitter, and developer forums

What is a Slug and Why Your Website Needs It for Better SEO

Victor Maina — Thu, 10 Jul 2025 23:07:13 +0000

When building modern websites especially e-commerce stores or blogs — you'll often hear developers say, "Let's create a slug for this page." But what exactly is a slug, and why should you care?

A slug is the part of a URL that comes after the domain name and identifies a specific page in a readable way.

For example:

/hoodies

/blog/why-seo-matters

/product/254-streetwear-shirt

Why Not Use an ID Instead?
You could build URLs like this:

/product?id=12345
But slugs are better because:

✅ They're readable
✅ They're memorable
✅ They look cleaner
✅ And... Google loves them!

Why Slugs Help SEO
Here’s why slugs are powerful for SEO (Search Engine Optimization):

Keywords in Slugs Improve Ranking
When someone searches “254 streetwear shirt”, Google checks if those words appear in your slug.

Users Are More Likely to Click Clean URLs
Which would you click?

/product?id=12345

/products/254-streetwear-shirt

Slugs Help Build Trust
Clean, human-readable URLs feel more legit and professional.

🔧 How We Use Slugs in Code (Next.js Example)
In our e-commerce project, we use Next.js with a dynamic route:

/app/[slug]/page.tsx
This tells Next.js:

"Any product or blog post that has a unique slug like /hoodies or /254-threads-cap will load this page."

Then in code, we access that slug using:

async function Page({ params }: { params: { slug: string } }) {
  const slug = params.slug;
  // Now you can query your database for the product with that slug
}

🛍 Real World Example
If you’re selling a hoodie named "254 Threads Hoodie", your product URL would look like:

/products/254-threads-hoodie
Instead of:

/products?id=76383

That last part — like "254-streetwear-shirt" — is the slug.

Slugs are more than just fancy URLs. They’re:

A big part of your user experience
A simple but powerful SEO strategy
And a best practice for modern websites and apps

📣 So next time you're naming a blog post or product page, think about your slug — your future self (and Google) will thank you!

Why Your Favicon Isn't Updating Across All Browsers (And How to Fix It)

Victor Maina — Tue, 01 Jul 2025 11:51:29 +0000

Have you ever updated your favicon in a Next.js project, only to see the new icon show up in one browser (like Edge) but not in others like Brave or Chrome?

You're not alone—and there's a good reason for this.

Modern browsers—especially Chromium-based ones like Brave, Chrome, and Opera—aggressively cache favicons. This means even if you've updated the favicon.ico file and restarted your dev server, the browser might still display the old one from cache.

This caching behavior improves performance, but it causes confusion during development.

✅ How I Fixed It (in Brave)
Here’s what finally worked:

🔁 1. Hard Refresh the Tab
Force Brave to reload without using cache:

Windows/Linux: Ctrl + Shift + R

macOS: Cmd + Shift + R

If that fails…

🧼 2. Clear the Favicon Cache
Brave (and Chrome) provide a hidden tool for this:

Open chrome://favicon-internals in Brave

Click on Clear Favicon Cache

Reload your site

Still not working? Try one more thing…

📝 3. Rename the Favicon File
Browsers cache based on the URL. Renaming the file tricks the browser into thinking it’s a new one.

Rename your file to something like favicon-v2.ico

Update your Next.js metadata:

tsx
Copy
Edit
export const metadata = {
title: "254THREADS",
icons: {
icon: "/favicon-v2.ico",
},
};
Now restart your dev server and refresh the page.

💥 That One Time globals.css Crashed My Next.js Build

Victor Maina — Mon, 30 Jun 2025 21:33:24 +0000

You ever update some colors in your tailwind.config.ts and suddenly your entire Next.js app refuses to compile? Yeah. That happened to me.

Error I saw:

SyntaxError: Unexpected token, expected "(" (18:19)
Import trace for requested module:
./src/app/globals.css
And I was like... huh? That file only has three Tailwind directives. What gives?

🔍 The Culprit? My PostCSS Config
Turns out, the issue wasn’t in the CSS at all — it was my postcss.mjs file. I had:

js
plugins: {
tailwindcss: {},
}
What I didn't have was this essential plugin:

js
autoprefixer: {}, // <- 👀 this bad boy is mandatory
Without autoprefixer, Next.js quietly panics when it tries to compile CSS — and throws an error totally unrelated to the root cause. Classic.

🛠️ The Fix
Install Autoprefixer

bash
npm install -D autoprefixer
Update postcss.mjs

js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

export default config;
Clear the cache & restart

bash
rm -rf .next
npm run dev
Boom 💣 No more phantom syntax errors.

💡 Final Tip
If your Next.js build suddenly explodes and you didn’t even touch JavaScript, suspect your CSS pipeline. It’s always the quiet files 😅

Don’t Click, Just grep: The Smart Way to Find Files Fast

Victor Maina — Mon, 16 Jun 2025 19:12:24 +0000

How to Use grep to Find Files by Extension Like a Command-Line Ninja
Ever found yourself swimming in a sea of downloads trying to fish out all the .jpg images? If you love clean terminals and fast results, grep has your back.

Here’s how to use grep like a pro to filter files by extension straight from your terminal.

📁 List .jpg Files in Downloads
bash

ls ~/Downloads | grep '\.jpg$'

📁 Case-Insensitive Search (JPG, jpg, JpG...)
bash

ls ~/Downloads | grep -i '\.jpg$'

🔁 Search Recursively Through Subfolders
bash

find ~/Downloads -type f | grep '\.jpg$'

💡 Bonus: Windows Equivalent
CMD:
cmd

dir %USERPROFILE%\Downloads\*.jpg

PowerShell:
powershell

Get-ChildItem "$env:USERPROFILE\Downloads" -Filter *.jpg

Getting set with Athena in simple steps

Victor Maina — Thu, 17 Apr 2025 12:53:40 +0000

Getting Started with Amazon Athena:

Query Your S3 Data with SQL
Amazon Athena makes it incredibly easy to explore and analyze data stored in Amazon S3 using standard SQL queries. Whether you're working with log files, application data, or structured datasets, Athena allows you to treat your S3 files as a database—no ETL or server setup required.

🧠 What Is Amazon Athena?
Amazon Athena is a serverless, interactive query service that lets you analyze data in Amazon S3 using standard SQL. There's no infrastructure to manage, and you only pay for the queries you run.

Athena supports various file formats including:

CSV

JSON

ORC (Optimized Row Columnar)

Apache Avro

Parquet

It’s also optimized for performance through parallelism, making it fast and efficient for large datasets.

💸 How Much Does Athena Cost?
Athena charges you based on the amount of data scanned per query. As of writing, the cost is $5 per TB scanned, so it’s important to optimize your data (e.g., by compressing it or using columnar formats like Parquet or ORC).

📦 Step 1: Prepare Your S3 Bucket

If this is your first time using Athena, you’ll need to set up an S3 bucket to store your data. Here’s how:

Go to the S3 console and create a new bucket.

Make sure you note the AWS region—Athena and the S3 bucket must be in the same region.

Upload your dataset. For this tutorial, we’re using a sample Order data CSV file.

We’ll also create a second S3 bucket to store the results of our Athena queries (this is required by Athena).

🧰 Step 2: Set Up AWS Glue for Schema Discovery
Athena needs a schema to understand your data. Instead of defining it manually, we’ll use AWS Glue to automatically crawl and catalog our dataset.

Go to the AWS Glue Console.

Create a new database (e.g., order_data_db).

Create a crawler:

Set the source as your S3 data bucket.

Choose the database you just created.

Run the crawler to populate the schema.

🔍 Step 3: Query Your Data in Athena

Now that the table is ready, it’s time to query your data:

Open the Athena Query Editor.

Make sure the correct database is selected.

Run a sample SQL query like:

SELECT * FROM orders LIMIT 10;
You’ll see the results right in your browser. Athena also saves them as CSV files in your specified results bucket.

📊 Bonus: Visualize Your Data with Amazon QuickSight
Want to turn your raw queries into dashboards? You can connect Athena to Amazon QuickSight to create dynamic visualizations of your data. This is great for exploring patterns or trends in logs, sales data, and more.

🧹 Step 4: Clean Up Your Resources
Once you're done, be sure to delete any AWS resources to avoid ongoing charges:

Delete the S3 buckets you created (both the data and the results buckets).

Delete the AWS Glue crawler and database.

Remove any saved Athena queries or saved workgroups, if applicable.

Remember, Athena’s billing is based on the volume of data scanned cleanups and query optimization are key to keeping costs low.

✅ Wrapping Up
Amazon Athena is a powerful tool that simplifies querying large datasets stored in S3 using familiar SQL syntax. It’s perfect for analysts, engineers, and data enthusiasts who want fast insights without the overhead of managing infrastructure.

In this tutorial, we walked through setting up S3, using AWS Glue to create a schema, querying with Athena, and finally cleaning up your resources. Now you’re ready to start analyzing your own data!

Would you like me to help turn this into a blog post or Markdown file, or add code blocks/screenshots for each step?

Reason

Resolving CORS Issues

Victor Maina — Mon, 10 Mar 2025 19:59:16 +0000

CORS (Cross-Origin Resource Sharing) errors occur when the frontend and backend are hosted on different domains or ports. To fix this:

Install CORS Middleware:
In your backend, install the cors package:

bash
Copy
npm install cors
Enable CORS:
Update your backend code to allow requests from the frontend:

javascript
Copy
const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
origin: 'http://102.37.21.212:3000', // Frontend URL
credentials: true
}));

app.post('/auth/login', (req, res) => {
// Handle login
});

app.listen(4000, () => {
console.log('Backend running on port 4000');
});
Restart the Backend:
Restart the backend to apply the changes:

bash
Copy
pm2 restart uvotake-backend
This ensures the backend accepts requests from the frontend.

Opening Ports in Azure To allow external access to your app, open the necessary ports in Azure:

Go to your VM in the Azure Portal.

Under Networking, add inbound port rules:

Frontend: Open port 3000 for HTTP access.

Backend: Open port 4000 for API access.

Save the rules and test connectivity:

bash
Copy
curl http://:3000
curl http://:4000/auth/login
This ensures your app is accessible to users.

Using PM2 for Process Management To keep your app running after disconnecting from the VM, use PM2:

Install PM2:

bash
Copy
sudo npm install -g pm2
Start the App:
Use PM2 to serve the frontend:

bash
Copy
pm2 serve build 3000 --name "uvotake-frontend"
Save the Process:
Ensure the app starts automatically after a reboot:

bash
Copy
pm2 save
pm2 startup
PM2 ensures your app runs continuously.

Fixing "Reached Heap Limit" Errors

Victor Maina — Mon, 10 Mar 2025 19:58:38 +0000

When building your React app, you might encounter FATAL ERROR: Reached heap limit. This happens because the VM has limited memory (e.g., 1 GiB). Here’s how to fix it:

Increase Memory for Node.js:
Update the build script in package.json:

json
Copy
"build": "node --max-old-space-size=2048 $(which react-scripts) build"
This allocates 2 GB of memory for the build process.

Add Swap Space:
Create a swap file to provide additional virtual memory:

bash
Copy
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
Rebuild the App:
Run the build again:

bash
Copy
npm run build
This resolves memory issues during the build process.

Creating a Virtual Machine (VM) on Azure

Victor Maina — Mon, 10 Mar 2025 19:56:53 +0000

Hosting your app starts with creating a VM on Azure. Here’s how to do it:

Go to the Azure Portal and click Create a Resource.

Select Virtual Machine and choose a configuration (e.g., Ubuntu 24.04, Standard B1s).

Configure networking, storage, and SSH keys for secure access.

Once the VM is created, note its public IP address (e.g., 102.37.21.212).

Use SSH to connect to the VM:

bash
Copy
ssh -i azureuser@
This VM will serve as the hosting environment for your app.

Uploading Files to the VM Without Docker To deploy your app without Docker:

Transfer Files:
Use scp to copy your frontend and backend files to the VM:

bash
Copy
scp -r -i azureuser@:
Example:

bash
Copy
scp -r -i ~/keys/uvotakeV_key.pem ~/Desktop/frontend azureuser@102.37.21.212:/home/azureuser/frontend
Install Dependencies:
SSH into the VM and install dependencies:

bash
Copy
cd ~/frontend
npm install
Build and Serve:
Create a production build and serve it:

bash
Copy
npm run build
serve -s build -l 3000
This approach avoids Docker and directly deploys your app to the VM.

Jenkins, the journey to being a devops dev

Victor Maina — Wed, 05 Mar 2025 09:55:24 +0000

Jenkins is an open-source automation server primarily used for Continuous Integration (CI) and Continuous Delivery (CD) in software development. It helps automate various tasks in the software development lifecycle, such as building, testing, and deploying applications. Here's how it works:

Jenkins Server Jenkins runs on a server, which can be installed on a variety of operating systems (Linux, Windows, macOS). It has a web-based interface where you can configure Jenkins jobs, pipelines, and monitor the execution of these tasks.
Jobs A job in Jenkins is a single task or a series of tasks that Jenkins automates. Jobs could be anything like building code, running tests, or deploying software. You can define jobs through the web interface or by using configuration files like Jenkinsfile (a text file that defines the pipeline stages).
Pipelines Pipelines are a set of automated steps or stages that describe the process of building, testing, and deploying an application. A Jenkins Pipeline is typically defined in a Jenkinsfile and can be a Declarative Pipeline or a Scripted Pipeline. Pipelines define how the project is built, tested, and delivered through various environments (dev, test, production).
Source Code Management (SCM) Jenkins can be integrated with various source control repositories like Git, Subversion, etc. Jenkins pulls the latest code from the repository whenever a new build is triggered (manually or automatically, e.g., via a webhook from GitHub).
Build and Test Jenkins automates the build process (compiling code, creating artifacts) and testing process (running unit tests, integration tests) to ensure that the codebase is stable. After the build, Jenkins can also trigger additional steps like static code analysis or security scans.
Triggering Jobs Jenkins jobs can be triggered in several ways: Poll SCM: Jenkins periodically checks for changes in the source code repository and starts a build if changes are detected. Webhook: Many modern version control systems like GitHub can send a webhook to Jenkins to trigger a build when code is pushed to the repository. Scheduled Builds: You can schedule builds to run at specific times, such as nightly or weekly. Manual Triggers: Developers or administrators can manually trigger jobs from the Jenkins interface.
Agents/Nodes Jenkins can be scaled horizontally by using agents (also called slaves in earlier versions). Agents are machines that help Jenkins execute tasks. The main Jenkins server (Master) coordinates the execution of tasks, while agents can run the actual build processes. This allows for better load distribution and faster processing of builds.
Notifications and Reporting After each build or test, Jenkins provides feedback via the user interface, email, or integration with other tools like Slack or Microsoft Teams. Jenkins can also generate build reports and display test results, code coverage, and other metrics.
Plugins Jenkins has a robust ecosystem of plugins that extend its functionality. You can add plugins to integrate Jenkins with various tools and technologies, such as: Docker for containerized builds AWS for deployment Slack for notifications GitHub for source control Selenium for automated testing Summary Jenkins works by automating software development tasks through jobs and pipelines. It integrates with version control systems, triggers builds and tests, scales using agents, and provides feedback through reports and notifications. Through its extensive plugin ecosystem, Jenkins can be customized to support nearly any development workflow.

# Using Open-Source APIs like WakaTime to Track Your Coding Stats in Your Projects

Victor Maina — Thu, 27 Feb 2025 20:12:38 +0000

Introduction

Open-source APIs provide a great way to integrate useful data into your projects. WakaTime is one such API that helps developers track their coding activity across different projects and languages. In this article, we'll explore how to fetch coding stats from WakaTime and use them in a React application to visualize coding time using Chart.js.

Step 1: Get Your WakaTime API Key

To access WakaTime's API, you need an API key. Follow these steps to get it:

Go to WakaTime.
Sign in and navigate to your Account Settings.
Under API Key, copy the key.

Step 2: Fetch Data from WakaTime API

WakaTime provides various endpoints, but for this example, we will use the /users/current/stats/last_7_days endpoint to get coding stats for the past week.

Example API Request

curl -H "Authorization: Bearer YOUR_API_KEY" \
     https://wakatime.com/api/v1/users/current/stats/last_7_days

Sample Response

{
  "stats": {
    "data": {
      "languages": [
        { "name": "JavaScript", "total_seconds": 14400 },
        { "name": "Python", "total_seconds": 7200 }
      ],
      "projects": [
        { "name": "Portfolio Website", "total_seconds": 10800 },
        { "name": "To-Do App", "total_seconds": 3600 }
      ]
    }
  }
}

Step 3: Fetch and Display WakaTime Stats in a React App

Now, let’s create a Statistics.tsx component in a React app to fetch and display this data using Chart.js.

Install Dependencies

Run the following command to install Axios and Chart.js:

npm install axios chart.js react-chartjs-2

Create `Statistics.tsx`

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const Statistics: React.FC = () => {
  const [chartData, setChartData] = useState({ labels: [], datasets: [] });
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:10000/api/stats");
        console.log("Raw API Response:", response.data);

        const apiData = response.data?.stats?.data;
        if (!apiData || !apiData.languages || !apiData.projects) {
          console.warn("⚠️ No valid data found in API response.");
          return;
        }

        setChartData({
          labels: apiData.languages.map((lang) => lang.name),
          datasets: [
            {
              label: "Hours Spent",
              data: apiData.languages.map((lang) => lang.total_seconds / 3600),
              backgroundColor: "rgba(54, 162, 235, 0.6)",
            },
          ],
        });

        setProjects(apiData.projects.map((project) => ({
          name: project.name,
          timeSpent: `${Math.floor(project.total_seconds / 3600)} hrs`,
          link: `/projects/${encodeURIComponent(project.name)}`,
        })));
      } catch (error) {
        console.error("❌ Error fetching WakaTime data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="p-6">
      <h2 className="text-3xl font-bold">Coding Stats (Last 7 Days)</h2>
      <div>
        <Bar data={chartData} options={{ responsive: true }} />
      </div>
      <h3 className="text-2xl">Projects</h3>
      {projects.length > 0 ? (
        projects.map((project, index) => (
          <a key={index} href={project.link} className="block p-2">
            {project.name} - {project.timeSpent}
          </a>
        ))
      ) : (
        <p>No project data available.</p>
      )}
    </div>
  );
};

export default Statistics;

Step 4: Run Your React App

Make sure your API server is running and then start your React app:

npm start

Go to your browser and check the /statistics route to see the visualization.

Conclusion

By integrating WakaTime’s open-source API, you can track your coding activity, visualize your most-used languages, and monitor project time—all inside your own custom dashboard! 🚀

DEV Community: Victor Maina

How to Automate Image CAPTCHA Solving Using 2Captcha API with Python & Selenium

How to Create and Publish a VS Code Extension

What is a Slug and Why Your Website Needs It for Better SEO

Why Your Favicon Isn't Updating Across All Browsers (And How to Fix It)

💥 That One Time globals.css Crashed My Next.js Build

Don’t Click, Just grep: The Smart Way to Find Files Fast

Getting set with Athena in simple steps

Resolving CORS Issues

Fixing "Reached Heap Limit" Errors

Creating a Virtual Machine (VM) on Azure

Jenkins, the journey to being a devops dev

# Using Open-Source APIs like WakaTime to Track Your Coding Stats in Your Projects

Introduction

Step 1: Get Your WakaTime API Key

Step 2: Fetch Data from WakaTime API

Example API Request

Sample Response

Step 3: Fetch and Display WakaTime Stats in a React App

Install Dependencies

Create Statistics.tsx

Step 4: Run Your React App

Conclusion

Create `Statistics.tsx`