DEV Community: ELABBASSI Hicham

🏈⚽🏀 Hacktoberfest, from Side Project to Pro Sports: Contribute to a Library Used by NBA, NFL & Premier League Coaches

ELABBASSI Hicham — Fri, 03 Oct 2025 15:11:14 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Maintainer Spotlight

🌍 Introducing react-native-body-highlighter

react-native-body-highlighter is a React Native component that allows you to display and highlight interactive human body parts. It’s a simple yet powerful tool for apps in sports, fitness, health, and education.

Today, it’s being used in TeamBuildr, an Athletes apps & tools ecosystem trusted by NBA, NFL, NHL, and Premier League professional coaches to annotate injuries, track recovery, visualize training, etc. Yes — your Hacktoberfest contributions could end up in the hands of pro coaches working with world-class athletes .

✨ The Unexpected Journey Behind the Repo

This project started in a very different place. A few years ago, I built a personal workout-tracking app — the kind many fitness enthusiasts dream of making at least once. I built it from scratch: all the features, all the UI, all the code. But like many passion projects, it fizzled out:

No marketing strategy.
Weak UI/UX.
Too much time spent coding and not enough validating.

The app disappeared, but one piece of it stuck: the code to highlight muscle groups for each exercise. Instead of letting it rot, I decided to make it a public GitHub repo — and so react-native-body-highlighter was born.

Fast forward: I recently discovered through its forks that this tiny component is now integrated into professional sports apps. What started as leftover code from a failed app is now used daily by coaches training some of the best athletes in the world. That’s the magic of open source.

🤝 How to Contribute

This Hacktoberfest, I’d love to welcome new contributors to help grow react-native-body-highlighter. There’s so much potential for this library to become even more useful.

Right now, there are already 10+ open issues ready for the community to tackle but feel free to open new issues (I’ll be creating more in the upcoming days to make sure everyone who wants to contribute has a way in).

Here is the simple process to follow:
1- Answer to the issue "I will work on this issue"
2- Fork the repo
3- Create a new branch and push your code
4- Create a pull request and add the issue link in the description

Congratulation, you've contributed to an open source repo :)

🎉 The Power of Community

Open source often starts small — sometimes as code you wrote for yourself, sometimes as a side project that didn’t “make it.” But once shared, it can take on a life of its own. I’m humbled and grateful to every contributor and user who has helped grow this library into something useful far beyond what I imagined.

So, if you want your Hacktoberfest contributions to reach professional sports coaches, elite athletes, and beyond, this is your chance to make an impact.

Breaking down the text barrier of LLM chatbots with KendoReact and MCP-UI

ELABBASSI Hicham — Sat, 27 Sep 2025 14:13:49 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Large Language Model (LLM) chatbots are powerful, but most of them are still limited to text-only answers. When users ask for complex data, the model ends up dumping plain text instead of showing something truly usable.

For this challenge, I built a system that breaks this limitation by combining:

KendoReact components for polished, interactive UI.
Supabase as the database backend.
MCP-UI (Model Context Protocol UI) as the glue between the chatbot and UI components.

The result is a chatbot that doesn’t just reply with words — it can render live KendoReact Grids and Cards directly in the conversation, powered by real Supabase queries.

Here’s how it works:

On the server side, I created an MCP-UI server using @mcp-ui/server. It exposes two tools:
- show_grid: queries tables (tasks, projects, users, user_task) with filters and joins, and returns a KendoReact Grid.
- show_user_details: fetches a user profile plus task counts (todo, in_progress, done), and returns a KendoReact Card.
On the client side, I built a chatbot UI using KendoReact components and @mcp-ui/client. This chatbot can receive UIResource messages from the server and render them inside the conversation.

Why not just build a custom UI directly? Because MCP-UI makes the components portable. Any MCP host that supports @mcp-ui/client (like LibreChat, Nanobot, Goose, etc) can consume my server’s interactive Grids and Cards without any custom integration.

