Forem: Igor

Connecting a React Frontend with a Node.js Express Backend

Igor — Tue, 04 Feb 2025 16:36:56 +0000

In this project, you will learn how to establish communication between a React-based frontend and a Node.js backend using Express.

Project Setup

First, create a folder named simple_project in your preferred location and open it in your favorite IDE.

Now, let's create the project structure. It will be simple:

frontend folder (React app)
backend folder (Node.js API)

Setting Up the Frontend

Inside the frontend folder, we will use Vite to create our React application along with Tailwind CSS. Navigate into the folder before running the command:

npm create vite@latest
Project name: .
Select a framework: React
Select a variant: JavaScript

Now, install the dependencies:

npm install

Next, install Tailwind CSS:

npm install tailwindcss @tailwindcss/vite

Your frontend folder should now have the following structure:

node_modules
public
src
  ├── App.jsx
  ├── index.css
  ├── main.jsx
.gitignore
...

Configuring Vite

Modify vite.config.js to include Tailwind CSS:

import { defineConfig } from 'vite';
import tailwindcss from "@tailwindcss/vite";
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react(), tailwindcss()]
});

Creating the App Component

Edit App.jsx:

function App() {
  return (
    <div className="min-h-screen w-full bg-gray-100 flex items-center justify-center flex-col gap-10">
      <h1 className="text-5xl font-bold text-gray-800">
        Backend with Express and Node
      </h1>
      <ul className="rounded-2xl shadow-lg bg-white space-y-3"></ul>
    </div>
  );
}

export default App;

Setting Up the Backend

To create the backend, navigate to the backend folder:

cd backend

Initialize a package.json file:

npm init -y

Modify package.json to set main as server.js and add the following:

"type": "module"

Now, install Express and CORS:

npm install express cors

Create a file named server.js inside the backend folder and add the following:

import express from "express";
import cors from "cors";

const app = express();

const CORS_OPTIONS = {
  origin: ["http://localhost:5173"]
};

app.use(cors(CORS_OPTIONS));

app.get("/", (req, res) => {
  res.json({
    blogPosts: [
      {
        title: "\"Neymar's Return to Santos and Its Impact on Grêmio\","
        content: "Grêmio will face tougher competition now that Neymar is back at Santos."
      },
      {
        title: "\"The Importance of Digital Marketing for Your Business\","
        content: "Digital marketing is a powerful tool to boost your business growth."
      }
    ]
  });
});

app.listen(8080, () => {
  console.log("Server is running on port 8080");
});

Since the frontend and backend run on different ports (5173 and 8080), we use CORS to allow communication between them.

Fetching Data from the Frontend

To fetch blog posts from the backend, navigate back to the frontend folder and install axios:

npm install axios

Update App.jsx:

