Blog

My paperwork



# Vibe Coding: The Future of No-Code Programming?

---

## What is Vibe Coding?

Imagine telling your computer *exactly* what you want — in plain English — and watching it magically turn your ideas into working code. That’s the essence of **Vibe Coding**, a fresh wave in programming powered by natural language processing (NLP) and AI.

Unlike traditional coding where you painstakingly type every line, vibe coding lets you express the “vibe” or feeling of your project. The AI understands context, intent, and nuances, and then generates code that matches your vision. It’s like having a programming partner who just *gets* you.

---

## Why Should Developers Care?

Vibe coding isn’t just a gimmick. It’s reshaping how software gets built:

- **Speeds up prototyping:** Build MVPs (minimum viable products) faster without sweating the syntax.
- **Bridges skill gaps:** Non-technical folks can now describe what they want and get a starting point.
- **Boosts creativity:** Focus on solving problems rather than memorizing syntax or APIs.
- **Enables collaboration:** Devs and AI can pair-program — the AI handles boilerplate, you handle logic.

---

## How Does It Work?

At its core, vibe coding relies on advanced NLP models trained on billions of lines of code and text. You provide a natural language prompt, such as:

> “Build a simple to-do app with React that saves data locally.”

The AI parses your request, generates code snippets, stitches them together, and sometimes even writes tests! Tools like GitHub Copilot, OpenAI’s Codex, and newer platforms like Devin and Cursor are pioneering this space.

---

## The Catch: Limitations & Risks

No technology is perfect. Vibe coding can:

- Produce buggy or inefficient code that requires human review.
- Misinterpret vague or ambiguous prompts.
- Generate code that’s hard to maintain without understanding what’s “under the hood.”
- Risk developer skill atrophy if over-relied on.

Bottom line: vibe coding is an assistant, not a replacement.

---



## The Road Ahead

Vibe coding is still in its infancy, but it’s clear the writing’s on the wall. As NLP models get smarter, expect to see more powerful, intuitive, and reliable programming assistants that change *how* we build software.

For developers, embracing vibe coding means enhancing your workflow with AI — not handing over the keys. The future is about collaboration between human creativity and machine efficiency.

---

## Final Thoughts

If you’re a developer, product manager, or tech enthusiast, it’s time to pay attention. Vibe coding could be the *next big leap* in software development — one where *your words* become your code.

---


Imagine telling your computer *exactly* what you want — in plain English — and watching it magically turn your ideas into working code. That’s the essence of **Vibe Coding**, a fresh wave in programming powered by natural language processing (NLP) and AI.

Vibe Coding: The Future of No-Code Programming



   

# How to Optimize React Performance with Memoization 🚀

  

React apps can become slow and unresponsive as they grow larger and more complex. One powerful way to boost performance is by using **memoization** — a technique that caches the results of expensive function calls and returns the cached result when the same inputs occur again.

  

In this post, I’ll walk you through how to use memoization effectively in React, focusing on the built-in hooks and components that help you avoid unnecessary re-renders.

  

---

  

## What is Memoization?

  

Memoization is an optimization technique that stores ("memoizes") the result of a function call based on its inputs. If the function is called again with the same inputs, the cached result is returned instead of recomputing.

  

In React, this helps prevent unnecessary rendering and computation, which can improve app responsiveness and reduce CPU usage.

  

---

  

## React Memoization Tools

  

React provides several tools to help with memoization:

  

- `React.memo` — memoizes functional components, preventing re-render if props don’t change.

- `useMemo` — memoizes the result of a calculation between renders.

- `useCallback` — memoizes a callback function reference, preventing unnecessary re-creations.

  

---

  

## When to Use `React.memo`

  

Use `React.memo` to wrap functional components that receive props and only need to re-render when those props change.

  

```jsx

import React from  'react';

  

const  ExpensiveComponent  = React.memo(({ data }) => {

console.log('Rendering ExpensiveComponent');

// expensive calculations or rendering here

return <div>{data}</div>;

});
```

## Using useMemo for Expensive Calculations

If you have heavy computations inside your component, use useMemo to cache the results:

  

```jsx
import React, { useMemo } from  'react';

  

function  Fibonacci({ n }) {

// useMemo will recompute the value only when `n` changes

const  fib  =  useMemo(() => {

function  calcFib(num) {

if (num <=  1) return  1;

return  calcFib(num -  1) +  calcFib(num -  2);

}
return  calcFib(n);

}, [n]); // dependency array: recalc only if `n` changes

return <div>Fibonacci number: {fib}</div>;

}
```
  

## Why use useMemo here?

Without useMemo, the calcFib function  would  be  called  on  every  render, which  can  be  very  expensive  especially  for  large  n.

With  useMemo, React  caches  the  result  of  the  calculation  and  only  recomputes  it  if  n  changes, saving  CPU  time  and  improving  performance.


# Using  useCallback  to  Memoize  Functions

Passing  inline  functions  as  props  causes  child  components  to  re-render  unnecessarily  because  every  render  creates  a  new  function  reference.


useCallback  returns  a  memoized  version  of  the  function  that  only  changes  if  its  dependencies  change.

  

```jsx

import  React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick, children }) => {

console.log('Button rendered');

return <button  onClick={onClick}>{children}</button>;

});


function  Parent() {

const [count, setCount] =  useState(0);

  

// Memoize increment function to prevent new function creation on every render

const  increment  =  useCallback(() => {

setCount(c  => c +  1);

}, []); // empty dependency array means function stays the same

  

return (

<div>

<p>Count: {count}</p>

<Button  onClick={increment}>Increment</Button>

</div>

);

}
```

## Why use useCallback?

Without useCallback, the increment function  would  be  recreated  on  every  render.

  

This  causes  Button  to  re-render  even  if  its  props  appear  unchanged.

  

With  useCallback, the  function  reference  stays  the  same  between  renders  unless  dependencies  change, so  Button  only  re-renders  when  needed.

  

Summary

1. Use  React.memo  to  memoize  entire  functional  components  to  avoid  unnecessary  re-renders  when  props  are  unchanged.

  

2. Use  useMemo  to  memoize  expensive  calculations  inside  components.

  

3. Use  useCallback  to  memoize  functions  passed  as  props  to  prevent  unnecessary  re-creation  of  functions  and  child  re-renders.

  

Proper  use  of  these  memoization  techniques  can  help  your  React  apps  run  faster  and  more  efficiently.

React apps can become slow and unresponsive as they grow larger and more complex. One powerful way to boost performance is by using **memoization** — a technique that caches the results of expensive function calls and returns the cached result when the same inputs occur again.

How to Optimize React Performance with Memoization



## Preparing the Server

First things first: we need to update your server and install the essential packages.

 -  Run these commands to update and install everything you need:

```bash
sudo apt update && sudo apt upgrade -y
sudo apt install python3-pip python3-venv python3-dev libpq-dev nginx -y
```

Here’s what each package is for:

- `python3-pip`: The tool that lets you install Python packages you’ll need for your app.
    
- `python3-venv`: Allows you to create a virtual environment for Python—this keeps things nice and clean.
    
- `python3-dev`: Development headers and libraries for building Python packages.
    
- `libpq-dev`: Required for connecting your Django app to PostgreSQL if you're using that as your database.
    
-  `nginx`: This is the web server we’re going to use to serve your Django app.

----------

### Creating the App Directory

Now let’s create the directory where your Django app will live and set the right permissions.

1.  Make the directory:

```bash
sudo mkdir -p /var/www/domain.com/app
```
2.  Set the correct permissions:

```bash
sudo chown -R $USER:$USER /var/www/domain.com/app
sudo chmod -R 755 /var/www/domain.com
``` 
What’s happening here:
-   `mkdir -p`: Makes sure all the necessary folders are created (even the ones in the path).
  
-   `chown`: Changes the ownership of the directory to the current user (you).
  
-  `chmod`: Ensures the right read/execute permissions for the directory.

----------

### Configuring Nginx for Your App

Now it’s time to set up Nginx to serve your Django app. Let’s create a configuration file for your domain.

1.  Create the config file:
```bash
sudo nano /etc/nginx/sites-available/domain.com
```

2.  Add the following content to the file:


```bash
`server {
    listen 80;
    server_name domain.com www.domain.com;

    root /var/www/domain.com/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}` 
```
What’s happening here:
 -   `listen 80`: Tells Nginx to listen for HTTP traffic on port 80 (the standard for web traffic).
    
 -   `server_name`: This specifies which domains Nginx should handle with this config.
   
 -  `try_files`: It checks if the requested files exist. If not, it returns a 404 error.

----------

### Setting Up SSL with Let's Encrypt

For added security, you should use HTTPS. If you don’t already have an SSL certificate, Let’s Encrypt is a free, trusted option.

1.  First, let’s redirect all HTTP traffic to HTTPS:


```bash
server {
    listen 80;
    server_name domain.com www.domain.com;
    return 301 https://$host$request_uri;
}
```

2.  Next, let’s set up the HTTPS server configuration:

```bash
server {
    listen 443 ssl;
    server_name domain.com www.domain.com;

    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /static/ {
        alias /var/www/domain.com/app/static/;
    }
}
``` 

 Here’s what’s going on:
-   `proxy_pass`: This tells Nginx to forward incoming requests to Gunicorn (which will run your Django app on port 8000).
    
-   `alias`: This directs Nginx to the static files folder where your Django app will store its static assets.

----------

### Activating the Nginx Configuration and Restarting the Service

Now that we’ve got Nginx set up, let’s activate the configuration and restart Nginx.

1.  Enable the site by creating a symbolic link:

```bash
sudo ln -s /etc/nginx/sites-available/domain.com /etc/nginx/sites-enabled/` 
```

2.  Check for configuration errors:
```bash
sudo nginx -t
```

3.  If everything checks out, restart Nginx:
```bash
sudo systemctl restart nginx
```

----------

## Setting Up the Django Project

Next, let’s get your Django project set up and ready to go!

1.  Create a virtual environment for Python:

```bash
cd /var/www/domain.com/app
python3 -m venv venv
source venv/bin/activate 
```

2.  Install Django and Gunicorn:

```bash
pip install django gunicorn 
```

----------

### Creating the Django Project

1.  Now, let’s create a new Django project:

```bash
django-admin startproject myproject .
```

2.  To test that everything’s running, start the Django development server:

```bash
python3 manage.py runserver
```

----------

### Configuring Static Files

1.  Create the static files directory:

```bash
mkdir -p /var/www/domain.com/app/static
```

2.  Update `settings.py` to point to the correct location for static files:


```bash
STATIC_ROOT = "/var/www/domain.com/app/static/"
STATIC_URL = "/static/"
```

3.  Collect all the static files:
```bash
python manage.py collectstatic
```
-----------
#### In Django, handling static files—like CSS, JavaScript, and images—requires special attention because of how static content is served in production versus development. Let’s break it down:

Why Static Files Need Configuration ?

By default, Django is optimized for development, and during development, it automatically serves static files using its built-in development server. However, this approach isn't suitable for production due to performance and security concerns. Instead:

In Development:

   - Django's development server (e.g., when you run python manage.py runserver) handles static files directly, pulling them from the STATICFILES_DIRS or app-specific static folders (<app_name>/static).
You don't need to create or configure STATIC_ROOT or manually run collectstatic.

In Production:

   - A web server like Nginx or Apache should serve static files. This ensures better performance since serving static assets isn’t what Django’s application server (like Gunicorn) is designed for.
Django needs all static files from various apps to be gathered into a single directory, specified by STATIC_ROOT. This is why the collectstatic command is necessary.
Without a properly set STATIC_ROOT, you can't collect and serve static files efficiently in production.

Why Create the Directory Manually?

   - The directory defined by STATIC_ROOT (e.g., /var/www/domain.com/app/static/) is where Django collects all static files when you run:

```bash
python manage.py collectstatic
```

You need to create this directory manually because:

1. It's not automatically created by Django: Django only expects the STATIC_ROOT setting to point to an existing location.
  
2. Flexibility in deployment: You might want the static directory to be in a specific location, independent of Django’s project structure. For example, /var/www/... is commonly used in production setups.
   
Do You Need This in Both Production and Development?
   - In Production: Yes, always. The STATIC_ROOT directory and the collectstatic process are essential in production environments because Django doesn’t serve static files directly. Instead, the web server (e.g., Nginx) will use the collected files.
   - In Development: Not typically. Django's development server handles static files automatically using the STATICFILES_DIRS and app-specific static folders. You don't need to configure STATIC_ROOT or run collectstatic.

If you're testing a production-like environment locally, you might set it up in development to mirror production, but it’s optional.

#### Key Takeaway

The manual creation of the STATIC_ROOT directory and running collectstatic are production-specific requirements. In development, Django simplifies the process, but in production, separating the app logic from static file serving is critical for performance and scalability.

-----------
4.  Set the right permissions on the static files folder:

```bash
sudo chown -R www-data:www-data /var/www/domain.com/app/static
sudo chmod -R 755 /var/www/domain.com/app/static
```



### Setting Up the Gunicorn Service

Gunicorn will serve your Django app, so let’s set it up with a systemd service.

1.  Create the Gunicorn service file:

```bash
sudo nano /etc/systemd/system/gunicorn.service
```

2.  Add the following configuration:

```bash
[Unit]
Description=gunicorn daemon for Django project
After=network.target

[Service]
User=www-data
Group=www-data
WorkingDirectory=/var/www/domain.com/app
ExecStart=/var/www/domain.com/app/venv/bin/gunicorn --workers 3 --bind 127.0.0.1:8000 myproject.wsgi:application

[Install]
WantedBy=multi-user.target
```

3.  Check the permissions:

```bash
ls -l /etc/systemd/system/gunicorn.service
```

If the permissions need fixing:

```bash
sudo chmod 644 /etc/systemd/system/gunicorn.service
```

----------

### Starting the Gunicorn Service

1.  Enable and start Gunicorn:

```bash
sudo systemctl start gunicorn
sudo systemctl enable gunicorn
```


2.  To check that everything’s working:


```bash
sudo systemctl status gunicorn
``` 

----------

And that’s it! You’ve successfully set up your Django app with Nginx and Gunicorn. Your app is now ready to handle traffic in production, and you’ve ensured it’s secure and performant. Enjoy the smooth sailing!


This step-by-step guide will show you how to set up a web server for your Django app using Nginx and Gunicorn on an Ubuntu server. We'll walk you through everything from installing the necessary packages to configuring your environment to run Django in production. Let's get started!

Guide to Setting Up a Django Server with Nginx and Gunicorn

I am a technical guy, <em><strong>web</strong></em> and <em><strong>servers</strong></em>, with experience in solving problems and integrating diverse technologies. I have a practical, results-oriented approach and am always eager to learn and optimize existing solutions.


Technology I work with

For front-end development, I primarily work with React, which I consider my main expertise. Additionally, I have experience with C#, but React has been the predominant framework in my projects, allowing me to build dynamic and responsive user interfaces effectively.


Frontend

In terms of backend development, I have experience working with technologies such as Python and Bash.


Backend

In terms of database management, I have hands-on experience working with MySQL, PL/SQL, and T-SQL. I am proficient in designing, optimizing, and querying databases to support efficient data storage and retrieval, ensuring seamless integration with applications.


Database

The approach

Process Delivers Value

Recent Works




## Arhitecture. 


<div className="image columns-1 sm:columns-2 gap-8">


![React 02.](/images/project/07.jpg)
![React 04.](/images/project/07-01.jpg)

</div>




## Description

React Meals is a web-based food ordering application developed using React and Firebase. This application allows users to browse a menu of available meals, add items to their cart, and place orders. It also includes administrative features for managing product availability.

### Key Features
1. Menu Navigation and Viewing:
- Users can view a list of available meals, each with a description, price, and availability status.

2. Add to Cart:
- Users can add meals to their shopping cart by specifying the desired quantity.
- The shopping cart is updated in real-time and can be viewed through a dedicated button.

3. Place Orders:
- Users can place orders by filling out a form with personal and delivery details.
- Orders are saved in Firebase Realtime Database for further management.

### Administrative Features:

Admins can manage products, updating their availability directly from the application interface. Administrative features are protected and accessible only to authorized users.

<div className="image columns-1 sm:columns-2 gap-8">

![React 03.](/images/project/07-02.jpg)
![React 03.](/images/project/07-03.jpg)
![React 03.](/images/project/07-04.jpg)

</div>

## Technologies Used
1. React: The main library used for building the user interface.
2. Redux: State management to ensure a smooth and consistent user experience.
3. Firebase: Used for authentication and real-time data storage.
4. React Router: Manages routing and navigation within the application.
5. Styled Components: Styles React components to create a modern and attractive interface.
6. Material-UI: A UI component library to accelerate development and ensure design consistency.

## Project Structure
Components: Contains all reusable components of the application, such as buttons, forms, and lists.
Pages: Contains the main pages of the application, such as the menu page, cart page, and admin page.
Store: Contains the Redux configuration and reducers for managing the application's state.
Firebase: Configuration for Firebase authentication and data storage.

## Redux :


```javascript

import { createSlice } from '@reduxjs/toolkit';

const initialCartState = {
  items: [],
  meals: [],
  totalAmount: 0,
  isAdmin: false,
  stockButton: false,
  productButton: false,
  orderButton: true

};

const orderSlice = createSlice({
  name: 'order',
  initialState: initialCartState,
  reducers: {
    addItem(state, action) {
      const newItem = action.payload;
      const existingItem = state.items.find(item => item.id === newItem.id);
      state.totalAmount += newItem.price * newItem.amount;
      if (!existingItem) {
        state.items.push({
          id: newItem.id,
          name: newItem.name,
          amount: newItem.amount,
          price: newItem.price,
        });
      } else {
        existingItem.amount += newItem.amount;
      }
    },
    removeItem(state, action) {
      const id = action.payload;
      const existingItem = state.items.find(item => item.id === id);
      state.totalAmount -= existingItem.price;
      if (existingItem.amount === 1) {
        state.items = state.items.filter(item => item.id !== id);
      } else {
        existingItem.amount--;
      }
    },
    addMeal(state, action) {
      const newMeal = action.payload;
      const existingMeal = state.meals.find(meal => meal.id === newMeal.id);
      if (!existingMeal) {
        state.meals.push({
          id: newMeal.id,
          name: newMeal.name,
          description: newMeal.description,
          price: newMeal.price,
          availability: newMeal.availability,
        });
      }
    },
    clearCart(state) {
      state.items = [];
      state.totalAmount = 0;
    },
    loginAdmin(state, action) {
      state.isAdmin = action.payload;
    },

    setStockButton(state, action) {
      state.stockButton = action.payload;
    },

    setProductButton(state, action) {
      state.productButton = action.payload;
    },

    setOrderButton(state, action) {
      state.orderButton = action.payload;
    }
  },
});