I believe this is an early preview of the future of LLM applications. Shopify is already experimenting with “agentic commerce” using similar patterns. With Kendo UI’s battle-tested components and MCP-UI’s portability, we can imagine many more use cases:

Live statistics dashboards tied to the ongoing conversation.
Interactive workflows where one MCP server’s results feed another’s UI.
Chatbots that don’t just explain data, but let you explore and manipulate it.

Demo

https://kendo-ai-bot-mcp-ui.vercel.app/
Try to display tasks, users or projects and interact with the dynamic KendoReact x MCP-UI components. (e.g. "Show me 10 tasks that are done", "Show me all the tasks assigned to Kyle Ellis", "Show me all tasks from the project student", etc)

⚠️ Heads up: This is running on a temporary Anthropic API key, so if you hammer it too hard the bot might ghost you. I love demos, but I don’t love surprise credit card bills. Please feel free to comment below if the app doesn't work anymore 😅.

⚠️ Note: For local setup, I'll provide temporary API keys for Supabase that will be deleted right after ther challenge but an Anthropic api key will be needed.

🎥 Video demo of my custom KendoReact chatbot powered by MCP-UI.
📸 Screenshot of the same MCP-UI server running inside LibreChat, showing that the UI is portable across clients.

📦 Repo: github.com/HichamELBSI/ai-chatbot-with-mcp-ui

KendoReact Components Used

Grid, Column, Buttons → interactive task and project tables.
Card, CardHeader, CardTitle, CardBody, CardActions, CardImage, CardSubtitle → user profile cards with avatar and task counts.
Avatar, SvgIcon, TextArea → polish for chat messages and inputs.

Lessons Learned

MCP-UI is very new, so documentation and patterns are still emerging. But it’s powerful: once you learn the UIResource flow, you can make any React component portable.
KendoReact gave me reliable, polished UI components that worked immediately. Without them, I’d have lost most of the hackathon hand-coding tables and cards.
The “aha!” moment was seeing a KendoReact Grid render inside LibreChat and Nanobot in response to a natural language query. That’s when the pieces clicked together.

🔥 “Don’t just tell me the data — show me the data.”

Accessibility is a priority

ELABBASSI Hicham — Wed, 21 Apr 2021 10:41:43 +0000

Web accessibility is about providing a valid access to web content and services to everyone, including people with disabilities, regardless of their devices. In this post we will discuss the importance of accessibility on the web, what are the current issues, and how to act on your websites to make them a bit more accessible.

Some figures

Around 15% of the world's population experience some form of disability according to the World Health Organization - Disability and health

70% of the web content aren't available to blind users according to a Study Commissioned by Deque Systems

It is essential to be aware of these figures: not making your web content and services accessible means depriving yourself of thousands of users, and depriving thousands of users from accessing services that must be available to everyone (public administrations, health, news, etc).

Moreover, we're living a time of crisis where communication and information are mostly related through the internet. It is critical to create the best experience so that everyone can have access to that information.

Disclaimer

This is an introduction to accessibility. It's important to keep in mind that a lot of things can be done to improve website accessibility. It's not possible to list all the possible practices related to the topic but I will put examples, quick wins, resources, and a quick preview to some extensions.

In practice

Provide contextual information for content that is not textual or audible

For images, you might be familiar with the alt HTML attribute that aims to provide text alternatives which is very useful for people that can't see the image itself.

For multimedia content, such as audios or videos content, providing alternative supports such as text transcriptions or subtitles is a way to fix accessibility issues.

Make your content understandable

Some visual representations are obvious for some people but could become a pain for others, especially texts and colors. When displaying texts on a website, there are multiple things to think about: the font size, the number of words/letters, the text positioning, the usage of bold, italic etc.

They all have an impact on content comprehension especially for people with dyslexia (5 to 10% of the population) and people with sight disabilities. Making the texts resizable will be helpful for people with disabilities but also for users who want to display more content on a page. One quick way to fix the readability of web pages is to rely on relative-based size units (rem or em) instead of absolute-size units (px or pt).

