Micro-SaaS na Prática (Parte 2) - Dashboard UI com Shadcn UI, Next JS 14 e Composition Pattern

[@vibedev.official]

Link para o repositório: uselink.co/share/b66f2842-c799-4f9c-b74f-39ba9d34eb72

[@lucasmacalister]

não esta funcionando o link do repositório! Parabéns pelo conteúdo!

[@joao9604]

Excelente trabalho!! Estou amando fazer esse projeto! Uma dica: No tailwind, para ícones, acredito que seja melhor utilizar o size-"x" ao invés de definir o h e w com os mesmos valores.

[@KlausNascimento]

Obrigado pelo serviço prestado. Glória a DEUS pela sua vida!

[@vibedev.official]

Hahahaha! Valeu man! Vem muito pela frente ainda!

[@jaomuro]

Conteúdo maneiro. Batendo ponto aqui, projeto tá ficando massa. Também estou em processo de implementação de uma ideia e é bom consumir esse tipo de conteúdo que ajuda na motivação de prosseguir.

[@vibedev.official]

Boaaa! O objetivo é ajudar

[@FunctionDev]

Nunca toquei em código React ou Next, mas estou acompanhando a serie, de tão interesssante. Parabéns Felipe, ótimo conteúdo!

[@vibedev.official]

Muito obrigado 😁

[@matheusantonio174]

Manão! foda demais esse conteúdo teu! Parabéns

[@vibedev.official]

Opa! Muito obrigado Matheus, espero que esta série te inspire para colocar teu projeto online.

[@lucasgomes3794]

Tava muito ansioso, por está parte 2 e as outras

[@vibedev.official]

Ta na mão! hahaha

[@alissondahlem8730]

Tuas aulas são excelentes man! Parabéns! Estava ansioso pelo proximo video.

[@vibedev.official]

Show! Muito obrigado.

[@dolfera1962]

Cara... Sensacional seu conteúdo! Parabéns!!!

[@vibedev.official]

Valeuuu!

[@vattghern2954]

cara, top dms o conteúdo e que qualidade

[@vibedev.official]

Valeuuuu!

[@SamuelFJRDev]

continua bro! pra cima...

[@vibedev.official]

Boraaaa!

[@PedroHenriqueLadeia]

Show demais o vídeo! Parabéns! Seria show um vídeo mostrando seu ambiente de desenvolvimento também. Continue com esse excelente conteúdo!

[@vibedev.official]

Opa! Muito obrigado. Eu vou lançar o video sobre o meu ambiente na semana que vem!!!

[@ericnevesr]

Que foda, conteúdo massa!!!

[@vibedev.official]

Muito obrigado man! Vem muito conteúdo ainda!

[@WilliamRondon-BR]

Muito bom !

[@vibedev.official]

Valeu 💪

[@victorgsa]

Batendo carteirinha aqui, só a agradecer irmão.

[@vibedev.official]

Valeeeeu!

[@claudioalbertofg]

Muito bom Felipão!

[@vibedev.official]

Valeu Claudio!!!!

[@rafaelhenrique5423]

Conteúdo de muita qualidade e bem explicado passo a passo! Ja dei a dica em outro vídeo mas poderia trazer um vídeo das suas config do vscode? Extensões, tema, configuração etc...

[@vibedev.official]

Vou trazer sim, acredito que na próxima semana já entra. Estou ajustando para trazer video todos os dias aqui.

[@camposaao]

Série de vídeos incríveis irmão! 🚀

[@vibedev.official]

Opa! Muito obrigadooo!

[@juniorcarvalho9437]

Vlw demais Felipe! Mais uma aula foda!

[@vibedev.official]

Valeuuuu man!

[@marcoantoniogonzales789]

Topppp dms, felipão!

[@vibedev.official]

Opa! Muito obrigado Marco, aproveita a aula, quero ver teu projeto em breve ein hahaha!

[@williancarddd]

Posso te dar uma dica ? acho seus vídeos maneiro, porém a fonte do editor de código está muito muito pequena, e talvez , no navegador, diminuir um pouco ele.

[@brunovittoria6476]

Up

[@kamajus3]

Up

[@brunodepaula5293]

Up

[@vibedev.official]