export const orderActions = orderSlice.actions;
export default orderSlice.reducer;

```

1. The order-slice.js file defines the initial state and the reducers for managing the cart state.
2. The createSlice function from Redux Toolkit is used to create a slice of the state, which includes actions and reducers.
3. The initial state includes properties like items, meals, totalAmount, isAdmin, stockButton, productButton, and orderButton.
4. The reducers define how the state should be updated in response to actions. For example, the addItem reducer adds a new item to the cart, and the removeItem reducer removes an item from the cart.

## Configuring the Redux Store:

The index.js file in the store directory configures the Redux store using the configureStore function from Redux Toolkit. The store is configured with the orderReducer created in the order-slice.js file.

Providing the Redux Store to the Application:
The index.js file in the root directory wraps the App component with the Provider component from react-redux and passes the store to it.
This makes the Redux store available to all components in the application.

By using Redux for state management, the React Meals application ensures a predictable and efficient way to manage the application state. Redux helps in maintaining a single source of truth for the state, making it easier to debug and test the application. The use of Redux Toolkit simplifies the setup and reduces boilerplate code, allowing for a more streamlined development process.






This app use the core functionalities of a food ordering application, including menu navigation, cart management, order placement, and administrative controls. It provides a fully functional and attractive interface for users to interact with.

Client

Release date

Tehnology

Functions

Food Order App



<div className="image columns-1 sm:columns-2 gap-8">


![C# 02.](/images/project/03-02.jpg)
![C# 01.](/images/project/03-01.jpg)
![C# 03.](/images/project/03-03.jpg)
![C# 03.](/images/project/03-04.jpg)


</div>


## Project Overview

Checker is a web application designed to manage user profiles and account settings. It provides functionalities for viewing and updating profile information, changing passwords, and deleting accounts. The application aims to offer a seamless user experience with a responsive design.



## Program.cs Description

The Program.cs file is the entry point for a Blazor WebAssembly application. It configures the root components, sets up services, configures Fluxor for state management, and sets the logging configuration. Finally, it builds and runs the application asynchronously. This file ensures that the application is properly initialized and configured before it starts running.

Key Components:
1. Root Components
2. Service Configuration
3. Fluxor Configuration
4. Logging Configuration
5. Application Initialization
6. Description of Visible Code
7. Root Components

The root components of the Blazor application are added to the component tree. These components are the entry points for the application and are rendered in the specified HTML elements.

```C
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
```
* App: The main application component, rendered in the HTML element with the ID app.

* HeadOutlet: A component for rendering content in the HTML <head> element, rendered after the existing content.


Service Configuration
Services are configured and added to the dependency injection container. These services can be injected into components and other services throughout the application.

```C#
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<FetchService>();
builder.Services.AddScoped<AuthenticationTocken>();
```

* HttpClient: Configured with the base address of the host environment.
* FetchService: A custom service for handling HTTP requests.
* AuthenticationTocken: A custom service for managing authentication tokens.


Fluxor Configuration
Fluxor, a state management library for Blazor, is configured and added to the services.
```C#
builder.Services.AddFluxor(o =>
{
    o.ScanAssemblies(typeof(Program).Assembly);
    o.UseReduxDevTools();
});
```

* ScanAssemblies: Scans the specified assembly for Fluxor-related classes (e.g., actions, reducers, effects).
* UseReduxDevTools: Enables Redux DevTools integration for state debugging.


Logging Configuration
The logging configuration is set to a minimum level of Information.
```C#
builder.Logging.SetMinimumLevel(LogLevel.Information);
```
Application Initialization
The application is built and run asynchronously.

```C#
await builder.Build().RunAsync();
```


## Pages

The Signup.razor file is a Blazor component that handles the user sign-up process. This component includes a form where users can enter their email, username, and password to create a new account. The component also manages the state of the form, including validation and error handling.

Key Components:
1. Form Fields: The form includes input fields for the user's email, username, and password.
State Management: The component manages the state of the form fields, including validation states and error messages.
2. Event Handling: The component includes methods to handle form submission and validation.

3. UI Feedback: The component provides visual feedback to the user based on the validation state of the form fields.

Description of Visible Code
1. Message Handling: The code sets a message to "false" and updates the styleClassUsername to indicate a valid username. It also sets the userName flag to true.
2. Exception Handling: The code includes a try-catch block to handle exceptions during the verification process, logging any errors to the console.
3. State Management: The stateManager method updates the state of the form, resetting the style classes for the email and username input fields to their default state.

The Signup.razor component is responsible for handling the user sign-up process in a Blazor application. It includes form fields for user input, manages the state of these fields, handles form submission and validation, and provides visual feedback to the user. The visible code snippet shows how the component updates the state and handles exceptions during the verification process.

ProfileRender.razor Description
The ProfileRender.razor component is responsible for rendering the user's profile information in a Blazor application. This component typically includes the following functionalities:

1. Profile Data Fetching: The component fetches the user's profile data from a service or state management store when the component is initialized.
2. Profile Display: The component displays the user's profile information, such as name, email, and other relevant details, in a structured format.
3. Profile Update: The component may include functionality to update the user's profile information, allowing users to edit and save changes to their profile.
4. DOM Manipulation: The ProfileDom method is likely used to manipulate or render the profile DOM structure, ensuring that the profile information is displayed correctly and dynamically updated based on user interactions or other events.

Key Components
1. Profile Data Fetching: The component fetches the user's profile data, using FetchService.
2. Profile Display: The component displays the profile information in a user-friendly format, such as a form or a set of labeled fields.
3. Profile Update: The component may provide input fields and buttons to allow users to update their profile information.
4. DOM Manipulation: The ProfileDom method is used to handle any necessary DOM manipulations to ensure the profile information is displayed and updated correctly.

The ProfileRender.razor component is a crucial part of the user interface in a Blazor application, responsible for displaying and managing the user's profile information. It fetches the profile data, displays it in a structured format, and may provide functionality for users to update their profile information. The ProfileDom method is used to handle any necessary DOM manipulations, ensuring that the profile information is displayed and updated correctly based on user interactions or other events.


## HTTP

The http request are defines by  FetchService class in the Checker.Services namespace. The class is designed to handle HTTP requests and interactions with JavaScript runtime in a Blazor WebAssembly application.

Here are the key components:

Namespaces: The code imports several namespaces required for HTTP operations, JSON handling, state management, and JavaScript interop.

1. System.Net
2. System.Net.Http.Headers
3. System.Net.Http.Json
4. Checker.Models
5. Checker.state
6. Fluxor
7. Microsoft.JSInterop
Namespace Declaration: The FetchService class is declared within the Checker.Services namespace.

Class Declaration: The FetchService class is declared as a public class.

Private Fields:

_httpClinet: A private readonly field of type HttpClient for making HTTP requests.

_jsRuntime: A private readonly field of type IJSRuntime for interacting with JavaScript. 

Constructor: The constructor initializes the _httpClinet and _jsRuntime fields with the provided HttpClient and IJSRuntime instances.

## Method

### LoginAsync

This method handles user login by sending a POST request with the login model and returns a token.

```C#
public async Task<JsonModel> LoginAsync(LoginModel loginModel)
{
    var response = await _httpClinet.PostAsJsonAsync($"{AppSettings.ApiBaseUrl}/creare-cont", loginModel);
    response.EnsureSuccessStatusCode();
    var token = await response.Content.ReadFromJsonAsync<JsonModel>();
    return token;
}
```
### SignUpAsync
This method handles user sign-up by sending a POST request with the sign-up model and returns a response model.

```C#
public async Task<SignUpResponseModel> SignUpAsync(SignUpModel signUpModel)
{
    var response = await _httpClinet.PostAsJsonAsync($"{AppSettings.ApiBaseUrl}/inregistrare", signUpModel);
    response.EnsureSuccessStatusCode();
    var result = await response.Content.ReadFromJsonAsync<SignUpResponseModel>();
    return result;
}
```

## Additional Methods like

### GetUserProfileAsync

This method retrieves the user's profile by sending a GET request.
```C#
public async Task<UserProfileModel> GetUserProfileAsync(string token)
{
    var request = new HttpRequestMessage(HttpMethod.Get, $"{AppSettings.ApiBaseUrl}/profil");
    request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);
    var response = await _httpClinet.SendAsync(request);
    response.EnsureSuccessStatusCode();
    return await response.Content.ReadFromJsonAsync<UserProfileModel>();
}
```

### UpdateUserProfileAsync

This method updates the user's profile by sending a PUT request with the updated profile model.

```C#
public async Task<HttpResponseMessage> UpdateUserProfileAsync(UserProfileModel profileModel, string token)
{
    var request = new HttpRequestMessage(HttpMethod.Put, $"{AppSettings.ApiBaseUrl}/profil");
    request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);
    request.Content = JsonContent.Create(profileModel);
    return await _httpClinet.SendAsync(request);
}
```
The FetchService class provides a comprehensive set of methods for handling user authentication and profile management. These methods include logging in, signing up, retrieving user profiles, updating profiles, and logging out. Each method is designed to perform specific tasks by making appropriate HTTP requests or interacting with JavaScript, ensuring a clean and reusable service layer within the Blazor WebAssembly application.


## State management

The state management in this code is implemented using the Fluxor library, which is a state management library for Blazor applications. The code defines reducers that handle specific actions to update the application's state.


Let's focus on the ProfileCardState and how is used in the context of state management with Fluxor.

### ProfileCardState
The ProfileCardState likely represents the state of a user's profile card in the application. This state could include information such as the user's profile details, loading status, and any errors.

Description
ProfileCardState Definition:

The ProfileCardState class is defined in the State.cs file. It includes properties like HomeAddress, Country, County, Occupation, FullName, Email, Image, and various social media links.
```C#
public class ProfileCardState
{
    public string HomeAddress { get; set; }
    public string Country { get; set; }
    public string County { get; set; }
    public string Occupation { get; set; }
    public string FullName { get; set; }
    public string Email { get; set; }
    public byte[] Image { get; set; }
    public string LinkedIn { get; set; }
    public string FaceBook { get; set; }
    public string GitHub { get; set; }
    public string Instagram { get; set; }
    public string Twitter { get; set; }
    public string Youtube { get; set; }
    public string Description { get; set; }