Here is an example of the difference between using the PX and REM units when zooming in and out of a webpage.

The same goes for colors. The contrast between the text color and the background color is a concern for colorblind and people with visual impairments.

The following is an example of a bad contrast between the text and the background colors. To automatically test the accessibility of a website, I'm using the Wave Evaluation Tools extension. Here is what I get when I enable Wave on a web page that contains bad color contrasts.
To fix that issue, I personally like to use the Color a11y website. In the Color-pair Contrast Testing section, you can paste the two colors and see the result.
You can now fix the color contrast issue. For this example, I changed the blue to a darker blue.
Some interesting articles related to dyslexia and color impairments:

Dyslexia font and general font tips by Hamsa Harcourt
Understanding color blindness by Matthew Higgins

Make your website usable with the keyboard

Try to use your website (navigation between sections, navigation in the menu, forms, call to action, etc) using the keyboard only. If it is painful, it's important to address the problems.

Some basic examples

In the example below, the user can't access any action button. This is due to an invalid HTML semantic. The buttons are actually clickable divs that look like buttons: we have a problem.
In this other example, the user can access the buttons but the order of the navigation isn't convenient. To access the action buttons, the user has to skip all the table rows first.
The keyboard navigation order has to be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom – header first, then main navigation, then page navigation (if present), and finally the footer.
To verify the keyboard navigation order of a website, I like to use the Accessibility Insights for Web extension. I then enable the "Tabs Stops" toggle button and I start to navigate. This will allow to track the navigation order and paint it on the screen.
Lots of tips exist to fix the navigation with the keyboard for example:

