OneStopShop

OneStopshop

Aviso Este aplicativo é um trabalho em andamento e não deve ser considerado pronto para a produção. Ele usa novas tecnologias que ainda estão para serem estáveis, como ações do servidor e regar ORM.

Sobre

O mercado on -line criado usando o roteador de aplicativos Next.js, que permite aos usuários comprar produtos, inscrever -se e listar seus próprios produtos para venda. Os usuários podem criar um perfil do vendedor, gerenciar produtos e coletar o pagamento.

Principais recursos:

• Roteador de aplicativos next.js com componentes do React Server
• Rotas interceptadas (com roteamento paralelo) para visualização rápida do produto e criação de novos produtos em Admin
• Ações do servidor para mutações
• Banco de dados MySQL em escala de planetas com garoa ORM
• Upload para uploads de arquivos TypeSafe (por exemplo, imagens do produto)
• Autenticação de usuário com funcionário
• Integração do Stripe Connect para pagamentos de mercado (incluindo taxas de plataforma e pagamentos de vendedores)

Demonstração

Para demonstrar a experiência de check -out, check -out com um número de cartão de teste como 4242 4242 4242 4242 e use qualquer data futura para o vencimento e quaisquer 3 dígitos para o CVC. Você só poderá fazer o check -out de produtos de vendedores que possuem uma conta de faixa conectada à sua loja (como os brinquedos de Tim). Você também pode criar sua própria conta do vendedor e conectá -la à faixa para a experiência completa.

Página inicial

Editor de página do produto administrador

Executando o aplicativo

Siga as etapas abaixo para executar o aplicativo localmente:

1. Crie um banco de dados MySQL.
2. Crie um arquivo .env local com as variáveis conforme o arquivo .env.example .
3. Execute npm install .
4. Gere uma migração com npx drizzle-kit generate:mysql . Isso cria uma nova pasta chamada migrations-folder na raiz, que contém as consultas SQL para criar as tabelas de banco de dados. As migrações são sincronizadas automaticamente com o banco de dados através da função de migração em db.ts Como alternativa, você pode executar as consultas SQL geradas a partir da migração manualmente através do console da escala de planetas e remover a função de migração em db.ts
5. Execute npm run dev para abrir o aplicativo no modo de desenvolvimento.

É isso. Agora você deve poder acessar o aplicativo em http://localhost:3000 .

Notas

• Ao gerar a migração pela primeira vez com a garoa, verifique se o migrations-folder na raiz está vazio ou não existe.

Livro de histórias

O Storybook foi adicionado a este aplicativo, no entanto, não foi trabalhado ativamente desde a criação inicial do aplicativo. Independentemente disso, ele pode ser executado usando os seguintes comandos:

1. Execute o script de construção do Tailwind para criar um arquivo de saída para as classes do Tailwind (depois de executado e concluído, você pode ter que 'matar' o terminal (ou seja, ctrl + c ) para interromper o processo se ele não parar automaticamente).

   Comando: npm run tailwind

2. Run StoryBook (isso usará o arquivo de saída do Tailwind criado na etapa anterior e será executado em http://localhost:6006 ).

   Comando: npm run storybook

Solução de problemas

Se você vir um erro relacionado a uma tabela que não existe na escala de planetas (provavelmente sendo lançada na app/(storefront)/(main)/page.tsx pois esse é o primeiro uso do banco de dados), isso se deve ao banco de dados não estar em sincronia. Revise a etapa 'executando o aplicativo' acima e verifique a guia 'Insights' em PlanetScale para verificar se as consultas de criação de tabela foram executadas.

Contribuindo

Sinta -se à vontade para fazer problemas e relações públicas para novos recursos/correções