Forem: Michael Moranis

🚀 Vue.js in Practice – First Steps!

Michael Moranis — Tue, 06 May 2025 13:02:58 +0000

Hey guys, Michael here!

Today I decided to learn more about Vue.js and, after a few hours of coding, I built a task manager with everything very basic (and a little more):

Complete CRUD, dynamic filters and native Vue animations!

It was interesting to discover how the Vue structure makes everything more organized – and the transitions are very simple to implement.

Has anyone else done anything like this? What tips, books or best practices do you recommend for those who are starting out?

Project link https://app-vue-todo.vercel.app/

obs: the project is in portuguese.

🚀 Vue.js in Practice – First Steps!

Michael Moranis — Mon, 21 Apr 2025 11:20:35 +0000

🚀 Vue.js in Practice – First Steps!
**
Hey guys, Michael here!**

Today I decided to learn more about Vue JS and, after a few hours of coding, I built a task manager with everything very basic (and a little more):
Complete CRUD, dynamic filters and native Vue animations!

It was interesting to discover how Vue's structure makes everything more organized – and transitions are very simple to implement.

Has anyone else done something similar? What tips, libs or best practices do you recommend for those who are starting out?

Project link https://app-vue-todo.vercel.app/

How I Managed a Delay in a Freelance Project and Kept My Client Happy

Michael Moranis — Fri, 28 Mar 2025 16:25:55 +0000

Every freelancer has faced unexpected challenges during a project. In my case, a landing page project with a two-week deadline ended up extending due to some personal and family issues. How do you handle this without compromising work quality and, more importantly, without leaving my client dissatisfied? Here’s what I learned and how I navigated this situation in the best way possible.

1. Communication is Everything

From the start of the project, I maintained frequent contact with my client, providing updates on progress and receiving feedback along the way. When I realized there would be a delay, I was upfront and explained the situation. This transparency was essential to avoid misunderstandings and to ensure my client knew I was still fully committed to the project.

2. Transparency and Professionalism

Admitting a delay is never easy, but being honest makes all the difference. I clearly and objectively explained the reasons behind it while assuring my client that my commitment to delivering a high-quality project remained unchanged. To my relief, my client was understanding and empathetic, which strengthened our professional relationship even more.

3. Maintaining Quality Standards

Even with reduced time, I focused on delivering a well-executed landing page. I reorganized my priorities, optimized my workflow, and paid attention to details to ensure that, despite the delay, the final result would be top-notch. After all, what truly matters is delivering quality work, and I wanted my client to be satisfied with the outcome.

4. The Impact of Positive Feedback

Throughout the development process, receiving positive feedback from my client was a great motivator. Knowing that they appreciated my work and recognized my effort gave me even more motivation to push through and complete the project successfully. It reinforced the importance of building a strong relationship with those who trust in my work.

Conclusion

This experience taught me a lot about time management, communication, and resilience in freelancing. In the end, keeping an open dialogue and staying committed to quality made all the difference. And the best part? My client was happy with the final result, which, to me, is what truly matters.

Have you ever faced a similar situation or have tips on handling project delays? Share your experiences in the comments! Let’s exchange insights and grow together on this freelancing journey.

Fatigue and Focus as a Freelance Dev

Michael Moranis — Thu, 20 Mar 2025 12:54:23 +0000

Working as a surveyor during the day and as a beginner web developer at night!!

Hey everyone, Michael here. Over the past two weeks, I've been working on my first freelance project. I work full-time as a property inspector at a real estate agency during the day, and at night, I've been working on this small project, which is a landing page for a high-risk inspection company.