The usage of semantic HTML instead of div only
Respect the headings hierarchy (h1 to h6)
Make sure there is a visible focus style for interactive elements (don't remove the focus outline!)
Remove invisible focusable elements

Screen reader

Another way to audit the accessibility state of a website is to act like a user who has vision impairments. For instance, starting a screen-reader, closing the eyes, and listening to the voice while navigating with the keyboard.

In this example, I use the native Mac OSX screen reader Voice Over. In the illustration, I'm pressing "tabs" a lot of time in order to target the action buttons available at the end of each row. One problem that occurs is that, when the screen-reader focuses on an action button, it says "Button".
As you may already think, this information is not helpful to the user. This happens because I've used the following HTML structure:

<button>
  <SvgIcon />
</button>

In that case, what is the screen reader supposed to say? I don't provide any meaningful information.
One easy way to fix this problem is to use the aria-label HTML attribute:

<button aria-label="Edit John Doe">
  <SvgIcon />
</button>

Let's see how it behaves with the screen-reader
Now, the screen-reader says "Edit John Doe" and "Delete John Doe"
I really recommend you to check the a11y project checklist. There are some guidelines to follow to make your website more accessible.

Some useful tools

Google Lighthouse - An automated tool for improving the performance, quality, and correctness of your web apps.
Axe DevTools - Web Accessibility Testing (Browser extension)
Wave - Web accessibility evaluation for browsers
Accessibility Insights for web - Browsers extension to help identify accessibility issues
NVDA Screen reader - Windows screen reader
Apple Voice Over - Native Mac OSX screen reader

Strapi, another use case: Build your own API from any website with Puppeteer

ELABBASSI Hicham — Fri, 17 Apr 2020 17:12:10 +0000

The objective of this tutorial is to build a simple job search API with Strapi and Puppeteer. Strapi is an open-source Headless CMS written in NodeJS and Puppeteer is an open-source Headless Browser (Chrome) NodeJS API.

It seems that the time is for headless tools...😆 (Anyway, there is no direct link between Strapi & Puppeteer except the "Headless" word.)

Strapi

Strapi is used to build powerful APIs without efforts. Several features are available in Strapi including CRON tasks configuration (And this is a good thing because we will use them to schedule the Puppeteer script execution).

1. Strapi installation

Well, let's start this tutorial. The first thing we need to do is to install Strapi.

yarn create strapi-app job-api --quickstart

If you don't want to use yarn, there are other possibilities to install Strapi in the documentation.

2. Strapi admin user

This command should install Strapi and open your browser. Then, you will be able to create your admin user.

3. Job Collection type

In the Strapi admin home page, click on the blue button CREATE YOUR FIRST CONTENT-TYPE.

You will be redirected to the collection type creation form.

After that, you will be able to add fields to the Job collection type.

For our basic example, we will need to create five text fields (title, linkedinUrl, companyName, descriptionSnippet, and timeFromNow).

Don't forget to click on the Save button to restart the Strapi server

After that, we can put the Strapi admin aside for the moment and open the Strapi repository in an editor.

Strapi CRON task

Firstly, we'll need to enable CRON in the Strapi server configuration.
Open the config/environments/development/server.json file

{
  "host": "localhost",
  "port": 1337,
  "proxy": {
    "enabled": false
  },
  "cron": {
    "enabled": true
  },
  "admin": {
    "autoOpen": false
  }
}

Then let's create the CRON task. Open the ~/job-api/config/functions/cron.js file and replace the content by this

"use strict";
module.exports = {
  // The cron should display "{date} : My super cron task!" at every minute.
  "*/1 * * * *": (date) => {
    console.log(`${date} : My super cron task!\n`);
  },
};

Now, restart the Strapi server and let's see if our cron task is running properly.

yarn develop
yarn run v1.21.1
$ strapi develop

 Project information

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Thu Apr 16 2020 01:40:49 GMT+0200 (GMT+02:00)    │
│ Launched in        │ 1647 ms                                          │
│ Environment        │ development                                      │
│ Process PID        │ 20988                                            │
│ Version            │ 3.0.0-beta.18.7 (node v10.16.0)                  │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available

Welcome back!
To manage your project 🚀, go to the administration panel at:
http://localhost:1337/admin

To access the server ⚡️, go to:
http://localhost:1337

Thu Apr 16 2020 01:41:00 GMT+0200 (GMT+02:00) : My super cron task !

Thu Apr 16 2020 01:42:00 GMT+0200 (GMT+02:00) : My super cron task !

Thu Apr 16 2020 01:43:00 GMT+0200 (GMT+02:00) : My super cron task !

...

We can see that {date} : My super cron task ! is displayed every minute in the terminal.

Puppeteer

Puppeteer is used to automating any action you can perform in the browser. You can use it to automate flows, take screenshots and generate PDFs. In this tutorial, we will use Puppeteer to get the list of ReactJS jobs from Linkedin. We will also use Cheerio to select the data in the received markup.

Now that the CRON task is working well, we will install Puppeteer and Cheerio in the Strapi project.

cd job-api
yarn add puppeteer cheerio

Let's adapt the CRON task to get a list of ReactJS job published on linkedin the last 24 hours in San Francisco.

In the ~/job-api/config/functions/cron.js

"use strict";
// Require the puppeteer module.
const puppeteer = require("puppeteer");

module.exports = {
  // Execute this script every 24 hours. (If you need to change the cron 
  // expression, you can find an online cron expression editor like 
  // https://crontab.guru
  "0 */24 * * *": async (date) => {
    // 1 - Create a new browser.
    const browser = await puppeteer.launch({
      args: ["--no-sandbox", "--disable-setuid-sandbox", "--lang=fr-FR"],
    });

    // 2 - Open a new page on that browser.
    const page = await browser.newPage();

    // 3 - Navigate to the linkedin url with the right filters.
    await page.goto(
      "https://fr.linkedin.com/jobs/search?keywords=React.js&location=R%C3%A9gion%20de%20la%20baie%20de%20San%20Francisco&trk=guest_job_search_jobs-search-bar_search-submit&redirect=false&position=1&pageNum=0&f_TP=1"
    );

    // 4 - Get the content of the page.
    let content = await page.content();
  },
};

Parse the html content with Cheerio and store the job with the Strapi global.

"use strict";
const puppeteer = require("puppeteer");
const cheerio = require("cheerio");

module.exports = {
  "0 */24 * * *": async (date) => {
    const browser = await puppeteer.launch({
      args: ["--no-sandbox", "--disable-setuid-sandbox", "--lang=fr-FR"],
    });
    const page = await browser.newPage();
    await page.goto(
      "https://fr.linkedin.com/jobs/search?keywords=React.js&location=R%C3%A9gion%20de%20la%20baie%20de%20San%20Francisco&trk=guest_job_search_jobs-search-bar_search-submit&redirect=false&position=1&pageNum=0&f_TP=1"
    );
    let content = await page.content();

    // 1 - Load the HTML
    const $ = cheerio.load(content);

    // 2 - Select the HTML element you need
    // For the tutorial case, we need to select the list of jobs and for each element, we will
    // create a new job object to store it in the database with Strapi.
    $("li.result-card.job-result-card").each((i, el) => {
      if (Array.isArray(el.children)) {
        const job = {
          title: el.children[0].children[0].children[0].data,
          linkedinUrl: el.children[0].attribs.href,
          companyName:
            el.children[2].children[1].children[0].data ||
            el.children[2].children[1].children[0].children[0].data,
          descriptionSnippet:
            el.children[2].children[2].children[1].children[0].data,
          timeFromNow: el.children[2].children[2].children[2].children[0].data,
        };

        // 4 - Store the job with the Strapi global.
        strapi.services.job.create(job);
      }
    });

    // 5 - Close the browser
    browser.close();
  },
};

Restart the Strapi server and let's go back to the admin
http://localhost:1337/admin.
In the Job content manager, you should see the data from LinkedIn

Good job ! You've just build an API from another website in few minutes 😄

How to create a Dailynow mobile app in few minutes with React-Native and Expo

ELABBASSI Hicham — Mon, 10 Feb 2020 22:25:26 +0000

As a developer, you might want to know what's new in the tech area. I advise you the very useful Chrome/Firefox extension called Dailynow. You need to install this extension to quickly retrieve the API url. In this tutorial, we are going to create a very simple Dailynow mobile app with react-native and the Expo sdk/platform. I create a github repo for this tutorial.

The first thing we are going to do is to create an Expo account and download the Expo client mobile app. Play Store | App Store.

You can now log in to the expo client mobile app.

You're now ready to create the application!

Open a terminal, install the expo-cli globally, create an expo project and log in to the expo-cli with the same expo account.

> yarn global add expo-cli or npm install expo-cli -g
> expo init
> expo login

Choose the blank (Managed workflow) template.

The app directory should look like this.

Replace the content of the current App.js file to this

import React from "react";
import { StatusBar, View, Text } from "react-native";


const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={{ marginTop: 20 }}>
        <Text>App content</Text>
      </View>
    </>
  );
};

