Marketplace

Sobre | Layout | Setup | Tecnologias | Licença

💻 Sobre

O Marketplace é um aplicativo mobile construído com React Native + Expo que simula um e-commerce completo. Os usuários podem se autenticar, explorar anúncios de produtos com filtros avançados, visualizar detalhes dos produtos, adicionar itens ao carrinho, escolher cartões de crédito e finalizar pedidos. O app também permite acompanhar o histórico de compras e avaliar produtos através de comentários.

Principais pontos de aprendizagem e implementação:

• Aplicação da arquitetura MVVM na construção de aplicações mobile (mantendo uma ótima estrutura que permite a manutenção e implementação de novas features de forma organizada)
• Consumo de uma API própria (fastify + type-orm) com axios e interceptors para refresh de token;
• Organização de navegação com expo-router (fluxos público e privado + tabs);
• Estado global com zustand (sessão, carrinho e filtros) e react-query para cache de requisições;
• Componentização de formulários com react-hook-form + zod e estilização com nativewind.

🎨 Layout

Você pode visualizar o layout base do projeto através desse link. É necessário ter conta no Figma para acessá-lo.

A seguir, veja uma demonstração das principais telas da aplicação:

Splash

Login

Registro

Home

Filtros

Produto

Feedback

Carrinho Vazio

Carrinho com Produtos

Cartão de Crédito

Pagamento

Pedidos Vazio

Pedidos com Produtos

Perfil

⚙ Setup

📝 Pré-requisitos

Antes de começar você precisa ter instalado em sua máquina:

• Git
• Node.js (>= 18)
• NPM ou Yarn

Além disso recomendamos o uso do VSCode ou editor de sua preferência.

Clonando o repositório

# Clone este repositório
$ git clone git@github.com:PabloXT14/marketplace.git

$ cd marketplace

Backend (API)

# Acesse a pasta da API
$ cd api

# Instale as dependências
$ npm install

# Crie o arquivo .env baseado em .env.example (ajuste credenciais, banco etc.)

# Execute as migrations
$ npm run migration:run

# Inicie a API
$ npm run dev

Por padrão a API sobe em http://localhost:3001 e expõe a documentação em http://localhost:3001/docs.

Aplicativo mobile

# Volte para a raiz e acesse o app mobile
$ cd ../mobile

# Instale as dependências
$ npm install

# Opcional: ajuste o arquivo src/shared/api/marketplace.ts para apontar o BASE_URL
# para o IP local da sua máquina/servidor

# Execute o build necessário para rodar em dispositivos/emuladores nativos
$ npx expo prebuild

# Rode em Android ou iOS
$ npx expo run:android
$ npx expo run:ios

Durante o desenvolvimento você também pode utilizar npx expo start para rodar o Metro bundler.

🛠 Tecnologias

Principais ferramentas utilizadas no projeto:

• React Native
• Expo
• TypeScript
• Expo Router
• NativeWind
• React Hook Form
• Zod
• React Query
• Zustand
• Axios
• Bottom Sheet
• Expo Image Picker
• Async Storage
• Fastify
• TypeORM

Para mais detalhes das dependências gerais da aplicação mobile veja o arquivo mobile/package.json.

Para mais detalhes das dependências da API back-end veja o arquivo api/package.json.

📝 Licença

Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para mais informações

Feito com 💜 por Pablo Alan 👋🏽 Entre em contato!