CUA

❗️❗️❗️❗️Note Este repositório não é mais mantido ativamente. ❗️❗️❗️❗️

? Create-Universal-App (Cua)

newdemo.mp4

? O que é isso?

Create-UniverSal-App (Cua) é um modelo opinativo para criar aplicativos Universal (Mobile + Codeshare) de palha completa com autenticação interna para celular e web usando expo (móvel), nextJs (web), trpc , prisma , tamagui (estilismo de UI +) e funcionário (Mobile + web auth). Uma demonstração está ao vivo em https://cua-demo.vercel.app/.

Aqui está um tutorial de 20 minutos no YouTube, repassa tudo, se isso for mais do seu estilo!

Você também pode executar npx create-t3-universal-app para iniciar seu projeto (por Albbus). Adicione uma das seguintes bandeiras se você quiser uma variação específica de Cua:

• --with-supabase
• --with-drizzle-pg
• --with-drizzle-sql

Se você tiver alguma dúvida ao usar isso, fique à vontade para se juntar à nossa? Discord?, Somos todos bastante ativos lá!

Este repo é feito em cima de :

• Create-T3-Turbo: Expo, Next, TRPC, PRISMA, Nextauth-nenhum compartilhamento de código da interface do usuário e nenhuma autenticação móvel.
• T3-Turbo-and-Clerk: T3 Turbo com Auth for Mobile + Web-ainda não há compartilhamento de código da interface do usuário.
• TAMAGUI + SOLITO STARTER: Expo + Próximo Código Compartilhar - Sem TRPC e Sem Auth.

? Como funciona

Estrutura de pastas

• aplicativos
  • próximo
  • expo