export default App;

Go back to your terminal, run yarn start or npm run start and scan the QRCode with your phone to open the application.
You can also open the app with the Expo Client mobile app, you can see your app running in the projects tab (Your phone and your computer have to be in the same network).

Tadaa ! Now, you should see your application running on your phone.

Now, we will adapt the code to display a list of blog posts. Open the App.js file and add a FlatList component with some fake data.

import React from "react";
import { StatusBar, View, Text, FlatList, Image } from "react-native";

const data = [
  {
    id: "dd05fda7784c5943b08b45f438aafb51",
    title: "AI Generated Human Photo Database (with API Access)",
    url: "https://redstapler.co/ai-generated-human-photo/",
    publishedAt: "2020-02-10T09:42:28.000Z",
    image:
      "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/1c8f48d32e75aa526cd4562928e46569",
    tags: ["javascript", "ai", "others"]
  },
  {
    id: "37b887d2ad3e5f79834e7555c49fec49",
    title: "Take 'this' Quiz, Understand How 'this' Works in JavaScript",
    url:
      "https://dev.to/liaowow/take-this-quiz-understand-how-this-works-in-javascript-44dj",
    publishedAt: "2020-02-09T21:28:29.000Z",
    image:
      "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/1110f8e9b4c54f5e0291c95da5171d00",

    tags: ["javascript", "beginners", "challenge"]
  }
];