During this time, I got really tired from the routine and took a 2-day break. Yesterday, I got back to the project and managed to refactor some components (I'm using Next.js for the project). I realized that every day I'm learning more, even though what keeps me focused is discipline.

I hope to deliver the project on time and successfully complete my first freelance gig. Thanks for reading this far, and I appreciate any feedback, tips, or valuable critiques. Cheers!!!

Beginning of my career as a freelancer

Michael Moranis — Wed, 12 Mar 2025 14:46:06 +0000

Hey guys, I’m Michael, a web developer, and I’m taking an important step in my career: I’m starting my first project as a freelancer!

I’m working on developing an institutional website for an amazing client (a long-time friend, by the way), with a focus on increasing customer conversions.

I’m taking this opportunity to learn how to use Next.js, which will be super useful for the project, as it eliminates the need for external libraries like React Router Dom for routing.

I’m learning a lot in the process, working in my free time, and it’s clear to see how different it is when you’re studying compared to when you actually start working.

If you’re also starting out as a freelancer or have tips to share, I’d love to chat in the comments! And if you need a web developer for your project, just call me 😊!

Apredendo construção de apis com node e TypeScript

Michael Moranis — Sat, 02 Nov 2024 14:52:09 +0000

Configuração de typescript com node js para rodar o servidor ou mostrar algo na tela.

Passo 1. Para inicializar o projeto e instalar dependencias.

npm init -y

para criar um arquivo package.json.

instalação do typescript e os tipos para node js.

npm install typescript @types/node --save-dev

Passo 2. Criar arquivo de configuração tsconfig.json

1. Esse arquivo vai servir para configurações principais do do node js.

rode o comando:

npx tsc --init

3. configurações principais do node js com ts no arquivo tsconfig.json .

{
  "compilerOptions": {

    "target": "es2016",                                  
    "skipLibCheck": true,
    "module": "CommonJS",
    "outDir": "./dist",
    "strict": false,
    "esModuleInterop": false,
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

4. configuração de scripts para compilação e execução no package.json.

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js",
  "dev": "ts-node-dev --respawn --transpile-only src/index.ts"
}

Usar ts-node-dev para rodar codigo em desenvolvimento recompilando automaticamente ao detectar alterações.

Instalação do ts-node-dev.

npm install ts-node-dev --save-dev

Pequeno exemplo de um servidor apenas usando node js sem libs externas.


import { createServer } from 'node:http'

const server = createServer((request, response) => {
    console.log("hello")

    response.write('michael esta no servidor')
   return  response.end()
})


server.listen(3333)

Utilização de frameworks para desenvolvimento de Apis em especial o uso do Fastify

Instalação do Fastify no projeto.

Rode o comando:

npm install fastify

O uso do Fastify vai facilitar o desenvolvimento da api porque simplifica a escrita do codigo e facilita o redirecionamento das rotas no projeto.

Exemplo em urls

Urls com metodo post, delete, get e put as mais usadas.

// POST localhost:3333/videos
// DELETE localhost:3333/videos/1 no caso de ter um id especifico para itens usa-se o especificador dele

Exemplo de uso do fastify para criação de rotas ou endpoints

import { fastify } from 'fastify'

const server = fastify()

server.get('/', () => {
    return "hello"
})

server.listen({
    port: 3333
})

Principais operações feitas usando apis é o famoso CRUD (create, read, update, delete)

No crud refletido no codigo será o uso dos metodos http POST PUT DELETE GET

Para fins de estudos vou utilizar primeiramente um banco de dados em memória, usando uma estrutura de dados.

Crio um novo arquivo chamado database-memory.ts e crio minha classe que será meu banco de dados em memória.

import { randomUUID } from "node:crypto"

export class DataBaseMemory {
    #videos = new Map()

    list() {
        return this.#videos.values()
    }

    create(video) {
        const videoId = randomUUID()

        this.#videos.set(videoId, video)
    }

    update(id, video) {        
        this.#videos.set(id, video)
    }

    delete(id) {
        this.#videos.delete(id)
    }
}

Na utilização do metodo post para enviar dados para ser armazenado ou modificado com metodos do tipo PUT deve enviar dados no corpo da requisição por meio do uso de request.body veja exemplo:

import { fastify } from 'fastify'
import { DataBaseMemory } from '../database/databaseMemory'

const server = fastify()

const database = new DataBaseMemory()

server.post('/persona', (request, reply) => {
    const {title, description, age } = request.body

    database.create({
        title,
        description,
        age
    })

    console.log(database.list())

    return reply.status(201).send()
})

API completa com todas as rotas configuradas e funcionando no banco de dados em memória.

import { fastify } from 'fastify'
import { DataBaseMemory } from '../database/databaseMemory'

const server = fastify()

const database = new DataBaseMemory()

server.post('/persona', (request, reply) => {
    const {title, description, age } = request.body

    database.create({
        title,
        description,
        age
    })

    console.log(database.list())

    return reply.status(201).send()
})

server.get('/persona', () => {
    const persona = database.list()

    console.log(persona)
    return persona
})

server.put('/persona/:id', (request, reply) => {
    const {title, description, age } = request.body
    const personaId = request.params.id

   database.update(personaId, {
        title,
        description,
        age
    })

    return reply.status(204).send()
})

server.delete('/persona/:id', (request, reply) => {
    const personaId = request.params.id
    database.delete(personaId)
    return reply.status(200).send()
})


server.listen({
    port: 3333
})

Como usar o React Router Dom versão 6.26.0 em seu projeto com React js.

Michael Moranis — Tue, 20 Aug 2024 01:22:24 +0000

No nosso projeto estaremos utilizando essas ferramentas: vite react e typescript - então no seu terminal rode esse comando:

npm create vite@latest name-of-your-project -- --template react-ts

Em seguida vamos importar os componentes que usaremos para configurar e fornecer a navegação na nossa aplicação React.

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

O createBrowserRouter é usado para criar um roteador que utiliza o historico de navegação do navegador, ele cria as rotas e as associa com os componentes correspondentes.

O RouterProvider é usado para fornecer o roteador criado para a aplicação, ele encapsula toda a aplicação, permitindo que os componentes internos utilizem as funcionalidades de roteamento.

Para criar e usar as rotas de fato, precisaremos declarar uma variavel e por convenção essa variável vai ser chamada de router, lembrando que ela deve ser criada no arquivo raiz da sua aplicação, no caso no arquivo main.tsx. Dentro dela vamos usar o createBrowserRouter para definir as rotas para o componente principal representado por "/" e a rota para "about" dessa forma:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

e no seu componente raiz vamos fornecer essas rotas para a aplicação:

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Assim você conseguirá usar essas rotas no seu projeto !, se você leu até aqui, deixe seu comentário ! valeu !!

# Storing Data in the Database with JavaScript

Michael Moranis — Sat, 10 Aug 2024 18:11:07 +0000

During the development of my task list application, one of the coolest features I managed to implement was the ability to store data in the database. Using JavaScript, I created a function that sends user data to a server. This not only ensures that the data is securely saved but also provides a smooth and pleasant user experience.

The `addInput` Function

The addInput function is one of the main components of this feature. It is an asynchronous function that takes a string parameter called newText. This text represents the new task that the user wants to add to the list. Before sending the information to the server, I check if the text is not empty. This is crucial to avoid storing invalid entries in the database.

async function addInput(newText: string) {
  // Checks if the text is not empty
  if (newText.trim() === "") {
    return;
  }
  const newInput = {
    newtext: newText,
    isChecked: false
  };

  try {
    const response = await fetch("https://yoururl.com/tasks", {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newInput)
    });

    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }

    SetInput(""); // Clears the input field after successful submission

  } catch (error) {
    console.error("Error adding tasks:", error);
  }
  listInput(); // Updates the displayed task list
}

