Executando verificação de segurança...
4

🤯 Criando sistema usando HTML, CSS e JS vanilla e hospedando gratuitamente com limite de 1 Milhão de requisições mensais

Essa semana embarque em uma jornada para criar uma plataforma legal, que não tenha anúncios e não seja pago. Nesse processo, descobri que o plano gratuito da netlify deixa você fazer uploads de páginas estáticas com um limite de 1 milhão de requisições mensais (Somando todos os projetos hospedados).

Perfeito, era o que eu precisava! Mas de cara já veio o primeiro desafio: Criar tudo usando HTML, CSS e Js Puro. Criar um sistema usando apenas HTML é um pouco desafiador, pois de forma muito fácil pode virar uma total bagunça, e sem falar que os recursos são mais limitados, diferente de usar um react.

Antes de começar usar o HTML, fiquei me perguntando, será que é possível subir apenas o build de um sistema react? Como eu não tinha certeza que poderia dar certo, optei por usar o HTML mesmo, pois eu tinha uma prazo de apenas 3 dias (Estava com tempo livre).

Já de cara no desenvolvimento, pensei: "Como vou armazenar os dados de forma gratuita e permanente?" Todos os bancos de dados em nuvem em algum momento vão começar a cobrar, e então, para armazenar os dados usei o indexDB do navegador, pois o localstorage não lida bem com grandes volumes de dados.

Caso o usuário queira usar os dados em outro dispositivo, coloque a opção de exportar e importar todos os dados. assim, pode usar onde quiser.

Para salvar os áudio, salvei dentro do indexDB usando o base64. Não sei se quando a quantidade de dados do cliente crescer isso será um problema, mas até que isso não aconteça, vamos continuar assim.

Outra coisa. Coloquei um botão de venda de curso, caso um dia fique inviável deixar no HTML puro e partir para uma versão que precise injetar capital (Mas as funcionalidades atuais sempre serão gratuitas) eu já ter os recursos para crescer o projeto.

Gostaria de saber de vocês, o que acharam do projeto? Como pode ficar melhor? Quais novas funcionalidades deveria ter?

Algumas funcionalidades que eu pensei:

  • Popup de vídeo, para pessoas que usam apenas uma tela não precisar ficar indo e voltando
  • Cortar os áudio gravados
  • Biblioteca de aulas/tarefas

Link: langboards

Carregando publicação patrocinada...
4
2

Pelas minhas pesquisas, o netlify é mais robusto em relação ao github pages, como um limite maior de requisições e mais recursos. E pelo o que eu li, o netlify suporta react kkkk (Rindo para não chorar kkk).

Resposta do google:
Ambos, GitHub Pages e Netlify, são excelentes opções para hospedar páginas estáticas gratuitamente, mas diferem no nível de automação, recursos adicionais e foco.
GitHub Pages é focado na simplicidade e integração direta com o repositório, ideal para portfólios simples e projetos de código aberto. O Netlify é uma plataforma moderna voltada para a JAMstack, oferecendo recursos avançados como formulários, funções serverless e builds automáticos mais robustos, ideal para projetos profissionais ou mais complexos.

...

4

sem falar que os recursos são mais limitados, diferente de usar um react

Na verdade tudo que é possível no React é possível com HTML e JavaScript. Se brincar até melhor e mais seguro. Porém requer mais esforço e tempo.


Não entendi muito bem qual é o teu sistema, a intenção dele, o publico alvo e coisas do tipo.

1

A ideia principal é poder montar frases e textos com possíbilidade de reproduzir os áudios. Está na primeira versão ainda, mas pretendo colocar ainda lições, palavras já com o áudios prontos e outras coisas mais, para ficar mais completo.

Atualmente, o usuário tem que adicionar suas palavras e seus próprios áudios na opção gravar ou fazer upload.

Basicamente, ao invés da pessoa montar a frase no papel, ela monta no board.

1