Como eu criei em algumas horas um site que busca propostas de freelas

Contedo originalmente publicado em: https://jnaraujo.com/blog/como-eu-criei-em-algumas-horas-um-site-que-busca-propostas-de-freelas

H um tempo atrs, eu estava conversando com um amigo sobre como pegar trabalhos na internet. Ele me contou que usava o Reddit para isso - basicamente, existem comunidades em que pessoas que precisam de algum pra fazer um trabalho postam sua proposta, falando o que querem, pra quando querem e (o mais importante) quanto querem pagar.

Eu achei isso incrvel - um lugar onde as pessoas anunciavam o que queriam e ainda pagavam em dlar.

Claro que existem plataformas parecidas - como o 99freelas ou o Workana. Mas esses sites normalmente ficam com uma parte do dinheiro e a concorrncia muito - mas muito - grande. Alm disso, nem todos pagam em dlar.

S que nem tudo so flores

Dando uma olhada nessas comunidades, eu achei alguns "problemas".

Primeiro que nem todos os posts ali eram de gente querendo contratar - boa parte era de gente mostrando seus prprios servios.

Alm disso, tinha muito trabalho que no me interessava - tinha gente postando todo tipo de coisa, desde trabalho full-time de marketing at gente que queria fazer uma planilha no Excel.

Agora, junte tudo isso e multiplique por 5.

Eu, como todo programador que se preze, achei que ficar entrando nesses subreddits e analisando os freelas era trabalho demais. Ento resolvi criar um script para fazer o trabalho que eu, definitivamente, no queria fazer.

Deixando o trabalho repetitivo pra outro trouxa
Minha primeira ideia foi checar como funcionava a API do Reddit - se precisava de autenticao, criar um token, fazer um pacto ou alguma coisa parecida.

Pra ser sincero, eu achei o site deles muito feio e bagunado. Alm disso, no estava com muita vontade de ficar vasculhando para ver se achava o que eu queria. Por isso, resolvi procurar um outro jeito.

Dando uma olhadinha nas profundezas da internet eu descobri que colocando .json no final do link do subReddit ele retorna o site em json.

Por exemplo a URL https://www.reddit.com/r/memes/new que vira https://www.reddit.com/r/memes/new.json

Simplesmente incrvel.

Ento criei um cdigo simples e cheio de gambiarras em Javascript com Node que entrava no site e retornava os ltimos freelas pra mim.

Bem... a ideia tava certa. S que nada to simples assim.

Dando uma limpadinha nos dados

Pois , quem diria que os dados estariam sujos, no mesmo?

Na verdade, eu j esperava isso. Foi um dos motivos de eu querer fazer esse script - limpar as postagens de gente procurando trabalho e tentar filtrar os freelas.

Alm disso, eu queria remover aquelas propostas que j tinham sido atendidas por outras pessoas.

Resolver a primeira parte foi simples: quando os dados eram retornados em uma lista, eu adicionei um filtro que tirava posts com tags que eu no queria (como a tag For Hire). Alm disso, adicionei alguns filtros de segurana, como remover posts de usurios banidos etc.

async function mountPosts(limitPerPost=20){  let finalPosts = [];  for (let index = 0; index < subReddits.length; index++) {    const subReddit = subReddits[index];    let res = await getReddit.getLastPostsFromSubreddit(subReddit, 30);    let posts = res.filter(getReddit.isPostValid);    finalPosts.push(...posts.slice(0,limitPerPost));  }  return finalPosts.sort(sortFunction).reverse();;}async function mountPosts(limitPerPost=20){  let finalPosts = [];  for (let index = 0; index < subReddits.length; index++) {    const subReddit = subReddits[index];    let res = await getReddit.getLastPostsFromSubreddit(subReddit, 30);    let posts = res.filter(getReddit.isPostValid);    finalPosts.push(...posts.slice(0,limitPerPost));  }  return finalPosts.sort(sortFunction).reverse();;}

Feito isso, a coisa parecia estar indo bem.