const App = () => {
  const handleKeyExtractor = item => item.id.toString();

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={{ marginTop: 20 }}>
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <View style={{ flexDirection: "row", padding: 15 }}>
              <Image
                source={{ uri: item.image }}
                style={{ width: 80, height: 80 }}
              />
              <View style={{ flex: 1, paddingLeft: 10 }}>
                <Text
                  style={{ fontSize: 16, fontWeight: "300" }}
                  numberOfLines={2}
                  ellipsizeMode="tail"
                >
                  {item.title}
                </Text>
              </View>
            </View>
          )}
        />
      </View>
    </>
  );
};

export default App;

Your app will automatically reload and should now look like this

Dailynow data

Open a Dailynow tab on your browser and open the Chrome/Firefox devtool (Network tab). Refresh the page and copy the https://.../graphql?... request url to the clipboard. This request will allow us to retrieve data from the dailynow API with your personal tags.

In the App.js component, you can now fetch the data in a useEffect hook and store the response in a state.

import React, { useEffect, useState } from "react";
import { StatusBar, View, Text, FlatList, Image } from "react-native";

const App = () => {
  const handleKeyExtractor = item => item.id.toString();
  const [data, setData] = useState();

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "PASTE_REQUEST_URL"
      );
      const result = await response.json();
      setData(result.data.latest);
    })();
  }, []);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={{ marginTop: 20 }}>
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <View style={{ flexDirection: "row", padding: 15 }}>
              <Image
                source={{ uri: item.image }}
                style={{ width: 80, height: 80 }}
              />
              <View style={{ flex: 1, paddingLeft: 10 }}>
                <Text
                  style={{ fontSize: 16, fontWeight: "300" }}
                  numberOfLines={2}
                  ellipsizeMode="tail"
                >
                  {item.title}
                </Text>
              </View>
            </View>
          )}
        />
      </View>
    </>
  );
};

export default App;

Link to a blog post

Install the expo-web-browser module

expo install expo-web-browser

Add a TouchableOpacity component in the renderItem props.

import React, { useEffect, useState } from "react";
import {
  StatusBar,
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity
} from "react-native";
import * as WebBrowser from "expo-web-browser";

const App = () => {
  const handleKeyExtractor = item => item.id.toString();
  const [data, setData] = useState();

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "PASTE_REQUEST_URL"
      );
      const result = await response.json();
      setData(result.data.latest);
    })();
  }, []);

  const openPost = async link => {
    await WebBrowser.openBrowserAsync(link);
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={{ marginTop: 20 }}>
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => openPost(item.url)}>
              <View style={{ flexDirection: "row", padding: 15 }}>
                <Image
                  source={{ uri: item.image }}
                  style={{ width: 80, height: 80 }}
                />
                <View style={{ flex: 1, paddingLeft: 10 }}>
                  <Text
                    style={{ fontSize: 16, fontWeight: "300" }}
                    numberOfLines={2}
                    ellipsizeMode="tail"
                  >
                    {item.title}
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
          )}
        />
      </View>
    </>
  );
};

export default App;

That's it! Now take a look at the application.

A lot of features can be added very quickly to this application:

Refresh
Inifinite scroll
Dark mode
Tags settings
Bookmarks

I create a github repo for this tutorial that includes some of those features. Feel free to contributes :D

You can also publish your expo app with one command line expo publish. This allows you to access the app from every were. All your published apps are accessible in the expo client mobile app (Profile tab).

Thanks to the dailynow team for their awesome work!