🤯 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