    public ProfileCardState(string homeAddress, string country, string county, string occupation, string fullname, string email, byte[] image, string linkedIn, string faceBook, string gitHub, string instagram, string twitter, string youtube, string description)
    {
        HomeAddress = homeAddress;
        Country = country;
        County = county;
        Occupation = occupation;
        Image = image;
        FullName = fullname;
        Email = email;
        LinkedIn = linkedIn;
        FaceBook = faceBook;
        GitHub = gitHub;
        Instagram = instagram;
        Twitter = twitter;
        Youtube = youtube;
        Description = description;
    }

    public ProfileCardState() { }
}
```


It has constructors to initialize these properties, including a parameterless constructor for flexibility.


Feature Initialization:

The ProfileCardFeature class, defined in the Feature.cs file, specifies the initial state of ProfileCardState with default values.

```C#
using Fluxor;

namespace Checker.state
{
    public class ProfileCardFeature : Feature<ProfileCardState>
    {
        public override string GetName() => "ProfileCard";

        protected override ProfileCardState GetInitialState() =>
            new ProfileCardState(
                string.Empty, string.Empty, string.Empty, string.Empty, string.Empty, string.Empty, new byte[0], 
                string.Empty, string.Empty, string.Empty, string.Empty, string.Empty, string.Empty, 
                string.Empty
            );
    }
}
```

Reducers:

The ProfileCardReducer class, found in the Reducers.cs file, handles state changes. The ReduceProfileCard method updates the state based on the GetProfileCardState action by creating a new ProfileCardState with updated values.
```C#
using Fluxor;

namespace Checker.state
{
    public static class ProfileCardReducer
    {
        [ReducerMethod]
        public static ProfileCardState ReduceProfileCard(ProfileCardState state, GetProfileCardState action)
        {
            return new ProfileCardState(
                action.State.HomeAddress,
                action.State.Country,
                action.State.County,
                action.State.Occupation,
                action.State.FullName,
                action.State.Email,            
                action.State.Image,
                action.State.LinkedIn,
                action.State.FaceBook,
                action.State.GitHub,
                action.State.Instagram,
                action.State.Twitter,
                action.State.Youtube,
                action.State.Description
            );
        }
    }
}
```



Usage in Components:

In various Razor components like ProfileRender.razor, HomeRender.razor, and AdminRender.razor, the ProfileCardState is injected and used to display profile information.
These components fetch user data from the server and dispatch actions to update the state. For example, when the profile page is loaded, it checks the authentication token and fetches the user's profile data to update the state.

```C#
@page "/profile"

@using Checker.Pages.Message
@using global::Checker.state
@using global::Checker.Models 
@using global::Checker.Services
@using global::Checker.features
@using Fluxor
@inject AuthenticationTocken authenticationtocken
@inject IState<ProfileCardState> ProfileCardState

@inject FetchService fetchService
@inject IDispatcher Dispatcher

@if(error == false){
    @if(isLoading){
        <BlazorChecking/>
    } else if(tokenState){
        <ProfileDom/>
    }else{
        <Restricted/>
    }
}else{
    <BlazorError/>
}

