#01 Criando um SaaS do ZERO com Angular 19, NX e Supabase | Configurações Iniciais do Projeto 🚀

E aí, meus amigos, tudo bem com vocês? Eu sou Samuel Rizon e hoje a gente vai começar uma série de vídeos criando literalmente um SaaS do zero, desde a configuração inicial até o deploy em produção. E a gente vai fazer isso utilizando o Angular e Supabase. Então, minha ideia aqui vai ser criar literalmente um conteúdo de muita qualidade, um conteúdo de um projeto real. Eu vou mostrar para vocês qual que é a ideia, o que que a gente vai desenvolver aqui juntos, tá bom? E eu vou seguir a metodologia que eu utilizei na criação do meu SaaS. Então, a minha ideia é criar um projeto totalmente com Angular, 100% Angular. A gente não vai criar um backend, a gente vai utilizar o Supabase para literalmente tudo relacionado a banco de dados, autenticação. E eu vou mostrar para vocês como é que eu penso, como que eu crio, como que eu resolvo os problemas, como que eu desenho as interfaces, tudo de uma forma muito simples e muito prática, bem no dia a dia. Vou mostrar para vocês como estruturar um projeto em Angular E esse tipo de conteúdo a gente normalmente só vê em react. A gente não tem, eu particularmente nunca vi nada parecido em Angular. Então a minha ideia aqui é criar esse conteúdo de muita qualidade para vocês. Então, cara, para não perder nenhum vídeo dessa série, por favor se inscreve no canal, ativa o sininho, deixa o like para me ajudar a continuar produzindo esse tipo de conteúdo aqui para vocês. Fechou? Então vamos lá, deixa eu mostrar para vocês a minha ideia do projeto. A ideia é que A gente cria um aplicativo para barbearia. Por quê? Um barbeiro hoje que trabalha sozinho, ele não tem agendamento. Por exemplo, o meu barbeiro, ele não trabalha com agendamento. Eu tenho que chegar lá e ter a sorte, né, de que fila esteja pequena. Então o barbeiro, ele quer solucionar esse problema. Como que a gente pode fazer isso? O barbeiro vai ter um aplicativo, um painel admin, né, onde ele vai conseguir ajustar esse tempo de espera. E os clientes vão poder acessar essa página da barbearia e verificar se a barbearia está aberta e quanto que está o tempo de espera na barbearia. Então, desenhando para ficar fácil de entender, né, a gente vai ter um barbeiro onde ele tem um painel que ele coloca um tempo maior ou ele adiciona ou ele diminui o tempo. Por exemplo, chega uma pessoa que vai cortar o cabelo e a barba, ele já sabe que o cabelo e barba demora normalmente 40, 50 minutos. Então ele vai vir adicionar mais 40 minutos E automaticamente os usuários que estão acessando a página em tempo real vão conseguir ver esse tempo de espera. Então, se eu quero ir na barbearia, eu como cliente, né, eu abro o aplicativo da barbearia, o sistema, e eu verifico qual que é o tempo de espera. Se eu vejo que é 30 minutos, eu sei que eu posso ir no supermercado fazer alguma outra coisinha e depois eu posso ir lá na barbearia. Essa é a ideia do projeto, tá bom? Então a gente vai desenvolver isso aqui do zero utilizando o Angular, o Supabase, que eu vou mostrar para vocês. E a minha ideia é criar tudo isso aqui de conteúdo para vocês, tá bom? Todas essas etapas, desde a configuração inicial, a conta no Supabase, a tela de autenticação, painel de admin, a página da barbearia, e depois finalmente o deploy que a gente vai fazer, e ainda transformar esse site no PWA, onde os usuários vão conseguir instalar isso no aplicativo deles. Hoje a gente já vai começar isso hoje, a gente vai criar o repositório configurar o ESLint, o Prettier e o Husky e adicionar a biblioteca do NG-SOUL. Então falando um pouco do que a gente vai utilizar, a gente vai utilizar o Angular na versão mais recente que é a 19, a gente vai usar o Supabase, então o Supabase vai lidar com toda a parte do backend, a gente vai ter o banco de dados do Supabase, autenticação, a gente vai utilizar Edge Functions, storage, real-time, coisa em real-time a gente vai utilizar aqui também e as APIs que o Supabase dá pra gente toda vez que a gente cria uma tabela. E a gente vai usar o ng-zorro também. O ng-zorro é uma biblioteca de componentes para Angular que para mim, cara, é disparado, hoje é a melhor biblioteca de componentes para Angular. A gente tem muitos componentes legais, fáceis de utilizar e a experiência de desenvolvimento é muito, muito, muito boa. Eu vou mostrar para vocês isso ao decorrer do projeto, tá bom? Vamos lá criar o projeto então? Fechou! Deixa eu abrir o meu terminal aqui e a gente vai começar criando o projeto. A gente vai utilizar o Nx Workspace. Eu acho que é uma forma muito mais fácil da gente trabalhar com Angular, ele é bem tranquilo. De fazer. Então a gente começa utilizando npx, a gente vai dar um create nx workspace, a gente vai criar mybarbershop. Então o nome do projeto vai ser mybarbershop e a gente vai colocar aqui um prefixo MB para quando o Angular for criar os componentes ele criar com prefixo de MB, tá bom? Então a gente dá, roda esse comando, a gente vai selecionar o Angular tá bom? Depois a gente vai criar o integrated monorepo, porque se caso a gente precisa criar uma API ou alguma outra coisa, algum outro projeto dentro desse projeto, a gente já vai ter esse monorepo aqui, fechou? Então a gente continua, vai ser uma My Barber Shop, a gente vai usar o esbuild, usar o Sass com os arquivos.css. Por enquanto eu não quero o SSR do Angular. A gente pode utilizar sim o Playwright. E por enquanto eu não quero configurar nada relacionado a CI/CD, tá bom? Não quero também usar o cache do Nx. E pronto, aqui a gente vai rodar, ele vai começar a criar o projeto, ele vai começar a instalar todas as dependências do projeto. E aqui o Nx já vai criar um projeto em Angular com o ESLint configurado. Uma configuração inicial do ESLint, e ele já vai dar um projeto pronto para a gente começar a trabalhar nele. Show! Vamos esperar um pouquinho aqui. Bom, enquanto o projeto está sendo instalado, deixa eu falar um pouco mais das etapas, o que que a gente vai fazer aqui. Então hoje a gente vai criar esse repositório, a gente vai configurar o ESLint para ele, mas o meu próximo vídeo eu vou falar como que eu defino uma estrutura de pastas e arquivos do Angular, como que eu crio um projeto que é completamente escalável, eu consigo escalar ele, criar um super sistema dentro da mesma estrutura de pastas e arquivos, que é bem simples e bem fácil. Depois a gente também vai configurar um suporte a múltiplos idiomas. Então a ideia é a gente já criar esse sistema já suportando português, inglês e espanhol. Por enquanto a gente vai ser só no português, mas depois pra gente traduzir vai ser muito mais fácil, tá bom? Depois a gente vai entrar pro Supabase, então vou criar a conta, vou mostrar como é que é o dashboard, o que que o Supabase tem pra oferecer pra gente. Como que a gente mexe nas coisas do Supabase. Hoje o Supabase tem uma inteligência artificial muito legal para criar tabelas, como que a gente vai usar tudo isso, tá bom? A gente vai criar umas tabelas iniciais e depois já instalar o Supabase no nosso projeto. E aí depois a gente vem para parte de autenticação, a gente vai criar a tela de cadastro, a gente vai criar um formulário multi-step, que é um formulário onde você tem várias etapas no projeto, vários componentes diferentes. Vai ser algo bem legal para a gente criar. Depois a tela de login, o serviço de autenticação, e depois a gente entra realmente para dentro do sistema. Então essa parte aqui é uma parte que muitas vezes a gente não tem muito conteúdo sobre isso, um conteúdo de como que a gente cria um projeto, já deixa um projeto Angular bem estruturado, pronto para a gente desenvolver. Porque para desenvolver mesmo a gente vai chegar aqui, ó, no painel admin, na página. Então o trabalho mesmo braçal do desenvolvimento de sistema chega aqui. Mas eu quero mostrar para vocês todo esse passo a passo, como que a gente faz esse pré, essa preparação, né, para o projeto. Fechou? Eu acho que aqui já terminou. Beleza, já terminou de instalar. Então a gente vai dar aqui um cd mybarbershop, mybarbershop. Beleza. E eu vou dar um code. aqui para a gente abrir o VS Code. Já dentro do projeto. Fechou? Beleza. Então tá aqui o nosso projeto, já tá criado. Então o NX já criou aqui toda a nossa página inicial, os apps aqui a gente tem, né, o My Barber Shop, que é a parte do front-end, e o My Barber Shop End-to-End, que é a parte do Playwright. Show. Aqui a gente tem um projeto em Angular normal, o Angular mais atual, o Angular 19. A gente tem as páginas iniciais e tudo mais aqui. Então, primeira coisa que a gente vai fazer aqui vai ser configurar o Prettier e o ESLint. Aqui ele já vem configurado, mas eu gosto de fazer uma configuração adicional aqui. Então a gente vai copiar, vou copiar o comando aqui, eu vou deixar isso tudo para vocês depois do vídeo, tá? Mas aqui eu tô dando um npm install prettier, vou instalar o eslint-plugin-prettier e o eslint-config-prettier. Vou rodar esse comando. Assim que esse comando terminar, eu já vou vir aqui no meu eslint-config e vou adicionar aqui essa configuração do eslint recommended e vou colocar ele aqui, tá bom? Porque quando a gente faz isso e eu abro aqui, por exemplo, o meu app.component, aqui eu já tenho o Prettier rodando. Então se eu fizer qualquer coisa aqui tentar salvar que não esteja formatado, deixa eu dar um reload no VS Code para ele funcionar, né? Mas aqui quando eu não tiver formatado, o Prettier já vai vir aqui e formatar para mim, tá vendo? Então aqui ele já tá usando o eslint-prettier, quando eu salvo ele já salva automaticamente aqui para mim. Outra coisa que a gente vai configurar aqui no Prettier são algumas configurações que eu gosto, tá? Aqui a gente tem só o single quotes true, Mas eu gosto de deixar esse print width, o tamanho total de caracteres da linha de 180, e essas outras configurações aqui, tá? Salvei, fechou, tá configurado o meu pre-reaper com o slint. Bem simples, bem prático, bem rápido. Agora a gente vai instalar o husky e o lint-staged, tá bom? O husky a gente vai conseguir rodar alguns comandos, por exemplo, de um pre-commit, que é o que a gente vai configurar aqui. Então eu rodei esse comando do Husky. Foi esse comando aqui, npm install -d husky e o lint-stage. Então eu só tô instalando essas bibliotecas, tá? E a gente vai dar um npx. Então vamos aqui no terminal, npx husky init. Quando eu faço isso, ele criou uma pastinha do Husky aqui com um pré-commit já com comando de npm test. Que que o Husky vai fazer nesse pré-commit? Quando toda vez que eu fizer um commit, ele vai rodar esse comando aqui. Se esse comando falhar, ele não vai deixar eu rodar esse commit, tá bom? Depois a gente vai criar um arquivo do lint-stage. Então eu vou dar um new file aqui, criar esse arquivo lint-stage.drc, e dentro desse arquivo eu vou passar uma configuração para todos os arquivos TypeScript, ele dá um eslint-fix e prettify, e para HTML o prettify, tá bom? O que que o lint-stage ele vai fazer? Esse lint-stage ele vai rodar e a gente vai conseguir colocar ele para rodar. Quando a gente fizer um commit, ele vai verificar nos arquivos alterados, somente nos arquivos alterados, e ele vai rodar esses comandos de eslint e do Prettier. Então dessa forma a gente garante que toda vez que eu subir um commit, esse commit já tá padronizado, esse commit já tá formatado, todo o meu código que vai junto com esse commit já tá formatado com as configurações do nosso projeto, tá bom? E aí, por último, aqui no pré-commit, a gente vai, em vez de npm test, a gente vai dar um npx lint staged. Show! Salvei. Perfeito. Então aqui eu já vou criar um commit, tá? Só que antes de criar esse commit, o que que eu gosto de fazer? O commit inicial, ele vem como um commit padrão, tá? Então eu vou dar um undo last commit aqui, eu vou desfazer o último commit, tá? Então aqui, ó, eu desfiz minhas alterações e agora eu quero criar um commit customizado com emojis. Então eu vou usar uma extensão para eu não ter que usar a inteligência artificial aqui, porque ela não vai criar o commit que eu quero. Eu vou usar essa extensão que chama Commit Message Editor, tá bom? É uma extensão que eu uso bastante. Deixa eu ver se eu acho aqui, ó, Commit Message Editor, tá? Aqui eu tenho uma forma visual para mim criar um commit, só que ela vem com essa configuração básica aqui, tá? E que que eu vou fazer? Eu vou customizar, vou customizar essa extensão para ter os commits da forma que eu gosto. Então vou vir aqui no VS Code, vou criar esse arquivo settings.json, e aqui eu vou adicionar algumas configurações das minhas extensões, tá? Então aqui a primeira coisa que eu vou adicionar, deixa eu mostrar para vocês, é essa parte aqui. O que que é isso aqui? Aqui eu tô falando que eu Eu quero que o meu default formatter seja o eslint, tá? Eu quero formatar quando eu salvar, então toda vez que eu editar um arquivo, quando eu salvar ele já vai formatar automaticamente. E eu quero que ele formate essas ações, tanto o eslint quanto o stylelint. E aí outra coisa que a gente vai adicionar aqui é o import sorter, é uma outra extensão que vai limpar os meus imports, ele vai ordenar os meus imports e vai remover imports também quando eles não estiverem sendo utilizados. Isso tudo quando eu salvar, tá bom? Vou mostrar para vocês que isso aqui é muito simples, é muito prático. E por último, aquela extensão que eu falei com vocês. Eu tô olhando para cá porque eu tô copiando o código, vou deixar isso tudo disponível para vocês. Mas o que que eu tô fazendo aqui nessa commit message editor? Eu quero trabalhar minha mensagem de commit, eu quero que ela mostre o tipo, o escopo, a breaking change, a description e a task ID. E eu vou ter esses tipos aqui com os meus emojis, tá bom? Como eu gosto de emojis. E depois eu coloco cada um dos tipos. E quando eu salvo e entro na minha extensão de novo, eu já tenho aqui o tipo do meu commit. Então eu vou dar aqui um tipo initial, create project. Aqui eu tenho um escopo, caso eu queira colocar, e aqui um task ID. Caso você esteja trabalhando com Jira ou com Azure, você pode colocar task ID aqui, tá bom? Salvei, ele já veio para cá e eu comitei. Beleza, então eu já também editei esse commit inicial, que é muito mais simples, tá? E agora a gente pode rodar o CCM para a gente usar inteligência artificial para fazer o commit, esse commit aqui. Deu erro. Por que que deu erro? Porque a gente tem um package lock aqui gigante. Então eu vou só adicionar ele como staged aqui e rodar de novo. Vocês vão ver que vai funcionar porque ele não vai ler o package lock, tá bom? Que tinha muita alteração nele. Então aqui ele tá rodando e perfeito. Update pretty and S-Lint configurations. Perfeito. Aqui ele não colocou que eu adicionei o husky também. Então update pretty slint husk and— eu esqueci o nome da última biblioteca, mas é o lint-stage, perfeito— and lint-stage-configurations. Beleza, aqui eu vou voltar esse para cá e comentar. Show! Essa parte aqui tá feita. E por último, mas não menos importante, a gente vai adicionar o ng-zorro aqui no projeto. O comando que a gente vai utilizar é esse aqui. Então basicamente eu estou instalando o ng-zorro e depois eu estou rodando o schematics do ng-zorro para adicionar todas as configurações dele. Então quando eu rodo esse comando, ele vai instalar o ng-zorro para mim e logo depois ele vai rodar o schematics do ng-zorro para fazer a configuração do ng-zorro aqui no projeto. Ele já vai criar o arquivo, já vai atualizar meu projeto. Com as configurações novas, tá? Aqui ele acabou de instalar. Eu não quero usar os ícones dinâmicos, eu não quero usar um tema customizado, eu quero usar o PT-BR Brasil, quero um site branco e pronto. Instalou, atualizou o package.json e esses outros arquivos e aqui a gente já tem um ng-zone pronto para a gente começar a utilizar. Então as alterações que ele fez aqui, aqui eu vou dar um espaço e salvar, e aqui ele já salvou automaticamente com o meu S-Lint. Aqui é a mesma coisa, ele tá com essas opções aqui, quando eu salvo ele já formata tudo automaticamente, tá bom? E aqui por último ele atualizou aqui também, eu vou dar um espaço, salvar, e ele já formatou. Ele tá dando um erro falando de pre-order também, Se eu der um reload, vamos ver se vai funcionar. Às vezes ele dá esses bugs mesmo. Mas beleza, salvei, tá tudo funcionando. Vamos comitar, ccm, enter, logou. Aí ela vai ver essa diferença de commit aqui, vai verificar e pronto. Fit, adding JSON, configure, initial setup. Perfeito, meus amigos, acabou. Com essa configuração aqui a gente já tem o previous links, então tudo que a gente fizer vai estar salvo. A gente tem um ng-solo já adicionado no projeto e no próximo vídeo a gente vai falar sobre a estruturação de pastas e arquivos e como que eu organizo aqui no Angular. Fechou? Então muito obrigado, se inscreve no canal, deixa o seu like e manda esse vídeo para mais pessoas para eles verem como que a gente configura um projeto em Angular. Fechou? Valeu, até o próximo vídeo.