DEV Community: CertosinoLab

Building a Linear Regression PWA with React

CertosinoLab — Thu, 23 Jul 2026 15:46:46 +0000

From a CSV file to an interactive chart, entirely in the browser

Linear regression is one of the simplest statistical techniques, but it is also a useful example of how data processing, mathematics and visualization can be combined in a modern web application.

In this project, I built a Progressive Web App with React that allows users to upload a CSV file containing pairs of X and Y values. The application processes the data, calculates a linear regression model, displays the resulting equation and plots both the original observations and the regression line.

The technology stack

The application was created with React and Vite. A few focused libraries handle the main features:

Papa Parse reads and processes the uploaded CSV file.
Chart.js and react-chartjs-2 display the dataset and regression line.
KaTeX renders the regression equation in mathematical notation.
vite-plugin-pwa adds the web app manifest, service worker and installable PWA functionality.

Everything runs directly in the browser. The CSV file does not need to be uploaded to a server, which keeps the application simple and preserves the privacy of the data.

Parsing the CSV data

When the user selects a file, Papa Parse reads its rows. The application treats the first two values of each row as the X and Y coordinates:

const parsedData = result.data
  .map((row) => ({
    x: parseFloat(row[0]),
    y: parseFloat(row[1]),
  }))
  .filter((point) => !isNaN(point.x) && !isNaN(point.y));

Invalid or non-numeric rows are filtered out. Once the data has been cleaned, it is stored in the React state and passed to the regression function.

Calculating the regression line

The application implements ordinary least squares directly in JavaScript. It calculates the sums of X, Y, XY and X², and then uses them to obtain the slope and intercept:

slope = (nΣxy − ΣxΣy) / (nΣx² − (Σx)²)

intercept = (Σy − slopeΣx) / n

The final model has the familiar form:

y = slope × x + intercept

The code also determines the minimum and maximum X values in the dataset. These values are used to generate the two endpoints of the regression line, avoiding the need to calculate a separate fitted point for every observation.

Visualizing the result

The graph is rendered through react-chartjs-2. One dataset represents the original observations as individual points, while a second dataset represents the fitted regression line.

Although the React Line component is used, the original dataset has showLine set to false. This produces a scatter-style visualization, while the regression dataset remains a continuous line.

The application also displays the minimum and maximum values of both variables and renders the regression equation with KaTeX. A small conversion function attempts to represent decimal coefficients as fractions, making the output easier to read in some datasets.

Making predictions

After calculating the model, users can enter a new X value. The application applies the previously calculated slope and intercept and returns the expected Y value:

const y = slope * x + intercept;

This turns the project from a static visualization into a simple interactive prediction tool.

Turning it into a PWA

The PWA configuration is handled through vite-plugin-pwa. The project defines an application manifest, installable icons, a standalone display mode and an automatic service-worker update strategy.

Static assets such as JavaScript, CSS, HTML and images are cached through Workbox. As a result, the application can be installed on supported devices and continue to work even when the network connection is unavailable.

Final thoughts

This project demonstrates that a useful data-analysis application does not always require a backend or a large machine-learning framework.

With React, a CSV parser and a charting library, it is possible to create a lightweight tool that imports data, performs a real statistical calculation, visualizes the results and works as an installable application.

The complete source code is available in the project’s public GitHub repository:
https://github.com/sfestacatenate/React_PWA_Linear_Regression

Link to the project:
https://pwa-linear-regression-react.surge.sh

Exploring Database-First Approach with Entity Framework in .NET Core 6

CertosinoLab — Fri, 16 Jun 2023 09:52:19 +0000

Exploring Database-First Approach with Entity Framework in .NET Core 6

Introduction: In the world of software development, the efficient management of databases is crucial for the success of any application.

Dotnet Core 6 provides powerful tools and features for working with databases. One popular approach is the database-first approach, which allows developers to design their database schema first and then generate the corresponding models and context using the Entity Framework. In this article, we will explore how to utilize the Entity Framework in a database-first manner using .NET Core 6.