Cria um site logo, amigo

Depois de ter feito a base, eu comentei com um amigo sobre o que eu tinha feito.

E se isso fosse um site? - ele perguntou.

A ideia parecia boa.

Eu tambm achei que seria muito melhor ver tudo isso de uma forma mais visualmente agradvel - como um site - que em um terminal de comandos.

Eu tambm queria treinar meu ReactJS com NextJS.

Ento eu juntei as coisas e foi isso - decidi criar o site.

Calma! J t criando.

No deve ser toooo difcil fazer esse site - pensei, antes de perceber que eu estava muito enganado.

Brincadeiras parte, a primeira coisa que eu fiz foi fazer o design do site no Figma.

No me considero um UI Designer, mas tento me virar.

Primeiro eu criei um esqueleto simples dos cards de trabalho, j pensando o que ia aparecer nele, onde iam ficar, etc.

Depois, fiz o design com mais detalhes, pensando nas cores e arrumando as posies do contedo com mais cuidado.

Alm disso, fui fazendo o esboo do site como um todo - os textos, cores etc.

O resultado ficou assim.

Ainda no estava como eu queria, mas j era um comeo.

Tudo isso durou menos de 2 horas.

Eu no estava afim de perder muito tempo com o design, ento fui logo para o cdigo.

Transformando palavras em bugs

Para comear, criei o componente que seria a proposta de freela.

Para essa parte, no tinha muito segredo - fui colocando as tags do ttulo da proposta, descrio, boto que leva para o post no Reddit, etc.

Depois de criar o cdigo do site, implementei meu cdigo de buscas por freelas.

At que funcionou bem.

Na verdade, a parte mais chata foi descobrir um jeito de carregar automaticamente mais freelas - o famoso infinite scroll.

Pra mim, essa foi a parte mais complicada, tanto por que eu nunca tinha feito algo assim em React com Next quanto porque meu cdigo inicial de buscas no foi feito pra isso.

E foi bug atrs de bug.

Tambm criei o esboo de um sistema de buscas por palavras chaves no posts para tentar filtrar trabalhos que me interessavam - outra coisa que no tinha no cdigo original.

E mais bugs apareciam.

Outro problema foi que muitas vezes eu pegava mais de 100 postagens do Reddit e s duas passavam pelo filtro. Isso quando alguma passava.

Nessa brincadeira, o usurio baixava quase 100kb de dados do Reddit para ver duas ou trs propostas. No estava legal.

Foi a que eu pensei em criar uma API.

AH, e rolou mais bugs

Tentando resolver meus problemas com uma API

Criar a API foi a parte mais legal de tudo isso. Achei que seria mais complicado, mas no foi.

O NextJS permite criar uma API no mesmo projeto, simplesmente criando uma pasta chamada api na pasta de pages.

Ento, criei o endereo /tag/ que retornava as postagens j filtradas e tratadas do site do Reddit. Alm disso, tambm cacheava para futuras requisies.

Com isso, o usurio deixava de baixar 100kb de dados para algo prximo de 5kb - que podia ser mais ou menos a depender de quantas postagens a API tinha encontrado.

Com essa API, ficou mais fcil e rpido juntar e mostrar as informaes pro usurio.

Ainda tentando melhorar tudo

Bom, essa foi a histria de como eu criei o bsico do projeto.

Se quiser dar uma olhada em como o site est, pode acessar clicando aqui.

Eu fiz tudo isso em mais ou menos 6 horas.

Na verdade, depois de terminar esse post eu ainda trabalhei mais nele - mas o bsico do site foi realmente feito nesse tempo.

Como dito, ele ainda no est 100% funcional, mas eu achei divertido de fazer.

No fim das contas deu pra aprender muita coisa sobre React, NextJS, APIs, Reddit e bugs.

Contedo originalmente publicado em: https://jnaraujo.com/blog/como-eu-criei-em-algumas-horas-um-site-que-busca-propostas-de-freelas