@code{
    bool isLoading = true;
    bool error = false;
    bool tokenState;
    protected override async Task OnInitializedAsync()
    {
        tokenState = await authenticationtocken.Check();
        
        if(!string.IsNullOrEmpty(ProfileCardState.Value.FullName)){
            isLoading = false;
            return;
        }

        string tokenString = await authenticationtocken.GetTocken();
        if(tokenState){
            try{
                var response = await fetchService.GetResponsSocialCard($"{AppSettings.ApiBaseUrl}/get", tokenString);
                Dispatcher.Dispatch(new GetProfileCardState(response));
                if(response != null){
                    isLoading = false;
                }else{
                    throw new Exception("eroare");
                }
            } catch (Exception) {
                error = true;
                return;
            }
        }else{
            isLoading = false;
        }
    }
}
```
This setup ensures consistent management and updating of the profile information across the application using Fluxor.






This project is an interactive web application developed with Blazor WebAssembly, utilizing Fluxor for state management and including custom services for authentication and handling HTTP requests.

Timeline

User Manager




## Arhitecture. 
[Acces live](https://quote.gabrielchiorcea.tech/).

This project is a standalone frontend application built with React, focusing on delivering a streamlined user experience. It does not have a dedicated backend; instead, it relies on Firebase as a Backend-as-a-Service (BaaS) for data storage and real-time functionality. Designed with a mobile-first approach, the application prioritizes optimization for mobile devices, providing core features inspired by Facebook, such as sharing posts and liking them.

<div className="image columns-1 sm:columns-2 gap-8">


![React 02.](/images/project/01.jpg)
![React 04.](/images/project/01-01.jpg)

</div>

For data storage, the application uses a NoSQL Firebase database. User data, such as account creation information, is temporarily stored in the local session (e.g., localStorage or sessionStorage) and then sent to Firebase for permanent storage. Posts and other content-related data are retrieved from Firebase through API calls, often referred to as "gates." These are then integrated into the app's state, which is managed using Redux, ensuring a consistent and efficient flow of information between components.
[Acces live](https://quote.gabrielchiorcea.tech/).

The application incorporates modern technologies to achieve its functionality. While React serves as the framework for building the user interface, Sass is used for styling, offering modular and reusable designs. Redux is at the core of the app’s state management, enabling smooth synchronization of data such as posts, likes, and shares. Middleware like Redux Thunk facilitates handling asynchronous API calls to Firebase, ensuring organized and efficient state updates.

The user interactions within the app are intuitive and align with familiar patterns from social media platforms. For instance, users can share posts or like them, with these actions updating both the local state and Firebase in real-time. Account creation is straightforward, with user details initially stored locally before being validated and saved in Firebase. Posts and related interactions, once fetched, are synchronized with the Redux Store, making them readily accessible across various parts of the application.


## Redux Role in the Application 
[Acces live](https://quote.gabrielchiorcea.tech/).

Redux manages the global state of the application, ensuring synchronization between Firebase and the user interface. Upon initialization, all posts are fetched from Firebase and stored in posts, an array that holds all existing posts.

The Redux state structure also includes oldPosts for older posts and newpost for newly created ones. When a user adds a new post, it's first stored in newpost, then added to both posts and jokes to keep the UI up-to-date. This allows real-time updates and ensures smooth content management across the application.

```javascript
 name: 'post',
  initialState: {
    posts: [],
    newPost: [],
    topTen: [],
    oldPost: [],
    wellcomeState: 'empty',
    writtenPost: false,
    existUser: false,
    cookieConsent: false,
    deleteAccount: false,
    error: {
      errorMainArr: false,
      errorMajorArr: false,
      formError: false,
      registration: false,
    },
```


## Custom Hook for Post Updates (Like/Dislike)
[Acces live](https://quote.gabrielchiorcea.tech/).

In this application, posts are categorized into two types: those containing obscene words and those that are normal. The like/dislike functionality relies on three key parameters: id, type, and url. The id uniquely identifies a post, type specifies whether it's a like or a dislike, and url determines which division the post belongs to (either containing obscene content or not). This url corresponds to different sections in the database, as the posts are stored separately to simplify analysis of the content.

To implement this functionality, a custom hook is designed to handle post updates based on user interaction. The process can be broken down as follows:


1. Item 1 URL Fetching from env: Based on the provided url (indicating the division), the custom hook retrieves the corresponding URL stored in the environment file (.env). This URL points to the specific division of posts, allowing for clear separation of content that contains obscene words from normal content.

2. Item 2 Like/Dislike Action: Once the hook receives the type (either "like" or "dislike"), it triggers an API call to the appropriate division (using the URL retrieved from env). The post’s unique id is used to fetch the relevant post data for processing.

3. Item 3 Post Comparison and State Update: After fetching the post, the custom hook compares it to the corresponding entry in the oldPosts array (which holds previously fetched post data). If the post has changed—such as when the like/dislike count has been updated—the hook will update the Redux state with the new data. If the post differs from its previous state, it will be added to the posts array in Redux for UI reactivity.

4. Item 4 Database Synchronization: Once the UI state is updated with the new like/dislike data, the hook ensures the changes are reflected in the Firebase database by sending an update request, ensuring consistency between the frontend and the backend.

[Acces live](https://quote.gabrielchiorcea.tech/).

```javascript
import { postActions } from '../store/post-slice';
import { useDispatch } from 'react-redux';
const useUpdate = () => {
  const dispatch = useDispatch();

  const mapPutVote = async (id, type, url) => {
    const sendId = id;
    const URL = url;

    let response;
    let comeFrom;
    if (URL === process.env.REACT_APP_URL_POST) {
      comeFrom = 'AllPosts';
      response = await fetch(
        process.env.REACT_APP_PrefixNormalDB + sendId + '.json'
      );
    } else {
      comeFrom = 'MajorPosts';
      response = await fetch(
        process.env.REACT_APP_PrefixMajorDB + sendId + '.json'
      );
    }
    const data = await response.json();
    let notIncremented = data.vote;
    
    let isIncrmented;

    if (type === 'increment') {
      isIncrmented = ++notIncremented;
    } else if (type === 'decrease' && notIncremented <= 0) {
      isIncrmented = notIncremented;
    } else {
      isIncrmented = --notIncremented;
    }

    const sendVote = { vote: isIncrmented };
    const newVote = sendVote.vote;
    const sendPayload = {
      comeFrom: comeFrom,
      id: sendId,
      vote: sendVote.vote,
    };

    let switchedUrl;

    if (URL === process.env.REACT_APP_URL_BANC) {
      switchedUrl = process.env.REACT_APP_PrefixNormalDB + sendId + '.json';
    } else if (URL === process.env.REACT_APP_URL_MAJOR) {
      switchedUrl = process.env.REACT_APP_PrefixMajorDB + sendId + '.json';
    }
    if (notIncremented > 0) {
      setTimeout(() => {
        fetch(switchedUrl, {
          method: 'PATCH',
          body: JSON.stringify({ vote: newVote }),
        });
      }, 700);
    }

    dispatch(postActions.upDateOldPosts(sendPayload));

  };
  return { mapPutVote };
};

export default useUpdate;

```


## More

<div className="image columns-1 sm:columns-2 gap-8">

![React 03.](/images/project/01-02.jpg)
![React 03.](/images/project/01-03.jpg)
</div>




This project is a standalone frontend application built with React, focusing on delivering a streamlined user experience. It does not have a dedicated backend; instead, it relies on Firebase as a Backend-as-a-Service (BaaS) for data storage and real-time functionality.

Social App


## Description.

This frontend serves two primary and critical functions: processing an Excel file and handling JSON-formatted data received from the backend. The received data is utilized to create a summarized, tabular visualization of the Excel content, ensuring user-friendly data representation. The frontend operates in close connection with the backend project, Store, establishing a seamless backend-frontend integration to deliver an end-to-end solution as a final product.

This project is built using React for the user interface, Sass for styling, and Redux for state management.

<div className="image columns-1 sm:columns-2 gap-8">

![React 01.](/images/project/02-01.jpg)
![React 02.](/images/project/02-02.jpg)
![React 01.](/images/project/02-03.jpg)
![React 02.](/images/project/02-04.jpg)
</div>


## Send the Excel

The ExcelAdIn component in React facilitates Excel file uploads and backend submission. It uses useState for managing file input, validation, and upload readiness, while useDispatch triggers Redux actions. The component validates files against .xlsx or .xls extensions and, upon validation, sends the file to the backend via a POST request at /excel, using FormData. It dynamically renders two views: a file input with a "Validate" button for initial upload and a "Start" button for submission. Modular CSS ensures styling, creating a user-friendly interface for seamless file upload and backend integration.

```javascript
const ExcelAdIn = () => {
  const dispatch = useDispatch();

  const [validate, setValidate] = useState(false);
  const [isExcel, setIsExcel] = useState(false);
  const [excelFile, setExcelFile] = useState(undefined);

  const onSubmit = () => {
    if (excelFile !== undefined) {
      setIsExcel(true);
    }
  };

  const excelReader = () => {
    const allowedExtensions = ['.xlsx', '.xls'];

    if (excelFile && allowedExtensions.includes(excelFile.name.slice(-5))) {
      dispatch(excelAction.excelUpLoad(true));
      const formData = new FormData();
      formData.append('file', excelFile);
      fetch('#########', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: formData,
      }).then((response) => console.log(response.json()));
      console.log(formData);
    }
  };

  const start = (
    <div className={style.container}>
      <button className={style.start} onClick={excelReader}>
        Start
      </button>
    </div>
  );

  const addExcel = (
    <div className={style.container}>
      {!validate && (
        <div className={style.addExcel}>
          <label htmlFor="file-input" className={style.fileLabel}>
            Add Excel
          </label>
          <input
            type="file"
            accept=".xlsx, .xls"
            className={style.fileInput}
            onChange={(e) => {
              setExcelFile(e.target.files[0]);
              setValidate(true);
            }}
          />
        </div>
      )}
      {validate && (
        <button className={style.start} onClick={onSubmit}>
          Validate
        </button>
      )}
    </div>
  );

  return <Fragment>{isExcel ? start : addExcel}</Fragment>;
};

export default ExcelAdIn;
```



## Custom Hook for Dynamic API Requests and Data Handling

The useQAfetch custom hook is designed to handle API interactions with a backend for various data retrieval or manipulation tasks related to Excel processing. It uses Redux's dispatch to update the application state based on the API responses. Here's a technical explanation:

1. Hook Structure: The hook defines an asynchronous function, fetchServer, which accepts a string parameter that determines the API endpoint or function to call.

2. Dynamic Endpoint Selection: Based on the provided string, the function appends it to a base URL to construct the endpoint dynamically. Specific cases, such as "Count null value," "Excel summary," and others, are handled with conditional logic.

3. API Call: It uses the fetch API to make HTTP GET requests to the backend. If the string corresponds to an "Under construction" case, it directly dispatches a placeholder response without making a request.

4. Response Parsing:
The response status is validated, and errors are caught and handled gracefully.
For valid responses, the JSON payload is parsed and structured into a standardized format, with fields like rows, columns, and max_value populated for specific strings.

5. Data Dispatch: The parsed data is dispatched to the Redux store using an excelAction.excelResponse action. For "fill NAN W 0," the response is further processed into an array before dispatching.

6. Error Handling: If the request fails, the error message and response code are logged, and a standardized error response is dispatched to maintain consistency in the application's state.

7. Flexibility: By accepting a string parameter, the hook can reuse the same logic for different backend functionalities, reducing code duplication and enhancing maintainability.

This custom hook encapsulates API interaction logic, making it modular and easier to integrate into various components that need backend communication.

```javascript
const useQAfetch = () => {
  const dispatch = useDispatch();

  const fetchServer = async (string) => {
    const url = '#########';
    let str = string;
    let responseCode;
    let dataRespons;
    let fillNan = [];
    try {
      let response;
      if (str === 'Count null value') {
        response = await fetch(url + str);
      } else if (str === 'Excel summary') {
        response = await fetch(url + str);
      } else if (str === 'Extract value') {
        response = await fetch(url + str);
      } else if (str === 'Chart') {
        response = await fetch(url + str);
      } else if (str === 'Under costruction') {
        dataRespons = {
          res: 'Under costruction',
          question: str,
        };
        console.log(dataRespons);
        dispatch(excelAction.excelResponse(dataRespons));
        return;
      } else if (str === 'fill NAN W 0') {
        response = await fetch(url + str);
      } else {
        response = await fetch(url + str);
      }

      responseCode = response.status;

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();

      if (str === 'Count null value') {
        dataRespons = { res: data.value, question: str };
      } else if (str === 'Excel summary') {
        dataRespons = {
          rows: data.rows,
          columns: data.columns,
          col_dtypes: data.col_dtypes,
          max_value: data.max_value,
          min_value: data.min_value,
          question: str,
        };
      } else if (str === 'Extract value') {
        dataRespons = {
          value: data.value,
          columns: data.columns,
          row: data.row,
          question: str,
        };
      } else if ('fill NAN W 0') {
        dataRespons = data;
        for (const key in dataRespons) {
          fillNan.push({
            id: dataRespons[key].column,
            question: str,
            column: dataRespons[key].column,
            value: dataRespons[key].arr,
          });
        }
      } else if (str === 'Chart') {
        dataRespons = { res: data.value, question: str };
      } else {
        dataRespons = {
          res: data.value,
          question: str,
        };
      }

      if (str === 'fill NAN W 0') {
        dispatch(excelAction.excelResponse(fillNan));
      } else {
        dispatch(excelAction.excelResponse(dataRespons));
      }
    } catch (error) {
      console.log(error, responseCode);
      dataRespons = {
        res: `We tryed to call the server but the server code is ${responseCode}`,
        question: 'Error',
      };
      dispatch(excelAction.excelResponse(dataRespons));
    }
  };

  return { fetchServer };
};