Step 1: Generating the Database Script for Microsoft SQL Server

To demonstrate the database-first approach, let’s consider the example of an ecommerce application. The database for this application consists of the following tables:

Products
Customers
Orders
Order_Details
Product_Categories
Categories

-- Create Products table
    CREATE TABLE Products (
        ProductId INT PRIMARY KEY,
        Name NVARCHAR(100) NOT NULL,
        Price DECIMAL(10, 2) NOT NULL,
        Description NVARCHAR(MAX)
    );

    -- Create Customers table
    CREATE TABLE Customers (
        CustomerId INT PRIMARY KEY,
        FirstName NVARCHAR(50) NOT NULL,
        LastName NVARCHAR(50) NOT NULL,
        Email NVARCHAR(100) NOT NULL
    );

    -- Create Orders table
    CREATE TABLE Orders (
        OrderId INT PRIMARY KEY,
        CustomerId INT NOT NULL,
        OrderDate DATETIME NOT NULL,
        TotalAmount DECIMAL(10, 2) NOT NULL,
        FOREIGN KEY (CustomerId) REFERENCES Customers(CustomerId)
    );

    -- Create Order_Details table
    CREATE TABLE Order_Details (
        OrderId INT NOT NULL,
        ProductId INT NOT NULL,
        Quantity INT NOT NULL,
        Price DECIMAL(10, 2) NOT NULL,
        PRIMARY KEY (OrderId, ProductId),
        FOREIGN KEY (OrderId) REFERENCES Orders(OrderId),
        FOREIGN KEY (ProductId) REFERENCES Products(ProductId)
    );

    -- Create Categories table
    CREATE TABLE Categories (
        CategoryId INT PRIMARY KEY,
        Name NVARCHAR(50) NOT NULL
    );

    -- Create Product_Categories table
    CREATE TABLE Product_Categories (
        ProductId INT NOT NULL,
        CategoryId INT NOT NULL,
        PRIMARY KEY (ProductId, CategoryId),
        FOREIGN KEY (ProductId) REFERENCES Products(ProductId),
        FOREIGN KEY (CategoryId) REFERENCES Categories(CategoryId)
    );

Step 2: Create a new Visual Studio Project and install necessary packages

In Visual Studio Community 2022 create for example a Console Application, select .NET 6.0. Now install Entity Framework Packages, we need to install several packages using NuGet. Follow these steps to install the required packages in Visual Studio Community 2022:

Open your project in Visual Studio Community 2022.
Right-click on the project in the Solution Explorer and select “Manage NuGet Packages.”
In the NuGet Package Manager window, search for the following packages one by one:

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools

Select each package and click on the “Install” button to install them into your project.

Step 3: Generating Models and Context Using Scaffold-DbContext

Once the necessary packages are installed, we can generate the models and the database context using the Scaffold-DbContext command. This command helps in automatically scaffolding the entity types for the existing database schema.

Create the Models directory, you can choose any name of course
Open the Package Manager Console by navigating to “Tools” -> “NuGet Package Manager” -> “Package Manager Console.”
In the Package Manager Console, run the following command:

PM> Scaffold-DbContext "Data Source=localhost\SQLEXPRESS;Initial Catalog=ecommerce;Integrated Security=True;TrustServerCertificate=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

The Scaffold-DbContext command will examine the database schema and generate the corresponding model classes and the database context. These generated classes will be placed in the specified output directory (Models in this case).

Conclusion

By following the above steps, we have explored the database-first approach using Entity Framework in .NET Core 6. We started by creating a database script for an ecommerce application and defined the necessary relationships. Then, we installed the required Entity Framework packages using NuGet in Visual Studio Community 2022. Finally, we utilized the Scaffold-DbContext command to automatically generate the model classes and the database context based on the existing database schema.