• pacotes
  • UI (seus componentes reutilizáveis com Tamagui)
  • DB (DB Schema & Prisma Stuff)
  • App
    • Recursos (️ Todo o seu código de front -end nativo vai aqui 000
    • navegação (unificação da web + navegação móvel)
    • provedor (provedores unificadores)
    • Utils (seus utilitários como auth & trpc)
  • API (todo o seu TRPC e código de back -end)

Em um pouco mais de detalhe

Seu código de front -end estará no React Native, o que significa que você escreverá visualizações em vez de divs. Como estamos usando o Tamagui em particular, vamos escrever pilhas em vez de visualizações.

• apps/expo e apps/next são praticamente pastas vazias que estão simplesmente referenciando seus packages/app .
• Se você está familiarizado com o React Native, sentirá como se você esteja escrevendo um aplicativo nativo do React, que também corre muito bem na Web (com SSR e todos esses presentes).
• Seu código será renderizado como HTML/CSS no lado NextJS e reagir nativo normal no lado nativo.

Seu código de back -end será em packages/api . NextJS vai executar esse código em um ambiente sem servidor, se você estiver um pouco confuso sobre como isso funciona aqui está um bom vídeo de Theo que fala sobre NextJs como uma estrutura de back -end.

• Seu back -end e front -end se comunicarão com o TRPC.
• Seu back -end e seu banco de dados se comunicarão com o prisma (ORM).
• O Mobile Auth é feito com a Clerk Expo, e a Web Auth é feita com o Clerk React e o Clerk Next.

Nota: Você não precisa entender como tudo funciona em detalhes antes de começar a usar esse modelo. Como alguém que quer saber como todo parafuso e porca funciona, muitas vezes fico "bloqueado" pelo meu próprio perfeccionismo, então estou apenas jogando isso lá fora, caso você esteja se sentindo o mesmo com alguma coisa.

? Por trás das decisões

Por que Tamagui para Ui & Styling?

O que é Tamagui?

TLDR : É para fazer as coisas parecerem bonitas na Web e no celular, sendo muito rápido e fácil de trabalhar. Com mais detalhes, Tamagui tem 3 coisas:

• Compilador : sua maneira única de transformar seu "código relacionado ao estilo" em CSS puro mais rapidamente. A coisa mais importante aqui é provavelmente a coisa que eles fazem.
• Núcleo : um pequeno conjunto de componentes que eles construíram com o objetivo de substituir a visualização e o texto que você usa no React Native, com algumas vantagens.
• UI : Um conjunto de componentes da interface do usuário que a equipe TAMA construiu usando o CORE.

Confira seus documentos para obter mais informações.

Por que não nativowind & Tailwind?

O que eu gosto no Tamagui é que é simultaneamente o Tailwind e o Daisyui que foi construído a partir do chão projetado para aplicativos universais com seu próprio compilador e componentes principais.

Sinta -se à vontade para usar o NativeWind & Tailwind em vez de Tamagui, você poderá configurar as coisas com bastante facilidade (e se você contribuir com esse modelo, criando uma ramificação com a instalação do nativo).

Por que funcionário para auth?

Em um nível alto, o funcionário promete uma solução geral de gerenciamento de usuários, em vez de apenas autenticação com coisas como o perfil do usuário, proibição e gerenciamento de dispositivos integrados. Na prática, eles têm uma biblioteca Expo/Next muito semelhante, com ganchos embutidos que são muito bons de usar! Pessoalmente, eu me diverti muito usando o funcionário em comparação com outras soluções como Firebase ou Supabase.

Coisas práticas

• Ganchos e componentes realmente agradáveis (assinados/assinados) que funcionam para a Expo e NextJs.
• SDKs para todas as três plataformas: Expo Frontend, NextJS Frontend, NextJS Serverside.
• Apoio e ajuda fantásticos de sua equipe na discórdia (da experiência pessoal).

Desvantagens

• Não faz SMS a menos que você pague: grande negativo para o celular, mas compensa isso com o OAuth fácil.
• Plano Premium caro em comparação com as alternativas.
• Espada de dois gumes de ser uma startup.

Qual DB?

Eu recomendo que você gire uma instância do Postgres na Ferrovia ou use Supabase, você pode trazer o seu, pois isso não importa muito.

? Como usar isso?

1. Projeto configurado

• yarn install para instalar pacotes e construir o projeto.
• Configure suas variáveis de ambiente corretamente, duplicando o arquivo .env.example , removendo .example e inserindo suas variáveis de ambiente.
  • Clerk_Secret_Key & Next_Public_Clerk_Publishable_key : Inscreva -se no funcionário para obter suas chaves da API
  • Database_url ( Opcional ): Spin uma instância do Postgres com ferroviária ou supabase (estamos usando o SQLLITE por padrão agora, para que você não precise fazer isso, a menos que esteja pronto para produção!)
• yarn db-push para empurrar nosso esquema prisma ao nosso banco de dados.

2. Inicie seu projeto

• yarn web para iniciar um servidor de desenvolvimento da web.
• yarn native para correr no iOS ou Android. PS : Para que isso funcione, você precisará do seu aplicativo da web em execução no localhost: 3000, lembre -se de que seu aplicativo NextJS também é o seu back -end!
• yarn studio para iniciar seu estúdio Prisma. PS : A consulta de exemplo TRPC mostrará um example_entry que você pode excluir junto com o example_user conectado_user.
• yarn dev para iniciar todos os pacotes e aplicativos simultaneamente.

3. Adicionando uma nova tela

Para automatizar o processo explicado abaixo, você pode usar as ferramentas T3-CUA-Tools da Extensão do VSCODE, também disponíveis no mercado. Ele criará os arquivos e adicionará as importações e o código de navegação necessário para você.

• Crie novas telas em packages/app/features/ .
• Para componentes menores, sinta -se à vontade para colocá -los em packages/ui/ .
• Para novas rotas, adicione um novo routeName.ts em packages/api/src/router/ e certifique -se de mesclá -lo no roteador de aplicativos index.ts .
• Ao adicionar uma nova página ou tela, você precisará adicionar a página à Expo e NextJs:
  • Expo
    • Vá para apps/expo/app/ e crie um novo routeName.tsx que está importando seu elemento de /app/features/screenName/ .
  • Próximo
    • Vá para apps/next/pages/ , crie uma nova pasta com o nome sendo sua rota e um index.tsx que está importando seu elemento de /app/features/screenName/ .

Implantando para vercel

Depois de criar um novo projeto no Vercel e vinculá -lo ao seu repositório do Github, você terá que inserir suas variáveis de ambiente:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(ignore o comando de instalação um agora)

Perguntas frequentes

1. Onde devo instalar os pacotes? Se ele contiver código nativo, você deve instalá -lo na pasta /expo .

2. Como sei se ele contém código nativo? Em geral, se envolver algumas interações com o sistema operacional do telefone, como as APIs para interagir com armazenamento, câmera, giroscópio, notificação etc. envolve código nativo!