export default useQAfetch;
```

## Chart Configuration and Visualization

The ChartSettings component is responsible for configuring a chart based on the selected columns from an Excel file, interacting with a backend API. Using useSelector, it extracts data from the application state, including existing responses and current chart configurations. The user can select columns for the X and Y axes, as well as the colors associated with them. These settings are then sent to the backend via a POST request in JSON format. If the request is successful, an image file (the generated chart) is returned, processed, and displayed to the user. The component also includes options to reset the current configuration and displays error messages if the data is invalid or the server request fails. All of these operations are handled using React, with state management via useState and useDispatch, and the interface dynamically updates as the user interacts with the data selection components.


```javascript
const ChartSettings = () => {
  const arr = useSelector((select) => select.exe.excelResponse);
  const c = useSelector((state) => state.exe.chart);
  const dispatch = useDispatch();
  const [colXoane, setColXoane] = useState('');
  const [colXtow, setColXtow] = useState('');
  const [colY, setColY] = useState('');
  const [full, setFull] = useState(false);
  const [imageData, setImageData] = useState(null);
  const [s, setS] = useState(false);
  const [err, setErr] = useState(false);

  const [selectedColorXoane, setSelectedColorXoane] = useState('Blue');
  const [selectedColorXtow, setSelectedColorXtow] = useState('Blue');

  const handleColorChangeXoane = (event) => {
    setSelectedColorXoane(event.target.value);
  };
  const handleColorChangeXtow = (event) => {
    setSelectedColorXtow(event.target.value);
  };

  const setCol = (name) => {
    if (colXoane === '') {
      setColXoane(name);
    } else if (colXtow === '') {
      setColXtow(name);
      setFull(true);
    } else if (colXoane !== '' && colXtow !== '') {
      return;
    }
  };

  const setY = (name) => {
    setColY(name);
  };

  const json = {
    columnX1: [colXoane, selectedColorXoane],
    columnX2: [colXtow, selectedColorXtow],
    Y: colY,
  };

  const createChart = async () => {
    try {
      const response = await fetch('#########', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(json),
      });

      if (!response.ok) {
        throw new Error('Eroare la cerere');
      }
      const blob = await response.blob();
      const imageUrl = URL.createObjectURL(blob);
      setImageData(imageUrl);
      dispatch(excelAction.chart(true));
      setS(true);
    } catch (error) {
      console.error(`An error occurred: ${error.message}`);
      setErr('This combination does not make sens');
    }
    console.log(json);
  };
  const restore = () => {
    setColXoane('');
    setColXtow('');
    setColY('');
    setFull(false);
    setImageData(null);
    setS(false);
    setSelectedColorXoane('Blue');
    setSelectedColorXtow('Blue');
    dispatch(excelAction.chart(false));
    setErr(false);
  };

  const relode = (
    <button className={btn.btn} onClick={restore}>
      relode
    </button>
  );

  const colNames = arr.res.map((el) => (
    <ChartBtn key={el} name={el} col={el} onClick={full ? setY : setCol} />
  ));

  const tablesChios = (
    <>
      <table className={style.tableConatiner}>
        <thead>
          <tr>
            <th className={style.thead}>Axis X</th>
            <th className={style.thead}>Color for X</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td
              className={style.tableContent}
              style={{ color: selectedColorXoane, fontWeight: 'bold' }}
            >
              {colXoane}
            </td>

            <td className={style.tableContent}>
              <select
                className={style.select}
                value={selectedColorXoane}
                onChange={handleColorChangeXoane}
              >
                <option className={style.option} value="Blue">
                  Blue
                </option>
                <option className={style.option} value="Red">
                  Red
                </option>
                <option className={style.option} value="Green">
                  Green
                </option>
                <option className={style.option} value="Yellow">
                  Yellow
                </option>
              </select>
            </td>
          </tr>
          <tr>
            <td
              className={style.tableContent}
              style={{ color: selectedColorXtow, fontWeight: 'bold' }}
            >
              {colXtow}
            </td>

            <td className={style.tableContent}>
              <select
                value={selectedColorXtow}
                onChange={handleColorChangeXtow}
              >
                <option value="Blue">Albastru</option>
                <option value="Red">Roșu</option>
                <option value="Green">Verde</option>
                <option value="Yellow">Galben</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
      <table className={style.tableConatiner}>
        <thead>
          <tr>
            <th className={style.thead}>Axis Y</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className={style.tableContent} style={{ fontWeight: 'bold' }}>
              {colY}
            </td>
          </tr>
        </tbody>
      </table>
    </>
  );

  const img = (
    <div className={style.imgChart}>
      {imageData && (
        <img className={style.img} src={imageData} alt="Descriere imagine" />
      )}
    </div>
  );

  const chart = (
    <div className={style.create}>
      <div className={style.chartContainerBtn}>
        <svg
          className={style.svgBtn}
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          viewBox="0 0 32 32"
        >
          <path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM14 24c0 1.1-0.9 2-2 2h-4c-1.1 0-2-0.9-2-2v-16c0-1.1 0.9-2 2-2h4c1.1 0 2 0.9 2 2v16zM26 18c0 1.1-0.9 2-2 2h-4c-1.1 0-2-0.9-2-2v-10c0-1.1 0.9-2 2-2h4c1.1 0 2 0.9 2 2v10z"></path>
        </svg>
        <button onClick={createChart} className={style.chartBtnStart}>
          Create
        </button>
      </div>
      {err && (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ color: 'red' }}>{err}</span>
          {relode}
        </div>
      )}
    </div>
  );

  return (
    <>
      {!s && colNames}
      {s && relode}
      <div className={s ? style.imgContainer : style.chartContainer}>
        {!s && tablesChios}
        {s ? img : chart}
      </div>
    </>
  );
};

export default ChartSettings;
```


## Conclusion:

The front-end implementation demonstrates a well-structured and interactive approach for handling data visualization. It allows users to dynamically select columns for chart creation, customize colors, and submit requests to the backend. The component handles responses efficiently, displaying the generated chart as an image. With a focus on flexibility, it supports multiple combinations of input data and ensures proper error handling to provide a smooth user experience. The inclusion of a reset functionality allows for easy restoration of settings. This front-end approach integrates effectively with the backend, ensuring the process from data selection to chart generation is seamless, intuitive, and user-friendly.


This frontend serves two primary and critical functions: processing an Excel file and handling JSON-formatted data received from the backend. The received data is utilized to create a summarized, tabular visualization of the Excel content, ensuring user-friendly data representation.

Excel Model Viewer


## Arhitecture.

This application serves as a backend capable of processing and reading data from Excel files. To utilize this backend and connect it to a frontend, a user account is required. The account is essential as it provides a unique API key for authentication and authorization.

Excel files are read using Pandas, which converts the file content into a DataFrame. Once transformed into a DataFrame, the data is further converted into JSON format based on the specific functions or filters requested. This enables dynamic and customizable data extraction from the Excel file.

The Excel file itself is stored in the database as a binary large object (BLOB), ensuring secure and efficient storage


<div className="image columns-1 sm:columns-2 gap-8">

![Python 01.](/images/project/05-01.jpg)
![Python 02.](/images/project/05-02.jpg)
</div>


## Get and store the excel file

The Excel file is uploaded via the /excel endpoint of the API. At this endpoint, the file undergoes validation to ensure it is an Excel file, even if the frontend does not perform this check. Once validated, the file is renamed for consistency and security.

The renaming process involves appending a unique ID, derived from the user’s API key, to the file name. The resulting format is {ID}.xlsx. The renamed file is then securely stored in the database as a BLOB with its new identifier, ensuring traceability and efficient management.


```python
@app.route('/excel', methods=['POST'])
@csrf.exempt
def upload_excel():
    try:
        # Check if a file is present in the request
        if 'file' not in request.files:
            return jsonify({'res': 'No file found in the request'}), 400
        
        file_in = request.files['file']
        id = request.args.get('id')

        # Validate the user ID parameter
        if not id:
            return jsonify({'res': 'Missing user ID'}), 400

        # Check if the file name is empty
        if file_in.filename == '':
            return jsonify({'res': 'File name is empty'}), 400

        # Validate the file extension (only .xlsx and .xls are allowed)
        if not (file_in.filename.endswith('.xlsx') or file_in.filename.endswith('.xls')):
            return jsonify({'res': 'Invalid file type, only Excel files are allowed (.xlsx, .xls)'}), 400

        file_content = file_in.read()
        
        # Ensure the file is not empty
        if not file_content:
            return jsonify({'res': 'Uploaded file is empty'}), 400

        # Generate a unique name for the file based on the user ID
        file_name = f"{id}.xlsx"

        # Create a new database record for the Excel file
        new_excel_file = Excel(name=file_name, excel=file_content)

        # Add the file to the database session and commit
        db.session.add(new_excel_file)
        db.session.commit()

        return jsonify({'res': 'File uploaded successfully'}), 200

    except Exception as e:
        # Roll back the database transaction in case of an error
        db.session.rollback()
        print(f"Error: {e}")  # Log the error details to the console
        return jsonify({'res': f'An error occurred while processing the file: {str(e)}'}), 500