Utilizing the Entity Framework in a database-first manner allows developers to seamlessly integrate their existing databases with their .NET Core applications. This approach simplifies the development process by eliminating the need for manual creation of models and context classes, saving time and effort. With .NET Core 6 and Entity Framework, developers can build robust and scalable applications with ease.

Thank you!

Basic Text Analysis with Python and MongoDB

CertosinoLab — Sun, 07 May 2023 23:50:41 +0000

Introduction

Have you ever needed to analyze unstructured text data? Python can help you do just that. In this article, we’ll look at a basic example of parsing unstructured text data located in MongoDB using Python.

Let’s Write the Code

First, let’s connect to a MongoDB client and retrieve all the documents from a collection in our database:

import pymongo
import re
from matplotlib import pyplot as plt

# Connect to a MongoDB client
client = pymongo.MongoClient("mongodb://localhost:27017/")
db = client["your_db"]
col = db["your_collection"]

Next, we’ll create an empty string that will contain all the offer details from each document:

# Create an empty string that contains all texts
all_details_string = ''

# Iterate over all documents in your MongoDB instance
for doc in col.find():
    all_details_string = all_details_string + doc.get('offer_details').upper()

# Create a list containing all words
doc_general = re.split(" |/|\n", all_details_string)

# Get all words count
all_words_count = len(doc_general)
print('Total Occurrences:', all_words_count)

# Set technologies to analise
tec_list = ['Java', 'C#', 'Angular', 'React']
count_list = []

On the list of the technologies we want to analyze, iterate through each one, counting the number of occurrences in the concatenated string and adding the count to our list:

for tec in tec_list:
    count_list.append(doc_general.count(tec.upper()))
    print(tec, 'Total Occurrences:', doc_general.count(tec.upper()))

In my environment, i got the following result:

Finally, we’ll create a bar chart using the Matplotlib library, with the technologies on the x-axis and their respective counts on the y-axis:

# Create a bar chart
labels = tec_list
values = count_list
fig, ax = plt.subplots()
ax.bar(labels, values)

# Add labels and title
ax.set_ylabel('Occurrence')
ax.set_xlabel('Technology')
ax.set_title('Occurrences of the chosen technologies')

# Show the chart
plt.show()

Complete code and final thoughts

By analyzing unstructured text data, we can gain insights into the most common words and topics. This can be useful for a wide range of applications, such as sentiment analysis, topic modeling, and more.

Here the full code:

import pymongo
import re
from matplotlib import pyplot as plt