Vou aumentar, pode deixar!

[@leonaldeufrasiojunior]

Cara, como surgiu a ideia do canal? Independente disso por favor nao desiste doa videos q sao muito bons! Mesmo eu que estou estudando ja ver algo avancado assim so me da gás!

[@leonaldeufrasiojunior]

Ah, além de conhecer novos serviços e logicamente querendo ou não ir entendendo a lógica

[@vibedev.official]

Cara, eu trabalho com SaaS faz mais de 05 anos e com Micro-SaaS cerca de dois anos e pouco. Quando eu percebi que isso seria uma alternativa viável para muitos devs que estão desempregados, travados em ideias boas ou até mesmo, sem liberdade em seus atuais trampos, eu pensei que este tipo de conteúdo poderia ajudar.

[@joanrodrigues7301]

Mais um vídeo foda mano! Só uma dica, grava os videos com a fonte maior no VsCode, quem tem o monitor relativamente pequeno igual o meu fica complicado pra enxergar o código. Tamo junto!

[@vibedev.official]

Opa! Pode deixar que vou ajustar nas proximas aulas.

[@joanrodrigues7301]

@@vibedev.officialSucesso mano!

[@matt__0]

Uma dica de Tailwind que descobri recentemente: quando width e height forem iguais, dá pra simplificar o uso das classes "w-3 h-3" com apenas "size-3". :)

[@vibedev.official]

Amém! Vc é demais, muito obrigado!

[@samuelleaoz]

Perfeito, mano!! Olha, quando precisar pegar os nomes do ícones do Radix, basta posicionar o mouse em cima do ícone, que aparece o nome. Bem ruim essa UX, né? Falei pq vi que vc precisou abrir o Figma para pegar o nome. Valeu, irmão! Sucesso!

[@vibedev.official]

Opaaa! Valeu. É muito ruim mesmo, mas pelo menos sei como usar agora.

[@derikcastilho6199]

Cara, estou estudando NextJS e seus vídeos estão ajudando muito, na próxima aula quando for buscar as informações do banco de dados poderia dar um exemplo em utilizar uma api externa ?

[@vibedev.official]

Opa! Fico feliz. Mas, não entendi muito bem seu pedido. Como assim?

[@raphaelaraujo3711]

Feeeeera demais!

[@vibedev.official]

Valeu man! Aproveita, espero que te inspire para fazer o seu projeto ein! hahaha

[@raphaelaraujo3711]

@@vibedev.official com toda a certeza vai! Pode ter uma extensão pra tipo de perfil um dia? Haha.. Vlw!

[@andersonpgs]

Pequena dica, no middleware coloca "if (pathname.includes('/app') && !token)" em vez de "if (pathname === '/app' && !token)", pois qualquer rota que tenha /app incluso e que nao tenha o token ele vai retornar para a página de autenticaçao, percebi isso pois continuei na página de /app/settings mesmo após ter feito o signout

[@vibedev.official]

Valeuuuuu! Eu acabei deixando passar aqui.

[@lucascoliveira3957]

Cara, mt bom o vídeo. Se vc adiantar, ou lançar dois vídeos técnicos por semana seria top, vlw msm

[@vibedev.official]

Opa! Estou me adequando aqui no cronograma, tentar trazer vídeos todos os dias.

[@PimLeonardo]

muito bom, pode adicionar na playlist pra facilitar o acesso depois?

[@vibedev.official]

Show! Vou adicionar aqui para nós.

[@OrionDesignOficial]

Man, que didática maravilhosa, to montando meu Micro Saas que manipula um postgres (que já esta todo pronto) e seu conteúdo é muito foda. Tu tem curso man? se Sim mana o link que quero pra ontem skskks.

[@vibedev.official]

Opa! Me chama no Telegram, estou para lançar uma mentoria 1 a 1. Quero acompanhar de perto a galera para garantir o resultado delas.

[@vibedev.official]

Me chama aqui na comunidade que te explico certinho: t.me/+Y9DRMWJJoi9mNGZh

[@MarcosSmith-py4jk]

Irmão eu preciso criar um micro saas para visualização de dados, como se fosse um BI ou um dashboard interativo, ele vai receber os dados de uma API, como voce me aconselha desenvolver isso? Tambem não sei o valor que cobro, me dá uma orientação sobre tempo e valor. Abração!