```

## How the backend know what data to give you

The below API endpoint, accessible via /<string:para>/<string:ident> with a GET request, dynamically processes Excel files stored in a database. It retrieves the file based on an id query parameter, reads it into a Pandas DataFrame, and executes specific functions depending on the para value (e.g., counting null values, extracting data, summarizing content, filling missing values, or generating charts). The user's existence and identification (ident) are validated against the database, and if necessary, new identification records are created. By utilizing specialized classes (RespondGet and ResponseFill), the endpoint ensures modular and efficient data manipulation while maintaining robust error handling and database consistency.


```python
@app.route('/<string:para>/<string:ident>', methods=['GET'])
@csrf.exempt
def get_with_ident(para, ident):
    identificare = quote(ident)
    id = request.args.get('id')
    filename = str(id)+'.xlsx'
    retrieved_excel_file = Excel.query.filter_by(name=filename).first()
    excel_data = retrieved_excel_file.excel
    excel_df = pd.read_excel(io.BytesIO(excel_data))
    isntance_of_class = RespondGet(excel_df, id)
    isntance_of_fill = ResponseFill(excel_df, id)
    exist = User.query.filter_by(identification=identificare).first()
    identt = Identification.query.filter_by(identification=identificare).first()

    if(exist != None  and identt != None):
            if para == "CountNullValue":
                count = isntance_of_class.resp_get_null()
                return count
            elif para == "ExtractValue":
                ex_val = isntance_of_class.resp_get_ex_val()
                return ex_val
            elif para == "ExcelSummary":
                sumar = isntance_of_class.resp_get_ex_sumar()
                return sumar
            elif para == 'fillNANW0':
                fill_na = isntance_of_fill.fill_na()
                return fill_na
            elif para == 'Chart':
                chart = isntance_of_class.chart_columns()
                return chart
    elif(exist and identt == None):

        time = datetime.now()
        ident = Identification(timestamp=time, identification= identificare)
        db.session.add(ident)
        db.session.commit()
        if para == "CountNullValue":
            count = isntance_of_class.resp_get_null()
            return count
        elif para == "ExtractValue":
            ex_val = isntance_of_class.resp_get_ex_val()
            return ex_val
        elif para == "ExcelSummary":
            sumar = isntance_of_class.resp_get_ex_sumar()
            return sumar
        elif para == 'fillNANW0':
            fill_na = isntance_of_fill.fill_na()
            return fill_na
        elif para == 'Chart':
            chart = isntance_of_class.chart_columns()
            return chart
    else:
        return jsonify({'val': exist}), 400
```





This application serves as a backend capable of processing and reading data from Excel files. To utilize this backend and connect it to a frontend, a user account is required. The account is essential as it provides a unique API key for authentication and authorization.

Excel Model Viewer Backend


## Description

This backend is a Flask-based web application that provides user authentication and profile management functionalities. It is designed to handle user sign-up, login, profile updates, and account management. The backend interacts with a MySQL database using SQLAlchemy for ORM (Object-Relational Mapping).
This backend leverages a combination of Flask, SQLAlchemy, PyJWT, MySQL, and Werkzeug to provide a robust and secure user authentication and profile management system. Flask serves as the web framework, SQLAlchemy handles database interactions, PyJWT manages token-based authentication, MySQL stores user data, and Werkzeug provides essential utilities for web application development. This technology stack ensures efficient and secure handling of user data and authentication processes.


## PyJWT Usage in This Backend

#### How PyJWT is Used in This Backend:

1. Token Generation:
When a user logs in, a JWT is generated using the create_access_token function. This token includes the user's ID and an expiration time. The token is then sent in the database, to the client we give a code related to the token, which stores it and includes it in the Authorization header of subsequent requests.

| id 	| session_string 	| jwt                                                   	|
|----	|----------------	|-------------------------------------------------------	|
| 44 	| 8PBV22S        	| eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmcmVzaCI6Z... 	|

As can be seen, nothing relate to the id of the user, the id is inside of jwt and need special decode for extract the ID.

2. Token Verification:
For protected routes, the backend verifies the JWT included in the Authorization header of incoming requests. The token is decoded using the jwt.decode function, which extracts the user's ID and other claims. If the token is valid, the request is processed; otherwise, an error response is returned.

3. Session Management:
The backend uses JWTs to manage user sessions. When a user logs in, a session is created with the generated token. This session is used to authenticate the user for subsequent requests.

## Key Features: 
### User Authentication:

Sign-Up: Allows users to create an account by providing an email and password. This is keeped it simple.

```python
@main.route('/creare-cont' , methods=['POST'])
def insert_data():
    data = request.get_json()
    email = data.get('email')
    password = data.get('password')
    firstName = data.get('firstName')
    lastName = data.get('lastName')
    userName = data.get('username')

    try: 
        has = HashPass.passwordHash(password) 
        new_user = User( userName, email, lastName, firstName , has)
        db.session.add(new_user)
        db.session.commit()
        return jsonify({'message': "The user account is create with succes"}), 201
    except SQLAlchemyError as e:
        db.session.rollback()
        return jsonify({'error': str(e)}), 500
```
### User Authentication:

About HashPass.passwordHash(password) is a special medotdh I create to hash the password, validate email format and checking for missing fields are done in the FrontEnd, checking for existing email and username 
I have a separated function that is used in FrontEnd when input is out of focus, the function is call via API. 

Login: Users can log in using their email and password. A JWT (JSON Web Token) is generated for authenticated sessions. Dummy profile and social link data are created for new users.

```python
        if user:
            access_token = create_access_token(identity=check_user.id, expires_delta=datetime.timedelta(days=1))    
            insert_session = Session(add_session_string, access_token)
            dummy_profile = ProfileCard(
                occupation="May I ask you what do you do?",
                homeaddress="How far are you ?",
                country="I guess you are from Nice ?",
                county="France ?",
                user_id=check_user.id,
                image=b""  
            )
            dummy_social_links = SocialLinks(
                linkedin="https://linkedin.com/",
                facebook="https://facebook.com/",
                github="https://github.com/",
                instagram="https://instagram.com/",
                twitter="https://twitter.com/",
                youtube="https://youtube.com/",
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                user_id=check_user.id
            )            

            db.session.add(insert_session)
            db.session.commit()

            db.session.add(dummy_profile)
            db.session.commit()

            db.session.add(dummy_social_links)
            db.session.commit()
            return jsonify({'message': add_session_string}), 200
        else:   
            return jsonify({'message': 'Password or user are incorrect'}), 202
```

### Profile Management:

Set Contact Details: Allows users to update their contact details, including occupation, home address, country, county, and profile image.


Set Social Links: Allows users to update their social links, such as LinkedIn, Facebook, GitHub, Instagram, Twitter, and YouTube.

```python
# Retrieve the existing social links
            social_links = SocialLinks.query.filter_by(user_id=user_id).first()

            if social_links:
                # Update the existing social links with new data
                social_links.linkedin = data.get("linkedIn", social_links.linkedin)
                social_links.facebook = data.get("faceBook", social_links.facebook)                
                social_links.github = data.get("gitHub", social_links.github)            
                social_links.instagram = data.get("instagram", social_links.instagram)            
                social_links.twitter = data.get("twitter", social_links.twitter)                
                social_links.youtube = data.get("youtube", social_links.youtube)
                social_links.description = data.get("description", social_links.description)
```
I use this approach because this is an update.


Get Profile: Retrieves the user's profile information, including occupation, home address, country, county, and social links.

```python
    try:
        decoded_token = jwt.decode(ses.jwt, secret_key, algorithms=["xxxxx"])
        user_id = decoded_token.get('sub')  # Extract user ID from 'sub' key
    except jwt.DecodeError as e:
        return jsonify({'error': 'Invalid token format', 'message': str(e)}), 400
    except jwt.ExpiredSignatureError:
        return jsonify({'error': 'Token has expired'}), 401
    except jwt.InvalidTokenError as e:
        return jsonify({'error': 'Invalid token', 'message': str(e)}), 401



        `````````````````````````````````````````````````````````````````````````````````````

         profile = ProfileCard.query.filter_by(user_id=user_id).first()
    social_links = SocialLinks.query.filter_by(user_id=user_id).first()
    user = User.query.filter_by(id=user_id).first()
    if not profile:
        return jsonify({'error': 'Profile or user not found'}), 404
    image_base64 = base64.b64encode(profile.image).decode('utf-8')
    return jsonify({
        'HomeAddress': profile.homeaddress,
        'Country': profile.country,
        'County': profile.county,
        'Occupation': profile.occupation,
        'Image': image_base64,  # Assuming image is stored as binary data
        'FullName': ' '.join([user.first_name, user.last_name]),
        'Email': user.email,
        'LinkedIn': social_links.linkedin,
        'FaceBook': social_links.facebook,
        'GitHub': social_links.github,
        'Instagram': social_links.instagram,
        'Twitter': social_links.twitter,
        'Youtube': social_links.youtube,
        'Description': social_links.description

    }), 200
```

