Radzionkit: configuração rápida para projetos robustos de Monorepo de pilha completa
O Radzionkit é a solução final para os desenvolvedores que desejam impulsionar seus projetos sem o estresse de configurações complexas. Projetado como um Monorepo abrangente, ele fornece um conjunto integrado de ferramentas para o desenvolvimento da pilha completa, de uma biblioteca de interface do usuário robusta a serviços de back-end simplificados. Com o Radzionkit, você economiza um tempo valioso, tanto ao iniciar novos projetos quanto durante o processo de desenvolvimento, garantindo uma experiência de codificação suave, eficiente e sem complicações. Abrace o poder da simplicidade e da eficiência com o Radzionkit - seu parceiro na transformação de desafios de codificação em triunfos de codificação.
Visão geral de Monorepo: Inside Radzionkit Diverse Package Ecossystem
O RadzionKit aproveita os espaços de trabalho de Yarn para otimizar uma configuração Monorepo, organizando o código em dois diretórios principais: lib e product . A pasta lib abriga pacotes de código genéricos como @lib/utils ou @lib/ui , projetados para serem agnósticos de projeto e facilmente portáteis para qualquer projeto sem transportar a lógica específica do projeto. Por outro lado, o diretório de product abriga implementações de exemplo, como @product/api ou @product/ui-demo , que servem como projetos demonstrando como integrar e adaptar os pacotes @lib às necessidades exclusivas do seu projeto. Essa arquitetura atenciosa não apenas otimiza o processo de desenvolvimento, mas também aprimora a reutilização do código, tornando -se fácil escalar e modificar seu projeto à medida que cresce.
Pacotes Lib
- @lib/utils - uma coleção de funções de utilidade para tarefas comuns.
- @lib/ui - uma biblioteca versátil da interface do usuário com componentes, ganchos e utilitários.
- @Lib/DynamoDB - Utilitários para trabalhar com a AWS DynamoDB.
- @lib/dnd -componentes e utilitários para funcionalidade de arrastar e soltar.
- @LIB/CodeGen - Utilitários de geração de código para arquivos JSON e JSON.
- @Lib/países - Tipos e utilitários para lidar com dados relacionados ao país.
- @Lib/Lambda - Utilitários para trabalhar com funções da AWS Lambda.
- @LIB/Analytics -UI - Componentes para integrar a análise de amplitude no seu aplicativo React.
- @Lib/Auth - Tipos para sessões de autenticação e provedores de OAuth.
- @lib/next -ui - componentes e utilitários para aplicativos Next.JS.
- @Lib/Subscription -UI - Componentes para pagamentos de assinatura.
- @lib/assinaturas - tipos para pagamentos de assinatura.
- @Lib/Chain - Utilitários para trabalhar com Web3 e Blockchain.
- @Lib/Chain -UI - Componentes para aplicativos Web3.
Pacotes de produtos
- @Product/App - Um modelo de aplicativo Next.js.
- @Product/API - Uma API de Boilerplate com autenticação do usuário.
- @Product/API -Interface - Interfaces e tipos para interagir com a API.
- @Product/API -UI - Ganchos e componentes do React para interação da API.
- @Product/Config - Um pacote de configuração compartilhado para o produto.
- @Product/DB - Gerenciamento e utilitários de banco de dados.
- @Produto/email - Serviços e utilitários relacionados a email.
- @Product/Email -Forward - Uma função Lambda para encaminhar e -mails.
- @Produto/Entidades - Entidades e modelos principais para o produto.
- @Produto/Entidades -Utils - Funções de utilitário para trabalhar com entidades.
- @Product/Languages - Suporte ao idioma e utilitários de localização.
- @Product/Languages-Next-Ui -Componentes da UI Next.JS para manuseio de idiomas.
- @Product/Ui -Demo - Demo Ui exibindo componentes do produto.
Introdução ao Radzionkit: lançando seu novo projeto
Kickstart seu projeto usando o modelo RadzionKit Github. Você pode remover os pacotes que não precisa e usar os em @product como ponto de partida para o seu aplicativo. Não há necessidade de renomear pacotes, pois a convenção de nomenclatura separa os pacotes reutilizáveis ( @lib ) do código específico do projeto ( @product ). Depois de clonar o modelo, instale dependências usando yarn e sua configuração está pronta para ser usada.
Gerenciando dependências e versões
Para atualizar para a versão mais recente do Yarn, execute o seguinte comando:
Para atualizar todas as dependências para a versão mais recente, execute o seguinte comando:
yarn workspaces foreach --all exec yarn up " * "
Exemplos usando RadzionKit
- Resumo de Radzion: um currículo de desenvolvedor de front-end do Web3. Código fonte disponível no Github.
- Pentafret: um site com ferramentas de teoria musical de guitarra. Código fonte disponível no Github.
- Armazenamento: Salvar arquivos em uma rede de armazenamento distribuída. Código -fonte disponível no github
- Crypto: Receba alertas para alterações de preço de criptomoeda. Código -fonte disponível no github
- GeorgianCitizen: um aplicativo de preparação para exames. Código fonte disponível no Github.
- Aumente: um kit de ferramentas de produtividade projetado para trabalhadores remotos.
Livro de receitas de Radzionkit: simplificando o desenvolvimento com tutoriais práticos do YouTube
Para maximizar sua experiência com o RadzionKit, compilamos o RadzionKit Cookbook, uma série de tutoriais do YouTube projetados para mostrar as aplicações práticas do kit de ferramentas na solução de desafios diários de desenvolvimento. Esses tutoriais atendem a todos os níveis de habilidade, desde iniciantes a desenvolvedores experientes, e cobrem uma variedade de tópicos, desde a configuração inicial até as integrações avançadas. Os vídeos do livro de receitas do Radzionkit são um recurso inestimável, oferecendo instruções passo a passo, dicas práticas e insights especializados, todos com o objetivo de ajudá-lo a aproveitar todo o poder do RadzionKit para soluções eficientes e elegantes em seus projetos de desenvolvimento.
- Criando um gerenciador de arquivos descentralizado usando o automobilismo e o next.js
- Construa um currículo de uma página com o React & TypeScript (exportável como PDF!)
- Como criar um recurso "O que é novo" eficaz para o seu produto
- Mestre arrastar e soltar com DND-kit: Kanban Board Tutorial
- Exclua com eficiência dados de usuário inativos usando o TypeScript e AWS Lambda
- Criando um componente DayInput com React e TypeScript para seleção de data
- Implementando um componente suspenso personalizado no React com o TypeScript e o Floating-Ui
- Em seguida.
- Como construir um sistema de proposta de recurso orientado pela comunidade com React & NodeJS
- Configuração de e -mail sem esforço na AWS: economize tempo e dinheiro com Lambda e Terraform
- Criando um relatório interativo de rastreamento no tempo com react e datilografript
- Como criar um fluxo de integração eficaz no React: um guia passo a passo
- Criando uma lista de TODO de arrastar e soltar no React: um tutorial completo
- Criando um componente de gráfico de linha React do zero
- Construindo uma página de destino do site em TypeScript Monorepo: um guia de desenvolvedor
- Desenvolvimento de back -end da TypeScript simplificante: um guia abrangente
- Construindo a internacionalização em um aplicativo estático NextJS sem bibliotecas externas
- Próximos META TAGS Guia: ícones SEO e PWA
- Criando um ComboBox reutilizável com React e TypeScript
- Type-ouscript de geração automática para componentes de reação dinâmica: um mergulho profundo
- Construindo um sistema de pagamentos de assinatura com Next.js & Node.js
- Criando um componente modal responsivo e minimalista no React
- Autenticação de email de link mágico para aplicativos NextJS + NodeJS
- Mantendo o estado do React em uma sequência de consulta URL com NextJs
- Implementação de pilha completa da autenticação OAuth 2 (Google & Facebook) com NextJs e NodeJs
- Criando layouts diferentes para páginas diferentes no NextJs
- Gerenciamento de estado de reação eficiente com USEPERSISTENTTATE e armazenamento local
- Utilos úteis de CSS para projetos de reação - um guia prático
- Utilitários essenciais e funções auxiliares para projetos de texto datilografado
- Como configurar um monorepo com espaços de trabalho de fios, nextJs, componentes com estilo, mais bonito
- Implantando um aplicativo estático NextJS para AWS S3 e CloudFront
- Projetando uma paleta de cores para modos escuros e claros com reação, componentes estilizados e hsla
- Formato de cor HSLA para React: TypeScript, componentes estilizados, variantes, gerador de cores, seletor de cores
- Tutorial de componente de botão REACT avançado
- Como fazer componente de reação da dica de ferramenta com seta usando a interface do usuário flutuante
- Copie o texto para a área de transferência no componente de clique
- Como fazer o menu Popover reagir com o componente com interface de usuário flutuante
- Como fazer o menu de entrada emoji reagir componente com emoji mart
- Como fazer com que o efeito suspenso transborde seu contêiner com reação
- Como fazer componente deslizante com a entrada de reagir e estilo de estilo
- Construindo componentes versáteis de reação: cartões e painéis
- Layouts CSS eficientes com componentes de pilha
- Forma dinâmica com react-fook-fort usefieldArray
- Componente de rolagem infinita com consulta React
- Um mergulho profundo no react: useElementsize gancho e redimensione a observação