[@arthurribeiro9639]

Salve, irmão! Vim pelo Tabnews! Poxa, tô curtindo muito acompanhar a série! Mano, queria te pedir um favor. Eu tenho um problema muito sério com CSS, que é o que estou tentando melhorar no momento. Sempre fui back-end, e agora, sofrendo um pouco com o design, huahduahdua. Por acaso você conseguiria modificar, num vídeo seguinte, a sidebar, para que torne-se responsiva à ambientes mobile? Ia me ajudar muito! Ansioso pelos próximos vídeos! Valeuzão

[@vibedev.official]

Com certeza! Vou fazer isso aqui!

[@viniciusvibrich6536]

Irmão, já ouviu falar do Kirimase CLI? Facilita muito quando vou criar meus MVPs com nextjs

[@vibedev.official]

Pior que não, vou dar uma pesquisada aqui’

[@saulotarsobc]

27:10 Não consigo entender pq tailwind encrenca com as tags h1-6 rsrs

[@vibedev.official]

Eu também não, vamos resolver isso! Hahaha

[@tiagodiniz4726]

Muito bom. Tem área de membros?

[@lucasmgsilva98]

Você está utilizando algum Window Manager diferente do default do MacOS?

[@vibedev.official]

O Tiles, ajuda demais!

[@lucasmgsilva98]

@@vibedev.official pelo que eu vi ele não gerencia workspaces, né? Eu queria algo que me permitisse trocar mais rapidamente do workspace, porque o nativo do mac é bem lento.

[@morgado_gameplay4364]

Cara qual o nome do seu Editor de codigo fiquei na duvida. achei e era o vscode

[@flavio_ever]

É um fork do vscode chamado "Cursor AI". Basicamente um vscode turbinado com I.A. Fora isso voce também pode ter experiencia I.A com Copilot instalado em seu vscode ou mesmo o Codium que é free.

[@vibedev.official]

Cursor!

[@vinicius_enari]

Para quem só aprendeu React com javascript vale a pena migrar para typescript?

[@vibedev.official]

Com certeza! Vai ter muito mais segurança para a manutenção dos seus projetos.

[@peterpbt]

Otimo video! Pretende usar o tRPC?

[@vibedev.official]

Opa! Provavelmente, estou querendo mostrar as Server Actions neste projeto primeiro. Vamos ver!

[@maxwellalvesdesousa5153]

Conteúdo top. PS: Eu acho que vai dar problema com scroll quando o conteúdo crescer, acho que a sidebar quebra.

[@vibedev.official]

Opa! Vamos resolver isso e outras coisas na próxima aula. O Design vai melhorar muito ainda.

[@shift564]

Porque não usar um back separado do next js?

[@vibedev.official]

Aqui o objetivo é montar um MVP o mais breve possível e que seja escalável. Existem vários projetos na comunidade lá fora como o Cal.com que segue está stack e tem aportes milionários. E aqui, eu testei e validei esta stack em mais de 11 projetos e até o momento, nada do Next ser um gargalo. Tudo depende de como você organiza o seu projeto.

[@saulotarsobc]

1:3:15 Manda mais manda mais

[@vibedev.official]

Deixa comigo! Falta dois dias só

[@alexanderalmeida6534]

Cara, se puder, adiciona login social com o google, o projeto tá foda mas eu to tendo dificuldade de colocar outros providers

[@vibedev.official]

Deixa comigo! Vou adicionar sim!

[@luanscar6371]

eu definitivamente nao consigo abstrair esse pra que se usa isso?

[@vibedev.official]

Dá uma olhada no componente do link, viu como passamos uma tipagem como props e extendemos o Generic? Se quiser, chama na comunidade que te explico melhor.

[@fibeck2613]

que tema é esse que vc usa?

[@vibedev.official]

Min dark!

[@luanscar6371]

serio???? so quarta da proxima semana video novo?????????????????????????

[@vibedev.official]

Ta chegandooooo!

[@reginaldofo]

É disso que to falando! resto é conversa fiada meu RAPAZ!!!!!

[@vibedev.official]

Boaaaaaa! Aproveita!