Blog

My paperwork



## 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



Hey there, tech enthusiasts! 👋

---

## **Python 2025: More Than Just a Language**

### **1. Quantum Leap: Python Goes Quantum**  
That’s right—Python is taking a bold step into the quantum realm. With libraries like [Qiskit](https://qiskit.org/), developers can now tap into quantum computing without needing a PhD in physics. Whether you’re exploring cryptography, financial modeling, or simulating complex molecular interactions, Python is bridging the gap between today and the future.

### **2. AI-Powered Automation: Work Smarter, Not Harder**  
Python continues to dominate the AI space, enabling next-level automation. Imagine building tools that not only solve problems but predict them before they even arise. With frameworks like TensorFlow and PyTorch, creating intelligent chatbots, voice assistants, or even self-optimizing systems is easier than ever. The buzzword for 2025? AI-powered everything.

### **3. Async Is King: Real-Time, All the Time**  
The world’s moving fast, and so are apps. Python’s focus on asynchronous programming is making real-time processing the standard. Frameworks like FastAPI are leading the charge, offering blazing speeds and unmatched efficiency. Whether you’re handling thousands of requests or streaming data, async programming is the secret sauce to scalability.

> **Pro Tip**: If you’re not exploring async, you’re missing out on where modern apps are headed.

**Source**: [Python Central](https://www.pythoncentral.io/python-development-trends-in-2025/)

---

## **Django 2025: The Framework of the Future**

### **1. Async Django: Built for the Modern Web**  
Django heard the call for speed and answered. With improved support for asynchronous tasks, Django is now a better fit for real-time applications like live chats, stock tickers, and multiplayer games. It’s the same robust framework you love—just turbocharged.

### **2. Microservices Made Simple**  
Microservices aren’t just a trend; they’re the future. Django is embracing this shift with better tools for breaking down monolithic apps into manageable, independent services. Expect enhanced flexibility, faster deployments, and happier DevOps teams.

### **3. Go Serverless or Go Home**  
Serverless computing is the name of the game in 2025. Thanks to integrations with AWS Lambda, Google Cloud Functions, and Azure, Django apps can now run serverless, cutting costs and infrastructure headaches. You focus on the code; the cloud handles the rest.

**Source**: [GeeksForGeeks](https://www.geeksforgeeks.org/future-of-django/)

---

## **Broader Trends That Are Shaping the Landscape**

### **1. Cybersecurity: Shield Up!**  
With cybersecurity threats on the rise, Python’s stepping up as a leader in defensive programming. Libraries like Cryptography and Paramiko make it easier to secure sensitive data and ensure that your apps are battle-ready. Don’t just code—fortify.

### **2. Cloud Dominance: Python Owns the Sky**  
Cloud computing is Python’s playground, and tools like OpenStack and Ansible are leveling up. Whether you’re managing multi-cloud architectures or automating deployments, Python ensures you’re operating like a pro in the cloud-first era.

**Source**: [Medium](https://medium.com/@thomas.adman/the-future-of-python-in-2025-trends-to-watch-and-predictions-33d5318dd73d)

---

## **Why This Matters: Keeping Your Edge in 2025**

Let’s face it—technology isn’t slowing down, and neither should you. Python and Django are doubling down on what they do best: enabling developers to create apps that are faster, smarter, and more scalable. If you’re not leveraging async, serverless architectures, or AI-powered automation, now’s the time to jump in.

So, what are you waiting for? Fire up your IDE, dive into the docs, and start building the future today. Let’s make 2025 the year we write the best code of our lives.

Have thoughts on these trends? Drop your comments below—we’d love to hear how you’re using Python and Django to crush it in 2025!


Ready to dive into the hottest updates in Python and Django for 2025? These tools have been our go-to powerhouses for years, and trust me—this year’s updates are about to take your development game to the next level. Whether you’re a Python pro or a Django devotee, this year’s innovations promise to keep you ahead of the curve. Let’s break it down.

What’s New in Python/Django for 2025?



Hey there, tech fan! 👋

## What’s the Deal with Server-Side Rendering (SSR)?

Alright, here’s the lowdown: SSR means your server does the heavy lifting. When someone visits your site, the server sends them a fully-formed, ready-to-go HTML page.

Why SSR is Still Cool in 2025 ?
1. Fast Initial Loads: Your users see the content right away. No waiting around for JavaScript to do its thing. Perfect for folks on slow connections (looking at you, spotty coffee shop Wi-Fi).
2. SEO Heaven: If you’re building something like a blog, news site, or an online store, SSR makes sure Google can actually see your content. More visibility = more traffic = more mony.
3. Universal Access: Got users with older browsers or limited JS support? SSR’s got their back.

What’s the Catch?
   - Your server’s gonna feel the heat. Every request means work, so scalability can be tricky.
   - Dynamic stuff (like those fancy widgets you love) needs extra JavaScript to stay interactive.

## What About Client-Side Rendering (CSR)?

Now, CSR flips the script. The server hands your browser some basic HTML and JavaScript, and the browser takes over, building the page right in front of the user’s eyes.

Why CSR is the Life of the Party
1. Smooth & Interactive: CSR shines when you’ve got a lot of dynamic, clicky stuff going on—think admin dashboards or real-time chat apps.
2. Server-Friendly: Your server can chill while the browser does most of the work. Good for apps with tons of users.
3. App-Like Vibes: Fast transitions, no page reloads—it feels like a native app.

The Downsides?
1. That initial load can feel sloooow. Users on weaker connections might see a blank page before everything kicks in.
2. Search engines aren’t always thrilled with JavaScript-heavy sites, so you’ll need extra tools to keep them happy.

## Why Not Both? (Hint: You Totally Can)

Here’s the good news: in 2025, you don’t have to pick a side. Hybrid solutions are where it’s at, thanks to frameworks like Next.js, Blazor, and SvelteKit. Let me drop some buzzwords for you:

Static Site Generation (SSG)

Your pages are pre-built and served super-fast. Great for stuff that doesn’t change every five seconds, like portfolio sites or blogs.

Incremental Static Regeneration (ISR)

Imagine getting all the benefits of static pages, but with the ability to update them dynamically as needed. This one’s perfect for online stores or any site with frequently updated content.

Partial Hydration

Only load JavaScript for the interactive parts of the page. The rest stays snappy and server-rendered. Modern magic, am I right?

## So… How Do You Choose?

Here’s the cheat sheet:

Go SSR if you need:
Lightning-fast initial page loads.

Top-notch SEO for your content.

A global audience with mixed tech setups.

Go CSR if you need:

A super interactive, app-like feel.

Real-time data updates (think dashboards).

To scale for lots of users without overloading your servers.

Go Hybrid if you want the best of both worlds. Seriously, it’s 2025—why compromise?

## Real-Life Examples

Here’s how I’d play it:

SSR for Blogs and News Sites: Imagine dropping a new blog post about the best coffee spots in California. You want that to load fast and rank high on Google. SSR’s your bestie here.

CSR for Dashboards: Building a project management app for your startup? CSR’s smooth interactivity is exactly what you need.
Hybrid for E-Commerce: Got a shop selling handcrafted surfboards? Use SSR for product pages (SEO gold!) and CSR for that interactive shopping cart.


## Wrap-Up: SSR vs. CSR—Who Wins?

The real winner? Your users. Picking the right approach depends on what you’re building and who you’re building it for. The cool thing is, frameworks in 2025 make it easier than ever to mix and match.

Still on the fence? Hit me up in the comments, or check out tools like Next.js, Blazor, or Astro—they’re game changers.

Alright, that’s it for today! Now go out there and build something amazing. And hey, if you’re in California, let’s grab a coffee and talk tech. ☕


It’s 2025, and the web dev world just keeps moving faster than my morning coffee routine in SoCal. If you’re here, you’re probably wondering whether Server-Side Rendering (SSR) or Client-Side Rendering (CSR) is the right pick for your next big project. Spoiler alert: there’s no one-size-fits-all answer, but don’t worry—I’ve got you covered. Let’s break it all down in simple terms and help you make the call!

Server-Side vs. Client-Side Rendering: Which One to Choose in 2025?

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 class="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 class="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

Meals



<div class="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

Checker




## 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 class="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 class="image columns-1 sm:columns-2 gap-8">

![React 03.](/images/project/01-02.jpg)
![React 03.](/images/project/01-03.jpg)
</div>




React frontend app using Firebase for backend and Sass for styling. Redux manages state

Quote


## 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 class="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.


A frontend that sends an Excel file to a dedicated backend, processes the data, and generates visualizations based on the JSON response returned by the backend.

Power


## 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 class="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
```





Backend with user creation and authentication, excel reading data and transfer in in JSON as response

Excel Store


## 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.




Flask-based backend application providing user authentication and profile management functionalities.


## Description:
This project focuses on configuring a server to host multiple SQL databases efficiently. It utilizes advanced technologies such as Ubuntu 20, UFW firewall for security, Jenkins for continuous integration, Docker for containerization, and support for diverse database systems including MySQL, Oracle, and Microsoft SQL Server. The primary functions include creating databases, managing user accounts, establishing secure remote connections, and making the databases accessible for development purposes. The project is currently in progress and serves a global client base, ensuring robust and scalable database management solutions tailored to diverse needs.




A server configurate to have multiple sql server

Gabriel
Chiorcea

Technology I work with

Recent Works

Build with React

Meals

Build with C#

Checker

Build with React

Quote

Build with React

Power

Build with Python

Excel Store

Build with Python

Backend

Server administration

Database

Process Delivers Value

01—Frontend

02—Backend

03—Database

My paperwork

Guide to Setting Up a Django Server with Nginx and Gunicorn

What’s New in Python/Django for 2025?

Server-Side vs. Client-Side Rendering: Which One to Choose in 2025?

GabrielChiorcea

Technology I work with

Recent Works

Build with React

Meals

Build with C#

Checker

Build with React

Quote

Build with React

Power

Build with Python

Excel Store

Build with Python

Backend

Server administration

Database

Process Delivers Value

01—Frontend

02—Backend

03—Database

My paperwork

Guide to Setting Up a Django Server with Nginx and Gunicorn

What’s New in Python/Django for 2025?

Server-Side vs. Client-Side Rendering: Which One to Choose in 2025?

Gabriel
Chiorcea