Code Explanation

Text Verification: I start by checking if the newText string is empty or contains only whitespace. If so, the function returns immediately, saving unnecessary operations.
Creating the newInput Object: Next, I create a newInput object with the task and a boolean indicator isChecked, initially set to false.
Sending the Request: I use the fetch function to send an HTTP POST request to the server. The header settings indicate that I’m sending JSON data.
Handling the Response: After sending the request, I check if the server’s response is successful. If not, I throw an error to handle the failure appropriately.
Clearing and Updating: After a successful submission, I call SetInput("") to clear the input field and listInput() to update the task list on the interface.

Auxiliary Functions

In addition to addInput, two auxiliary functions play crucial roles in the interface:

`SetInput`

The SetInput function clears the text input field after adding a new task. This ensures that the field is empty and ready for new entries. It is usually used in conjunction with React state to control the value of the input field.

function SetInput(value: string) {
  setInputValue(value); // Updates the input value state
}

`listInput`

The listInput function is responsible for updating and rendering the task list in the user interface. By fetching tasks from the server, I ensure that any changes are immediately reflected in the interface.

async function listInput() {
  try {
    const response = await fetch("https://yoururl.com/tasks");
    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }
    const tasks = await response.json();
    setTasks(tasks); // Updates the task list state
  } catch (error) {
    console.error("Error listing tasks:", error);
  }
}

Conclusion

These functions work in harmony to provide a smooth and efficient user experience in my task list application. Implementing this logic taught me a lot about managing state and asynchronous interactions.

I hope this example can serve as inspiration or a starting point!!

Forem: Michael Moranis

🚀 Vue.js in Practice – First Steps!

🚀 Vue.js in Practice – First Steps!

How I Managed a Delay in a Freelance Project and Kept My Client Happy

1. Communication is Everything

2. Transparency and Professionalism

3. Maintaining Quality Standards

4. The Impact of Positive Feedback

Conclusion

Fatigue and Focus as a Freelance Dev

Beginning of my career as a freelancer

Apredendo construção de apis com node e TypeScript

Configuração de typescript com node js para rodar o servidor ou mostrar algo na tela.

Passo 1. Para inicializar o projeto e instalar dependencias.

Passo 2. Criar arquivo de configuração tsconfig.json

1. Esse arquivo vai servir para configurações principais do do node js.

3. configurações principais do node js com ts no arquivo tsconfig.json .

4. configuração de scripts para compilação e execução no package.json.

Usar ts-node-dev para rodar codigo em desenvolvimento recompilando automaticamente ao detectar alterações.

Instalação do ts-node-dev.

Pequeno exemplo de um servidor apenas usando node js sem libs externas.

Utilização de frameworks para desenvolvimento de Apis em especial o uso do Fastify

Instalação do Fastify no projeto.

Exemplo em urls

Exemplo de uso do fastify para criação de rotas ou endpoints

Principais operações feitas usando apis é o famoso CRUD (create, read, update, delete)

No crud refletido no codigo será o uso dos metodos http POST PUT DELETE GET

Para fins de estudos vou utilizar primeiramente um banco de dados em memória, usando uma estrutura de dados.

API completa com todas as rotas configuradas e funcionando no banco de dados em memória.

Como usar o React Router Dom versão 6.26.0 em seu projeto com React js.

# Storing Data in the Database with JavaScript

The addInput Function

Code Explanation

Auxiliary Functions

SetInput

listInput

Conclusion

The `addInput` Function

`SetInput`

`listInput`