### Account Management:

Everything start with chinkd the jwt:

```python
ses = Session.query.filter_by(session_string=token).first()
decoded_token = jwt.decode(ses.jwt, secret_key, algorithms=["#####"])
```

Change Password: Allows users to change their password by providing the current password and a new password.
```python
 # Verify the current password
        if not HashPass.check_password(user.password, current_password):
            return jsonify({'message': 'Current password is incorrect'}), 400

        # Update the password
        user.password = HashPass.passwordHash(new_password)
        db.session.commit()
```

Change Email: Allows users to update their email address.
```python
 user = User.query.filter_by(id=user_id).first()
        if not user:
            return jsonify({'message': 'User not found'}), 404

        # Update the email
        user.email = new_email
        db.session.commit()
```
Change Username: Allows users to update their username, ensuring the new username is not already taken.
```python
existing_user = User.query.filter_by(username=new_username).first()
        if existing_user:
            return jsonify({'message': 'Username already taken'}), 400

        # Update the username
        user.username = new_username
        db.session.commit()
```

Delete Account: Allows users to delete their account and all related data, including profile and social links.
```python
ser = User.query.filter_by(id=user_id).first()
        if not user:
            return jsonify({'message': 'User not found'}), 404

        # Delete related records
        ProfileCard.query.filter_by(user_id=user_id).delete()
        SocialLinks.query.filter_by(user_id=user_id).delete()

        # Delete the user record
        db.session.delete(user)
        db.session.commit()
```

Technologies Used:
Flask: A lightweight WSGI web application framework in Python.
SQLAlchemy: An ORM library for managing database interactions.
PyJWT: A Python library for working with JSON Web Tokens.
MySQL: A relational database management system for storing user data.
Werkzeug: A comprehensive WSGI web application library used for password hashing and security.

Example Endpoints:
1.  POST /intra-in-cont: Sign up a new user.
2.  POST /login: Log in an existing user.
3.  GET /getProfile: Retrieve the user's profile information.
4.  POST /setContactDetail: Update the user's contact details.
6.  POST /setSocialLink: Update the user's social links.
7.  POST /changePassword: Change the user's password.
8.  POST /changeEmail: Change the user's email address.
9.  POST /changeUsername: Change the user's username.
10. DELETE /deleteAccount: Delete the user's account and all related data.

This backend provides a robust foundation for user authentication and profile management, ensuring secure and efficient handling of user data.

This description provides a comprehensive overview of the backend's functionality, key features, and technologies used. Adjust the details as needed to match your specific implementation.




This backend is a Flask-based web application that provides user authentication and profile management functionalities. It is designed to handle user sign-up, login, profile updates, and account management.

User Manager Backend


## Server Configuration

To analyze the implemented configurations, a live session can be arranged where I will provide access for a joint review.

This project represents a dedicated hosting server for all my applications, configured to provide performance, security, and scalability. The server is optimized to run modern applications with minimal response time and high reliability.

### **Firewall (UFW)**
Uncomplicated Firewall (UFW) is configured to protect the server by restricting access to necessary ports.
- HTTP (80) and HTTPS (443) for web access
- SSH with IP restrictions for security, dedicate IP.
- Custom ports for internal services
- Rate limiting for brute-force attack protection

###  **Operating System - Ubuntu 20.04 LTS**
Ubuntu 20.04 LTS was chosen for its stability, long-term support, and excellent compatibility with most server-side applications.
- Optimized kernel for performance and security
- Swap tuning for efficient memory management
- Automatic security updates and periodic security audits

###  **MariaDB - Database Management System**
MariaDB is installed to support applications that require data storage, especially those involving user authentication and account management.
- Configured with master-slave replication for redundancy
- Optimized for performance using query caching and indexing
- Automatic daily backup and fast recovery when needed
- Secure access via SSL connections and role-based authentication


```ini
[mysqld]
bind-address = 127.0.0.1
max_connections = 500
thread_cache_size = 128
table_open_cache = 4000
query_cache_type = 1
query_cache_size = 64M
query_cache_limit = 2M
tmp_table_size = 64M
max_heap_table_size = 64M
innodb_buffer_pool_size = 1G
innodb_log_file_size = 256M
innodb_flush_log_at_trx_commit = 1
innodb_flush_method = O_DIRECT
innodb_file_per_table = 1
innodb_read_io_threads = 8
innodb_write_io_threads = 8
log_error = /var/log/mysql/error.log
slow_query_log = 1
slow_query_log_file = /var/log/mysql/slow.log
long_query_time = 1
server-id = 1
log_bin = /var/log/mysql/mysql-bin.log
expire_logs_days = 10

```

### **Nginx - Web Server and Reverse Proxy**
Nginx was chosen for its high performance and capability to function as a reverse proxy for Python-based web applications.
- Configured with gzip and static caching for improved load speeds
- Supports HTTP/2 and SSL with Certbot for security
- Load balancing and failover for high availability
- Rate limiting to prevent DDoS attacks


#### `nginx.conf` (Optimized Nginx Reverse Proxy Configuration with SSL & HTTP/2)
```nginx
server {
    listen 80;
    server_name excelstore.gabrielchiorcea.texh;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name excelstore.gabrielchiorcea.texh;

    ssl_certificate /etc/letsencrypt/live/excelstore.gabrielchiorcea.texh/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/excelstore.gabrielchiorcea.texh/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
    }

    client_max_body_size 10M;
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}
```


### **Gunicorn - Python Application Server**
Gunicorn is used to run Python applications and ensure scalability.
- Configured as a systemd daemon for maximum uptime
- Uses worker threads to efficiently manage multiple connections
- Automatic restart in case of failure for increased resilience
- Supports WebSocket connections and asynchronous processing


#### `gunicorn.service` (Optimized Systemd Service for Gunicorn)
```ini
[Unit]
Description= excelstore
After=network.target

[Service]
User=www-data
Group=www-data
WorkingDirectory=/var/www/....
ExecStart=/usr/bin/gunicorn --workers 4 --threads 2 --bind 0.0.0.0:8000 --access-logfile /var/log/gunicorn/access.log --error-logfile /var/log/gunicorn/error.log wsgi:app

Restart=always
LimitNOFILE=4096

[Install]
WantedBy=multi-user.target
```



### **Jenkins - CI/CD Pipeline**
Jenkins is configured to automate the deployment process.
- Integrated with GitHub for automatic deployment
- Pipeline defined with Bash scripts to manage code in the document root
- Configured with SSL for secure access
- Auto-build trigger on every commit

### **Monitoring and Logging**
To ensure maximum uptime and rapid issue detection, the server includes:
- **Prometheus & Grafana** for metric monitoring and visual dashboards
- **Fail2Ban** to detect and block unauthorized access attempts
- **Elasticsearch & Kibana** for logging and traffic analysis

### **Backup and Disaster Recovery**
To protect data, the server has an automated backup and recovery system:
- **BorgBackup & Restic** for encrypted incremental backups
- **Automatic snapshots** for quick restoration
- **Disaster recovery plan** to restore the system in case of an attack

### **Automation and Security**
For each new project, I have created an automation script that:
- Automatically configures the application directory and Nginx vhost
- Generates and installs SSL via Certbot
- Adds the DNS zone in Cloudflare for easier management
- Creates backups and configures automatic monitoring

The server runs in a KVM virtualized environment, providing flexibility in resource allocation and easy migration.

This project demonstrates my knowledge of administering and configuring a professional hosting server capable of running modern applications in a secure and scalable environment.

---






A fully configured server to host all of my projects.

Gabriel
Chiorcea

Technology I work with

Recent Works

Build with React

Food Order App

Build with C#

User Manager

Build with React

Social App

Build with React

Excel Model Viewer

Build with Python

Excel Model Viewer Backend

Build with Python

User Manager Backend

Server administration

Hosting Server

Process Delivers Value

01—Frontend

02—Backend

03—Database

My paperwork

Vibe Coding: The Future of No-Code Programming

How to Optimize React Performance with Memoization

Guide to Setting Up a Django Server with Nginx and Gunicorn

GabrielChiorcea

Technology I work with

Recent Works

Build with React

Food Order App

Build with C#

User Manager

Build with React

Social App

Build with React

Excel Model Viewer

Build with Python

Excel Model Viewer Backend

Build with Python

User Manager Backend

Server administration

Hosting Server

Process Delivers Value

01—Frontend

02—Backend

03—Database

My paperwork

Vibe Coding: The Future of No-Code Programming

How to Optimize React Performance with Memoization

Guide to Setting Up a Django Server with Nginx and Gunicorn

Gabriel
Chiorcea