bernardodemarco/github-blog

A personal blog built with React.js + TypeScript + GitHub API.

GitHub Blog

A personal blog built with React.js + TypeScript + GitHub API. It is the third challenge of Rocketseat's React.js course. It is deployed here.

About the project

On the application's main page, there is a card with my GitHub profile data. It contains my photo, name, short description, GitHub username, organization, number of followers and a link to my profile. All of this data has been fetched using the GitHub Users API.

Below the profile card, there is a form in which the user can search for posts, followed by the posts grid. The filtering has been done using the GitHub Search API, as well as the fetching of post data.

Whenever the user clicks on a post card, they are redirected to the corresponding post page. There is all the information related to the post, like title, author, number of comments, and, most importantly, the content. The GitHub Issues API has been used to retrieve all of this data.

All of the posts are issues from this repository that have the label blog-post.

🛠️ Built With

• React.js
• TypeScript
• Styled Components
• Axios
• React Router
• React Markdown

🚀 Setup

Clone this repository:

  # clone this repository
  git clone https://github.com/bernardodemarco/github-blog.git

Go to the project's folder and run the following commands:

  # install dependencies
  npm i

  # runs web app on http://localhost:5173/
  npm run dev

Bernardo De Marco Gonçalves, June 2023.

github-blog's Issues

JavaScript data types and data structures

Programming languages all have built-in data structures, but these often differ from one language to another. This article attempts to list the built-in data structures available in JavaScript and what properties they have. These can be used to build other data structures. Wherever possible, comparisons with other languages are drawn.

Dynamic typing

JavaScript is a loosely typed and dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:

let foo = 42;    // foo is now a number
foo = 'bar';     // foo is now a string
foo = true;      // foo is now a boolean

Introdução à programação em Python

Python é uma linguagem de programação versátil e fácil de aprender. Neste post, vamos explorar os conceitos básicos da programação em Python. Vamos começar com um exemplo simples para imprimir "Olá, mundo!" no console:

print("Olá, mundo!")

Python tem uma sintaxe limpa e legível, tornando-o uma ótima escolha para iniciantes. Além disso, possui uma vasta biblioteca padrão e uma comunidade ativa, o que facilita o acesso a recursos e suporte.

Introdução a machine learning com Python

Machine learning é uma área empolgante da inteligência artificial que envolve treinar modelos para realizar tarefas específicas. Python é uma das linguagens mais populares para desenvolver soluções de machine learning. Veja um exemplo básico de como treinar um modelo de regressão linear em Python:

from sklearn.linear_model import LinearRegression

# Dados de treinamento
x_train = [[1], [2], [3], [4]]
y_train = [2, 4, 6, 8]

# Criação e treinamento do modelo
model = LinearRegression()
model.fit(x_train, y_train)

# Predição
x_test = [[5]]
y_pred = model.predict(x_test)
print(y_pred)  # Output: [10]

Python possui uma ampla variedade de bibliotecas, como scikit-learn e TensorFlow, que tornam o desenvolvimento de soluções de machine learning mais acessível.

Desenvolvimento mobile com React Native

React Native é um framework popular para o desenvolvimento de aplicativos móveis multiplataforma. Com ele, você pode escrever código JavaScript para criar aplicativos nativos para iOS e Android. Veja um exemplo de um componente simples em React Native:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View>
      <Text>Olá, mundo!</Text>
    </View>
  );
}

export default App;

Com o React Native, você pode compartilhar a maior parte do código entre as plataformas, economizando tempo e esforço.

API RESTful com Node.js e Express

Node.js e Express são ótimas opções para construir APIs RESTful eficientes e escaláveis. Veja um exemplo básico de como criar uma rota GET em uma API usando o Express:

const express = require('express');
const app = express();

app.get('/api/usuarios', (req, res) => {
  const usuarios = [
    { id: 1, nome: 'João' },
    { id: 2, nome: 'Maria' },
  ];
  
  res.json(usuarios);
});

app.listen(3000, () => {
  console.log('Servidor rodando na porta 3000');
});

Com o Node.js e o Express, você pode facilmente adicionar mais rotas, implementar autenticação, realizar operações de CRUD e muito mais. Continue acompanhando nosso blog para aprender mais sobre o desenvolvimento de APIs RESTful com Node.js e Express!

This is a draft

This is a draft issue used to test the app's integration with the GitHub API

Introdução ao banco de dados MySQL

MySQL é um sistema de gerenciamento de banco de dados relacional amplamente utilizado. Aqui estão alguns conceitos básicos para você começar:

1. Criação de uma tabela:

CREATE TABLE usuarios (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nome VARCHAR(50),
  idade INT
);

2. Inserção de dados na tabela:

INSERT INTO usuarios (nome, idade) VALUES ('João', 25);

3. Consulta de dados:

SELECT * FROM usuarios;

Esses são apenas exemplos básicos para você se familiarizar com o MySQL. Explore recursos como consultas avançadas, junções de tabelas e índices para aprimorar suas habilidades em bancos de dados.

Dicas para otimizar seu código em JavaScript

Escrever código JavaScript eficiente é essencial para melhorar o desempenho das suas aplicações web. Aqui estão algumas dicas para otimizar seu código:

1. Evite loops aninhados sempre que possível, pois eles podem causar uma diminuição significativa no desempenho. Procure por alternativas, como o uso de métodos de array, para evitar loops excessivos.

2. Minimize as operações DOM. A manipulação frequente do DOM pode ser custosa em termos de desempenho. Em vez disso, armazene referências aos elementos DOM em variáveis para reutilização.

3. Utilize ferramentas de análise de desempenho, como o Chrome DevTools, para identificar gargalos e áreas problemáticas no seu código.

Essas são apenas algumas dicas básicas para otimizar seu código em JavaScript. Experimente implementá-las e veja como seu código pode se tornar mais eficiente!