# Connect to a MongoDB client
client = pymongo.MongoClient(“mongodb://localhost:27017/”)
db = client[“your_db”]
col = db[“your_collection”]

# Create an empty string that contains all texts
all_details_string = ‘’
list_detail_offer = []

# Iterate over all documents in your MongoDB instance
for doc in col.find():
 all_details_string = all_details_string + doc.get(‘offer_details’).upper()

# Create a list containing all words
doc_general = re.split(“ |/|\n”, all_details_string)

# Get all words count
all_words_count = len(doc_general)
print(‘Total Occurrences:’, all_words_count)

# Set technologies to analise
tec_list = [‘Java’, ‘C#’, ‘Angular’, ‘React’]
count_list = []
for tec in tec_list:
 count_list.append(doc_general.count(tec.upper()))
 print(tec, ‘Total Occurrences:’, doc_general.count(tec.upper()))

# Create a bar chart
labels = tec_list
values = count_list
fig, ax = plt.subplots()
ax.bar(labels, values)

# Add labels and title
ax.set_ylabel(‘Occurrence’)
ax.set_xlabel(‘Technology’)
ax.set_title(‘Occurrences of the chosen technologies’)

# Show the chart
plt.show()

Thank you!

Find occurrences of a word in a Pdf file with c# and PdfPig

CertosinoLab — Sun, 07 May 2023 17:11:59 +0000

Introducing PdfPig

PdfPig is an open source C # library that allows us to extract text and other content from pdfs. Its a port of the java pdfbox library. You can find more here: https://github.com/UglyToad/PdfPig

The Word Counter

The project will be a simple console application and will have the following structure:

Creating The Project

With Visual Studio 2022, follow the steps below:

Open Visual Studio 2022
Create New Project
Select Console Application in C#
Set Name and Path
Choose .NET 5.0 Framework

Now you have the basic structure of a console application. Create a folder and call it pdf. Add a pdf inside this folder. In this tutorial i used a pdf created from this page: https://en.wikipedia.org/wiki/Cr%C3%AApe

To get PdfPig:

On the search bar print Manage NuGet Packages
Click on Browse
Search PdfPig
Install It

The Code

Thanks to PdfPig extracting text from the pdf and calculating the occurrences of a word is trivial, here the full code:

using System;
using UglyToad.PdfPig;
using UglyToad.PdfPig.Content;

namespace pdf_pig_word_counter
{
    internal class Program
    {
        static void Main(string[] args)
        {
            string wordToFind = "pancake";
            int numberOfOccurrences = 0;

using (PdfDocument document = PdfDocument.Open(@"YOUR PATH\pdf\test.pdf"))
            {
                foreach (Page page in document.GetPages())
                {
                    string pageText = page.Text;

foreach (Word word in page.GetWords())
                    {
                        if (word.Text.ToLower().Contains(wordToFind.ToLower()))
                            numberOfOccurrences++;
                    }
                }
                Console.WriteLine("Total Occurrences: " + numberOfOccurrences);
            }
        }

}
}

This program will tell us how many times the word pancake is present in the pdf.

You can find the project here: https://github.com/CertosinoLab/mediumarticles/tree/pdf_pig_word_counter

Thank you!

Using Event Bus in Vue.js 3

CertosinoLab — Sun, 07 May 2023 16:02:31 +0000

Introduction

In vue js we have essentially three ways of making unrelated components communicate with each other:

Vuex
Pinia
Event Bus

On the official documentation we can read:

In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term.

So generally in the long run it is better to use vuex.

Also in the official documentation you can see how the Event Bus implementation has changed from Vue 2 to Vue 3

Scaffolding the project

In this tutorial we will use Vite build tool to scaffold the project

# npm 6.x
npm init vite@latest vue-event-bus-1 --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest vue-event-bus-1 -- --template vue

then we need to install an external library implementing the event emitter interface, in this case mitt

npm install --save mitt

The Project

The project consists of two simple components, FirstComponent.vue and SecondComponent.vue, when we click on the emit event button in SecondComponent.vue String to change in **FirstComponent.vue **becomes String changed thanks to the Event Bus

The Code

In **main.js **we create an instance of mitt which is used globally

import { ***createApp ***} from 'vue'
import mitt from 'mitt'
import App from './App.vue'


const emitter = mitt()
const app = ***createApp***(App)

app.config.globalProperties.emitter = emitter
app.mount('#app')

Now we can access emitter globally, so in FirstComponent.vue we subscribe to the event emitted by SecondComponent.vue.

Let’s take a look to FirstComponent.vue

<script>
export default {
  data: function () {
    return {
      testEvent: 'String to change'
    }
  },
  created (){
    this.emitter.on('my-event', (evt) => {
      this.testEvent = evt.eventContent;
    })
  }
}
</script>

Now in **SecondComponent.vue **let’s emit the event

<template>

    <div style="border: 1px solid black;">

        <h1>Second Component</h1>

        <button v-on:click="emitMyEvent">Emit Event</button>

    </div>

</template>

<script>

    export default {

        methods: {

          emitMyEvent() {

              this.emitter.emit('my-event', {'eventContent': 'String changed'})

          }

        }

    }

</script>

Github

You can find the code of this tutorial on github: CertosinoLab/mediumarticles at vue-event-bus-1 (github.com)

Thank you for reading!