Como Criar um App de E-commerce com React Native e Medusa
Transforme seu celular em uma loja virtual. Pegue um painel completo e gratuito, encaixe no seu app React Native e veja produtos em tempo real.
Por que isso é importante
Resposta direta: aplique “Como Criar um App de E-commerce com React Native e Medusa:” com boundaries e métricas de UX — migração big-bang costuma sair cara.
Por que isso é importante
Como Criar um App de E-commerce com React Native e Medusa. Transforme seu celular em uma loja virtual. Pegue um painel completo e gratuito, encaixe no seu app React Native e veja produtos em tempo real.
Seu app, seu painel: venda, gerencie, cresça
Imagine controlar uma loja virtual inteira, na sua mão. Hoje, você aprende a montar um app React Native e integrá-lo a um painel Medusa de graça. Não é plugin fajuto, não é gambiarra: é admin pronto, rodando local, banco Postgres sólido e um mobile que mostra em tempo real tudo que você gerenciar. O segredo? Junção moderna de backend e mobile com poucas linhas de comando — e zero mensalidade.
Atenção
Todo passo deste tutorial exige Node, Docker e um ambiente local básico. Nenhuma licença paga, nada obscuro. Só código aberto e ferramentas universais.
O que você constrói hoje
Um painel de administração moderno, estiloso e funcional. Um app mobile React Native que consome os dados desse painel. Tudo rodando junto, conectado, sincronizado e pronto para escalar.
Atenção
Sua loja mobile vai ter cadastro de produtos, carrinho, estoque e usuários, igual aos maiores players do mercado.
Por que Medusa? Por que React Native?
Medusa é open source e feito para gerenciar e-commerces de todo porte. O painel admin vem pronto, sem dor de cabeça. React Native entrega rapidez, visual moderno e performance real, rodando tanto em iOS quanto em Android. Juntos, eles formam uma estrutura que antes só empresas com dezenas de devs tinham.
Atenção
Medusa precisa de um banco de dados Postgres para funcionar. Prepare seu ambiente antes de começar.
O que você precisa instalar
Node.js LTS instalado, Docker Desktop ou CLI (para subir Postgres), Expo CLI e editor de código.
Resumo técnico
- Node.js 18+ - Docker Desktop ou Docker CLI - Expo CLI (npm install -g expo-cli) - Editor de preferência (VSCode recomendado)
Suba o Postgres em um comando
Usar Docker para criar e rodar o Postgres simplifica tudo. O comando:
Atenção
docker run -d -p 5432:5432 --name pg-medusa -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=postgres postgres
Isso cria um container chamado pg-medusa rodando em localhost:5432, pronto para receber a aplicação do Medusa.
Instale o Medusa e crie seu painel administrativo
Execute na pasta do projeto: npx create-medusa-app@latest medusa-store e siga as perguntas interativas. Escolha Storefront sim para ter também o front web, mas foque aqui no admin.
Atenção
Guarde o usuário e senha do Postgres (padrão: postgres). É o que conecta tudo.
Cadastre-se e entre no painel, sem pânico
No fim da instalação, o admin abre no navegador. Informe um e-mail qualquer e uma senha para criar o usuário gestor. Em segundos você verá produtos para teste e toda a estrutura de pedidos, clientes e estoque.
Explore as URLs que importam
Painel admin: http://localhost:9000/app API: http://localhost:9000 Storefront Web: http://localhost:8000
Assim, você gerencia, consulta a API, configura promoções e cuida de tudo sem abrir código.
Hora do mobile: crie o app React Native com Expo
Com Expo, é só rodar: npx create-expo-app@latest medusa-store-app --template tabs (TypeScript)
Estruture seu projeto: em src crie pastas para components, screens, services e utils. Deixe leve, limpo e pronto para crescer.
Limpe, organize e padronize a estrutura
Apague arquivos desnecessários da criação automática (exemplo: pastas fonts, imagens não usadas, arquivos de exemplo). Crie componentes funcionais para tela de produtos, carrinho e checkout. Centralize chamadas ao backend em um arquivo services/api.ts.
Conecte o mobile à API do Medusa
Use fetch, axios ou react-query. O endpoint base da API: http://localhost:9000/store/products. Faça um hook para buscar produtos. Mostre foto, nome e preço no app em tempo real.
Atenção
Para testes em emulador/dispositivo, use IP da máquina (não “localhost”) nos endpoints do app mobile.
Crie um componente para exibir produtos
Faça um Product.tsx que recebe thumbnail, título e preço. Adicione um botão para detalhes ou adicionar ao carrinho. Pense na usabilidade: toque fácil, visual limpo, foco na compra.
Sincronização em tempo real entre app e painel
Cada alteração no painel Medusa aparece na lista do app mobile imediatamente. Novo produto cadastrado? Editou imagem? Está tudo no app sem precisar reiniciar nada.
Atenção
Isso acelera validação e demos para clientes: muda no admin, vê no app instantaneamente.
Personalize e escale sua solução
A estrutura criada permite adicionar autenticação, gateway de pagamento, push notifications e catálogo ilimitado. O painel Medusa é extensível, e o React Native permite integração nativa com recursos do dispositivo.
Resumo: o que você ganha
- Painel admin profissional e grátis - API escalável para qualquer front - Mobile rápido, moderno e customizável - Controle total sobre loja, estoque e promoções - Zero amarras, 100% código aberto
Atenção
Você domina back e front em menos de 1 hora. O mobile e o admin ficam sincronizados, prontos para você lançar sua ideia — ou usar como base para clientes reais.
Faça mais: estude, crie, reinvente
Quer ir além? Acesse a documentação do Medusa (medusajs.com), veja extensões e plugins, aprofunde no Expo Router, estude boas práticas de clean code em React Native. Montar seu back e front ficou mais fácil — o segredo está em saber integrar, não só copiar. O canal Dev Doido traz guias práticos para cada etapa do seu crescimento como dev.
Perguntas frequentes
Em Como Criar um App de E-commerce com React Native e Medusa:, o que «O que você constrói hoje» muda na UI real?
Comece pelo mecanismo do corpo: Um painel de administração moderno, estiloso e funcional. Um app mobile React Native que consome os dados desse painel. Tudo rodando junto, conectado, sincronizado e pronto para escalar.
Como testar «Por que Medusa? Por que React Native?» sem big bang de front?
Critério do material: Medusa é open source e feito para gerenciar e-commerces de todo porte. O painel admin vem pronto, sem dor de cabeça. React Native entrega rapidez, visual moderno e performance real, rodando tanto em iOS quanto em Android. Juntos, eles formam uma estrutura que. Se precisar de segundo sinal, Medusa precisa de um banco de dados Postgres para funcionar. Prepare seu ambiente antes de começar.
Qual trade-off de «O que você precisa instalar» o texto deixa explícito?
O artigo alerta: Node.js LTS instalado, Docker Desktop ou CLI (para subir Postgres), Expo CLI e editor de código. Ajuste ao contexto de `crie-um-app-de-e-commerce-com-` antes de virar padrão do time.
O que «Suba o Postgres em um comando» exige antes do próximo PR?
Resposta direta do corpo: Usar Docker para criar e rodar o Postgres simplifica tudo. O comando:
Perguntas frequentes
Em Como Criar um App de E-commerce com React Native e Medusa:, o que «O que você constrói hoje» muda na UI real?
Comece pelo mecanismo do corpo: Um painel de administração moderno, estiloso e funcional. Um app mobile React Native que consome os dados desse painel. Tudo rodando junto, conectado, sincronizado e pronto para escalar.
Como testar «Por que Medusa? Por que React Native?» sem big bang de front?
Critério do material: Medusa é open source e feito para gerenciar e-commerces de todo porte. O painel admin vem pronto, sem dor de cabeça. React Native entrega rapidez, visual moderno e performance real, rodando tanto em iOS quanto em Android. Juntos, eles formam uma estrutura que. Se precisar de segundo sinal, Medusa precisa de um banco de dados Postgres para funcionar. Prepare seu ambiente antes de começar.
Qual trade-off de «O que você precisa instalar» o texto deixa explícito?
O artigo alerta: Node.js LTS instalado, Docker Desktop ou CLI (para subir Postgres), Expo CLI e editor de código. Ajuste ao contexto de `crie-um-app-de-e-commerce-com-` antes de virar padrão do time.
O que «Suba o Postgres em um comando» exige antes do próximo PR?
Resposta direta do corpo: Usar Docker para criar e rodar o Postgres simplifica tudo. O comando:
O que você constrói hoje
Um painel de administração moderno, estiloso e funcional. Um app mobile React Native que consome os dados desse painel. Tudo rodando junto, conectado, sincronizado e pronto para escalar.
Por que Medusa? Por que React Native?
Medusa é open source e feito para gerenciar e-commerces de todo porte. O painel admin vem pronto, sem dor de cabeça. React Native entrega rapidez, visual moderno e performance real, rodando tanto em iOS quanto em Android. Juntos, eles formam uma estrutura que antes só empresas com dezenas de devs tinham.
O que você precisa instalar
Node.js LTS instalado, Docker Desktop ou CLI (para subir Postgres), Expo CLI e editor de código. - Node.js 18+ - Docker Desktop ou Docker CLI - Expo CLI (npm install -g expo-cli) - Editor de preferência (VSCode recomendado)