No mês passado, criei um projeto simples que se espalhou por várias comunidades de tecnologia e mídias sociais. No Github, ele recebeu de 0 a 4 mil estrelas e mais de 200 garfos em 7 dias. O Github o promove na seção Repositórios de tendências do dia há cerca de cinco dias .
Clone Wars
70+ clones de código aberto ou alternativas para sites populares como Airbnb, Amazon, Instagram, Netflix, Tiktok, etc. A lista contém código-fonte, links de demonstração, pilha de tecnologia e estrelas do GitHub.
Link para o projeto
Link para o Github
Tendências no Github - 13 de março de 2021
O que me motivou a criar este projeto
Sou um técnico e frequentemente participo de comunidades populares do Reddit como r / webdev, r / reactjs e similares, acompanhando o que outros desenvolvedores estão criando e aprendendo sobre novos frameworks JS. Percebi que muitos desenvolvedores criam clones de sites populares como Instagram, Trello, Spotify, etc. para aprender a programar e, em seguida, compartilham com outros para obter feedback sobre a qualidade do código e recomendações.
Os desenvolvedores compartilham seus projetos em r / reactjs.
Esses clones estão espalhados por muitas comunidades. Então pensei, por que não criar uma lista geral de todos esses clones que as pessoas pudessem marcar e consultar no futuro. Para ser honesto, eu não tinha certeza na época se essa lista seria útil para outras pessoas. Tive a oportunidade de descobrir criando sozinho!
Como fiz a lista
1. Raspando o Reddit
Eu queria encontrar todos os posts contendo a palavra-chave "clone". No início, usei a pesquisa padrão do Reddit:
reddit.com/r/reactjs/search/?q=clone&source=recent&restrict_sr=1&sort=new
(isso significa pesquisar todos os posts no subreddit
reactjs
com a palavra-chave "clone" e classificar pelo mais recente ). Essa solicitação retornou todas as postagens, incluindo postagens de baixa qualidade com uma avaliação de 0, perguntas sobre como criar um clone de um serviço, etc. Seria difícil encontrar bons projetos de clones neste depósito. Então fui para redditsearch.io , que fornece recursos avançados de filtragem para o Reddit, como retornar postagens com pelo menos 10 "curtidas" publicadas em um período de tempo específico etc.
Em seguida, criei uma lista de todos esses clones, seus repositórios Github, links de demonstração e pilha de tecnologia. Tudo foi feito manualmente.
Eu também pesquisei "alternativas de código aberto" e encontrei alguns clones totalmente funcionais do Slack, Airtable, Bit.ly, Evernote, Google Analytics, etc. Eu também os adicionei à lista.
Portanto, existem dois tipos de projetos na lista. Os primeiros são muito semelhantes (do ponto de vista da IU), mas não totalmente funcionais, os últimos são totalmente funcionais, mas com uma IU diferente (para evitar problemas de direitos autorais, etc.).
Encontre um nome para o projeto
Eu batizei meu projeto com base na série de animação Star Wars: The Clone Wars de 2008 e mantive um esquema de cores semelhante.
A série de animação Star Wars: The Clone Wars
Projeto Github do Clone Wars
2. Bela exibição da mesa
Já trabalhei com markdown antes, mas esta é minha primeira vez criando tabelas de markdown e descobri que a tabela na página do projeto no Github parece terrível. Especialmente se for uma mesa longa com muitas colunas. Queria torná-lo mais bonito (com o título constantemente pendurado no topo), ou seja, o projeto tinha que ser implantado em outro lugar. Mas ainda tinha que estar no Github para que outras pessoas pudessem convenientemente trabalhar com ele. Decidi hospedá-lo em meu site pessoal https://gourav.io .
Meu site foi construído com NextJS, e eu já usei markdown (mdx) para escrever posts, então bastou apenas copiar e colar o arquivo markdown do meu projeto Github em uma nova página https://gourav.io/clone-wars... Além disso, usei Tailwind CSS com o plugin "typography" para melhorar a legibilidade de tabelas e outros textos.
Eu estava pensando em levar a automação para o próximo nível, por exemplo, ao fazer uma alteração em um projeto do Github ou mesclar solicitações de pull (PR), seria possível atualizar a tabela em meu site https://gourav.io/clone -guerras . Mas decidi não complicar o sistema porque as mudanças não eram tão frequentes.
Tornando o projeto viral
Eu postei uma postagem em 2-3 subreddits e ela decolou.
reddit.com/r/reactjs
reddit.com/r/webdev
Efeitos
Depois que o projeto ganhou alguma popularidade, muitos desenvolvedores começaram a usar PR para adicionar clones à lista de seus projetos. Quando comecei o projeto, havia cerca de 75 clones, mas agora existem mais de 120, e frequentemente recebo novos PRs.
Soube por um amigo que o projeto foi parar no boletim informativo React . Um momento muito inesperado e agradável.
As pessoas começaram a tweetar sobre as Guerras Clônicas . @nickbulljs deu uma ideia para desenvolvedores em busca de trabalho.
Os recrutadores estão cansados de aplicativos de clima e calculadoras de despesas.
Aqui está uma ideia de desenvolvimento mais inteligente:
- Escolha um site entre mais de 70 clones de código aberto de sites populares como Netflix, Instagram e outros no link abaixo.
- Explore a base de código.
- Crie seu próprio clone.
gourav.io/clone-wars
Após este tweet, consegui mais de 150 novos seguidores.
E outra pessoa doou $ 5 para mim usando o link BuyMeACoffee , que adicionei ao meu projeto. Obrigado estranho.
Em 30 dias após o lançamento do projeto, meu site pessoal foi visitado por mais de 40 mil pessoas, e o projeto recebeu mais de 80 mil visualizações.
Aqui estão algumas das estatísticas sobre os usuários (os primeiros 30 dias após o lançamento, ou seja, após a postagem no Reddit):
Sites de referência
Usuários por país
Usuários por sistema operacional
Usuários por navegador
No momento, o projeto possui
e
.
Propaganda
VDS para projetos e tarefas de qualquer escala - trata-se de nossos servidores épicos ! Tecnologia e equipamentos de última geração, serviço de qualidade. Apresse-se para fazer o pedido!