import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const response = await axios.get("http://localhost:8080");
    setData(response.data.blogPosts);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="min-h-screen w-full bg-gray-950 flex items-center justify-center flex-col gap-10">
      <h1 className="text-5xl font-bold text-gray-100">
        Backend with Express and <span className="text-green-400"> Node</span>
      </h1>
      <ul className="rounded-2xl shadow-lg p-5 bg-white space-y-3">
        {data.map((post, index) => (
          <li key={index} className="bg-sky-100 p-4 rounded-2xl hover:scale-105 transition-transform">
            <p className="text-xl font-semibold text-gray-800">{post.title}</p>
            <p className="text-sm text-gray-600">{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

The useState hook stores the fetched data, and useEffect ensures the data is retrieved when the component mounts.

Running the Application

Start both the frontend and backend simultaneously. Open two terminal windows and run:

# In the frontend folder
npm run dev

# In the backend folder
node server.js

Now, open http://localhost:5173/ in your browser. You should see the blog posts displayed on the screen.

Congratulations! You have successfully connected a React frontend with a Node.js backend using Express.

Go history

Igor — Mon, 22 Apr 2024 01:31:01 +0000

Go was conceived in September 2007 by Robert Griesemer, Rob Pike, and Ken Thompson, all at Google, and was announced in November 2009.

Go is especially suited for building infrastructure like networked servers, and tools and system for programmers.

Go is an open-source project, so source code for its compiler, libraries, and tools is freely available to anyone.

Go is described as a “C-like language”. From C, Go inherited its expression syntax, control-flow statements, basic data types, call-by-value parameter passing, pointers, and above all, C’s emphasis on programs that compile to efficient machine code.

Modula-2 inspired the package concept. Oberon eliminated the distinction between module interface files and module implementation files. Oberon-2 influenced the syntax for packages, imports, and declarations, and Object Oberon provided the syntax for method declarations.

In CSP (or Communicating sequential process), a program is a parallel composition (simultaneous execution of computations) of processes that have no shared state; the process communicate and synchronize using channels. Hoare’s CSP was a formal language for describing the fundamental concepts of concurrency, not a programming language for writing executable programs.

Pike and others began to experiment with CSP implementations as actual languages. They created Squeak, which provided a language for handling mouse and keyboards events, with statically created channels. It was a purely functional language with garbage collection. Channels became first-class values, dynamically created and storable in variables.

Go’s innovative slices provide dynamic arrays with efficient random access but also permit sophisticated sharing arrangements reminiscent of linked lists.

It has Garbage Collection, a package system, first-class functions, lexical scope, a system call interface, and immutable string in which text is generally encoded in UTF-8.

Its built-in data types and most library data structures are crafted to work naturally without explicit initialization or implicit constructors, so relatively few memory allocations and memory writes are hidden in the code. Go’s aggregate types (structs and arrays) hold their elements directly, requiring less storage and fewer allocations and pointer indirections than languages that use indirect fields. Go has concurrency features based on CSP. The variable size stacks of Go’s lightweight threads or goroutines are initially small enough that creating one is cheap and creating a million is practical.

Sistemas Operacionais - Parte 2

Igor — Thu, 04 Apr 2024 17:31:54 +0000

O que é um Sistema Operacional?
É difícil cravar o que um SO (Sistema Operacional) é além dizer que é um software que roda no modo Kernel - e até isso às vezes não é verdade. Parte do problema é que SOs executam duas funções essenciais não-relacionadas:
Fornecer um conjunto abstrato e objetivo de recursos ao invés da bagunça vinda do hardware e gerenciar esses recursos.

A arquitetura (conjunto de instruções, organização da memória, I/O e estrutura de barramento) da maioria dos computadores no nível de linguagem da máquina é primitivo e estranho de programar, especialmente a parte de Entrada/Saída.
Todos os SOs fornecem uma camada de abstração para usar discos: os arquivos.
Usando essa abstração, programas podem criar, escrever e ler arquivos, sem precisar lidar com os detalhes de como o hardware realmente funciona.
Essa abstração é a chave para gerenciar toda essa complexidade. Boas abstrações tornam uma tarefa impossível em duas gerenciáveis.
A primeira é definir e implementar as abstrações.
A segunda é usar essas abstrações para resolver o problema atual.

O "arquivo" é uma abstração muito conhecida e muito útil. Um arquivo é como uma foto digital, mensagens salvas de e-mails, músicas ou páginas web.
É muito mais fácil lidar com fotos, emails, músicas e páginas web do que com detalhes de SATA (ou outros) discos.
O trabalho do SO é criar boas abstrações e, então, implementar e gerenciar os objetos abstratos assim criados.

Aprendizados sobre sistemas operacionais – Parte 1

Igor — Sun, 17 Mar 2024 16:21:34 +0000

Neste artigo falarei sobre conceitos que eu aprendi lendo os livros “Modern Operating Systems” do Tanenbaum e “Understanding the Linux Kernel” de Daniel Bovet & Marco Cesati.
Vamos para o que interessa:

Um computador moderno consiste em um ou mais processadores, alguma quantidade de memória principal (RAM), discos rígidos (HDD/SSD), impressoras, um teclado, um mouse, um monitor, interfaces de rede e vários outros dispositivos de entrada/saída (I/O).

O hardware consiste de chips, placas, discos, um teclado e outros objetos físicos. Em cima do hardware fica o software.
A maioria dos computadores possuem 2 modos de operação: o modo Kernel e o modo Usuário. O sistema operacional, a peça de software mais fundamental (como Windows, Linux, MacOS), executa no modo Kernel (ou modo de supervisor). Nesse modo, ele tem acesso completo a todo o hardware e pode executar qualquer instrução que a máquina seja capaz de executar. O resto do software roda no modo de usuário, em que somente um conjunto menor de instruções de máquina estão disponíveis. Em particular, as instruções que afetam o controle da máquina ou que realizam I/O são proibidas no modo usuário (programas de aplicações).
O “User Interface Program”, shell ou GUI (Graphical User Interface), é o software de modo usuário de nível mais baixo e eles permitem o usuário iniciar outros programas.
Uma distinção importante entre o SO e softwares normais é que se um usuário não gostar de um certo programa de email, ele é livre para usar um diferente ou escrever o seu próprio; ele não é livre para escrever o seu próprio clock interrupt handler, que faz parte do SO e é protegido pelo hardware contra tentativas do usuário de modifica-lo.
Alguns sistemas embarcados (embedded software) podem não conter um modo kernel.
Existem programas que permitem o usuário trocar de senha, ou seja, eles possuem funções privilegiadas. Eles não fazem parte do SO e não são executados no modo Kernel, portanto, devem ser protegidos de uma forma especial.
O código fonte de sistemas operacionais chegam a 5 milhões de linhas de código ou mais.

How to choose the best data structure to solve a problem.

Igor — Mon, 05 Feb 2024 00:20:32 +0000

Analyse your problem to determine the operations that must be suported. Examples may include inserting a data item into the data structure, deleting, and finding a specified data item.
Quantify the resource constraints for each operation.
Select the data structure that best meets these requirements.

This three-step approach to selecting a dsa operationalizes a data-centered view of the design process. The first concern is for the data and the operations to be performed on them, the next concern is the representation for those data, and the final concern is the implementation of that representation.
Resource constraints on certain key operations, such as search, inserting data records, and deleting data records, normally drive the data structure selection process.

Are all data items inserted into the data structure at the beginning, or are insertions interspersed with other operations?
Can data items be deleted? If so, this will probably make the implementation more complicated.
Are all data items processed in some well-defined order, or is search for specific data items allowed? "Random access" search generally requires more complex data structures.

Example: A bank must support many types of transactions with its customers. From a database perspectice, we see that ATM transaction do not modify the database significantly. For simplicity, assume that if money is added or removed, this transaction simply changes the valued stored in an account record. Adding a new account to the database is allowed to take several minutes. Deleting an account need have no time constraint, because from the customer's point of view all that matters is that all the money be returned (equivalent to a withdrawal). Typically they are not willing to wait more than a brief time for individual account transactions such as a deposit or withdrawal.
When considering the choice of data structure to use in the database system that manages customer accounts, we see that a data structure that has little concern for the cost of deletion, but is highly efficient for search and moderately efficient for insertion, should meet the resource constraints imposed by this problem. Records are accessible by unique account number. One data structure that meets these requirements is the hash table.

Hash Tables allow for extremely fast exact-match search. A record can be modified quickly when the modification does not affect its space requirements.
Hash Tables also support efficient insertion of new records.
While **deletions **can also be supported efficiently, too many deletions lead to some degradation in performance for the remaining operations.
However, the hash table can be reorganized periodically to restore the system to peak efficiency (search for load factor. Such reorganization can occur offline so as not to affect ATM transactions.

Overloading Functions

Igor — Fri, 01 Dec 2023 16:28:45 +0000

We can have functions that have different parameter lists that have the same name
This is a great use of abstraction since as a developer all i need to think is display and pass in whatever information i need. I don’t have to keep track of dozens of different function names.
In SWE, we have a principal called polymorphism, which means many forms for the same concept. This is an example of polymorphism.

int add_numbers(int, int);           // add ints
double add_numbers(double, double);  // add doubles

int main()
{
    cout << add_numbers(10,20) << '\n';       // integer    
    cout << add_numbers(10.0,20.0) << '\n';   // double
    return 0;
}

The parameter list for these functions must be different so the compiler can tell them apart. Once these functions are implemented, I can call display and pass in my data. The compiler will check the type of the argument in the function and match it to one of the available overloaded display functions.

void display(int n);
void display(double d);
void display(std::string s);
void display(std::string s, std::string t);
void display(std::vector<int> v);
void display(std::vector<std::string> v);

If it can’t match it or if it can’t convert the argument to one that matches, then we get a compiler error.
Important - There is one restriction to function overloading. The return type is not considered when the compiler is trying to determine which function to call.

int get_value();
double get_value();

// Error
cout << get_value() << '\n';  // which one?

Here we have two overloaded functions, both called get_value and both expect no parameters. The only difference is that one returns an integer and the other a double. This will produce a compiler error since the only difference is the return type.
Overloading function is used extensively in object-oriented design.

Vectors in C++

Igor — Thu, 23 Nov 2023 18:37:06 +0000

Vectors
- What they are
- Advantages vs arrays
- Declaration and initialization
Suppose we want to store test scores for my school
I have no way of knowing how many students will register next year
Options:
- Pick a size that you are not likely to exceed and use static arrays
- Use a dynamic array such as vector

What is a vector?

A vector is a sequence of elements that you can access by an index. It is a container in the C++ Standard Template Library (STL)
An array that can grow and shrink in size at execution time
Provides similar semantics and syntax as arrays
Very efficient
Can provide bounds checking
Can use lots of functions like sort, reverse, find, and more.

Declaring

#include <vector>
using namespace std;

vector <char> vowels;
vector <int> test_scores;

// Using a constructor initialization syntax
vector <char> vowels(5);
vector <int> test_scores(10);

Unlike arrays, the 10 integers will automatically be set to 0.

Initializing

vector <char> vowels {'a', 'e', 'i', 'o', 'u' };
vector <int> test_scores {100, 90, 88, 79, 93};
vector <double> hi_temperatures (365, 85.0); // (initial_size, initial_value)

Characteristics

Dynamic size
Elements are all the same type
Stored contiguously in memory
Individual elements can be accessed by their position or index
First element is at index 0
Last element is at index size-1
[ ] - no checking to see if you are out of bounds
Provides many useful function that do bounds check
Elements initialized to zero
Very efficient
Iteration (looping) is often used to process

C++ Primitive Data Types

Igor — Tue, 21 Nov 2023 18:56:31 +0000

Fundamental data types implemented directly by the C++ language
Character types
Integer types
- signed and unsigned
Floating-point types
Boolean type
Size and precision is often compiler-dependent
- #include <climits>

Type Sizes

Expressed in bits
The more bits the more values that can be represented
The more bits the more storage required

Size (in bits)	Representable Values
8	256	2^8
16	65,536	2^16
32	4,294,967,296	2^32
64	18,446,744,073,709,551,615	2^64

Character Types

Used to represent single characters, ‘A’, ‘X’, ‘@’
Wider types are used to represent wide character sets

Type Name	Size / Precision
char	Exactly one byte. At least 8 bits.
char16_t	At least 16 bits.
char32_t	At least 32 bits.
wchar_t	Can represent the largest available character set

Integer Types

Type Name	Size / Precision
signed short int	At least 16 bits.
signed int	At least 16 bits.
signed long int	At least 32 bits.
signed long long int	At least 64 bits.

Type Name	Size / Precision
unsigned short int	At least 16 bits.
unsigned int	At least 16 bits.
unsigned long int	At least 32 bits.
unsigned long long int	At least 64 bits.

In addition to those shown in the table, it’s possible to store both signed and unsigned integers in the character data type
If you want to declare a signed integer you don’t need to use the signed keyword, since by default integers are signed.
Similarly, if you want an integer type that stores very large numbers, you can simply declare the type as long long. And you’ll get a signed long long integer.
If you want unsigned integers, that is integers that are 0 or positive values only, then you’re required to use the unsigned keyword.
By default, all integers are signed.

Floating-point Type

Used to represent non-integer numbers
Represented by mantissa and exponent (scientific notation)
Precision is the number of digits in the mantissa
Precision and size are compiler dependent

Type Name	Size / Typical Precision	Typical Range
float	/ 7 decimal digits	1.2 x 10^-38 to 3.4 x 10^38
double	No less than float / 15 decimal digits	2.2 x 10^-308 to 1.8 x 10^308
long double	No less than double/ 19 decimal digits	3.3 x 10^-4932 to 1.2 x 10^4932

Boolean Type

Used to represent true and false
Zero is false
Non-zero is true

Type Name	Size / Precision
bool	Usually 8 bits true or false

Variables in C++

Igor — Tue, 21 Nov 2023 16:56:02 +0000

If we had to program using the specific memory locations of a Random Memory Access (RAM), it wouldn’t be a lot of fun, and we’d likely have a lot of programmer errors.
A variable is an abstraction for a memory location
Allow programmers to use meaningful names and not memory addresses
Variables have
- Type - their category (integer, real number, string, Person, Account…)
- Value - the contents (10, 3.14, “Tim”…)
Variables must be declared before they are used
A variables value may change

age = 22;        // Compiler error

int age;

age = 22;

Declaring Variables

💡 VariableType VariableName

int age;
double rate;
string name;

Account franks_account;
Person james;

Naming Variables

Can contain letters, numbers, and underscores
Must begin with a letter or underscore (_)
- cannot begin with a number
Cannot use C++ reserved keywords
Cannot redeclare a name in the same scope
- C++ is case sensitive

Legal	Illegal
Age	int
age	$age
_age	2022_age
My_age	My age
your_age_in_2000	Age+1

Style and Best Practices

Be consistent with your naming conventions
- myVariableName vs my_variable_name
- avoid beginning names with underscores
Use meaningful names
- not too long and not too short
Never use variables before initializing them
Declare variables close to when you need them in your code

Initializing Variables

int age;      // uninitialized

int age = 22; // C-like initialization

int age (22); // Constructor initialization

int age {22}; // C++11 list initialization syntax

Global Variables

Variables declared within the curly braces of the main function are called Local Variables because their scope or visibility is limited to the statements in the main function that follow the declaration of the variable. This is generally what you want to do.
However, sometimes you see variables declared outside of a function, these variables are called Global Variables and they can be accessed from any part of your program.
Unlike local variables, global variables are automatically initialized to zero.
Since global variables can be accessed by any part of the program, this means they can potentially be changed from any part of the program. This can make finding errors and debugging more difficult.

Programming Paradigms

Igor — Mon, 20 Nov 2023 19:12:08 +0000

A programming paradigm is a fundamental style or approach to solving problems.

Different programming paradigms provide different ways of organizing and structuring code, and have different strengths and weaknesses. Some of the most common programming paradigms include:

Imperative

Is one of the oldest programming paradigm. It is based on Von Neumann architecture. The programmer instructs the machine how to change its state. They state the order in which operations occur, with constructs that explicitly control that order, and they allow side effects, in which state can be modified at one point in time, within one unit of code, and then later read at a different point in time, inside a different unit of code. The communication between the units of code is not explicit.

    Examples of Imperative programming paradigm:

    C : developed by Dennis Ritchie and Ken Thompson
    Fortran : developed by John Backus for IBM
    Basic : developed by John G Kemeny and Thomas E Kurtz

Procedural [Imperative]

Focus in dividing a problem in a sequence of steps or procedures well defined. It emphasizes the reutilization through functions or sub routines and is characterized by it’s linear flux of execution.

Examples of Procedural paradigms:

C
C++
Java
ColdFusion
Pascal

Object-Oriented Programming [Imperative]

OOP organizes the code in classes and objects, allowing encapsulation, inheritance and polymorphism. It promotes the modeling of real-world objects and their interactions, improving code modularity and maintainability.

Examples of Object Oriented paradigm:

Simula
Java
C++
Objective C
VB .NET
Python
Ruby
Smalltalk

Concurrent / Parallel

Involves dealing with multiple tasks or processes that can be executed simultaneously. Parallel programming goes further, taking advantage of multiple processors or cores to execute tasks concurrently, thus improving performance.

Declarative

It focuses on describing what needs to be done rather than how to do it. It abstracts low-level implementation details, resulting in more readable and expressive code. SQL is a typical example.

Functional [Declarative]

Functional programming treats computation as the evaluation of mathematical functions. It emphasizes immutability, first-class functions, and higher-order functions, resulting in more concise, predictable, and parallelizable code.

Logic [Declarative]

It involves specifying a set of logical rules and facts to derive conclusions or solve problems. It is especially suitable for tasks such as knowledge representation, artificial intelligence, and theorem proving.

Sub Routine = Block of code that runs a specific task and can be called from different parts of the program. It’s a form of structuring and organizing the code, making it modular and reusable.