Este projeto sem dúvida foi o meu maior até agora e também o que eu mais aprendi. Comecei este projeto com pensamento voltado para o seu MVP, então escolhi bootstrap para estilização e redux para gerenciamento de estado. Foi realmente incrível perceber que eu não tinha lacunas tão grandes no meu conhecimento, a maior delas sendo a no quesito de segurança para o back-end, mas foi relativamente tranquilo. Depois de terminar o app (front e back), decidi mudar o visual e tirar o bootstrap do projeto, então usei o Storybook enquanto criava os novos componentes e utilizei Styled Components para estilização.
[email protected]
123123
[email protected]
123123
[email protected]
12345
- Busca / Listagem de produtos
- Carrinho de compras totalmente funcional
- Avaliações e classificações de produtos
- Paginação de produto
- Recurso de pesquisa de produto
- Perfil de usuário com pedidos
- Marcar pedidos como uma opção entregue
- Processo de checkout (envio, forma de pagamento, etc)
- Integração com PayPal e Mercado Pago
- Testes
- Design responsivo
- Painel de Administração
- Renderização do lado do servidor
I used a Rails-style pattern [ref], so each file type resides in an appropriately named directory: actions, reducers, components, etc. The only caveat is that I used the Atomic Deisgn methodology for separating components and make it easier to understand what does what at a glance
Eu usei um padrão do Rails [ref], Que é quando tipo de arquivo fica em uma pasta com seu nome: actions, reducers, components, etc. E também usei a metodologia de design Atomic para separar componentes e tornar mais fácil entender o que eles fazem sem precisar avaliar o código.
┌───actions
│ └─ Conjunto de actions do Redux
├───reducers
│ └─ Conjunto de reducers do Redux
├───types
│ └─ Constantes usadas no Redux
├───components
│ ├───atoms
│ │ └─ A menor parte de um componente
│ ├───molecules
│ │ └─ Combinações de atomos
│ └───organisms
│ └─ Combinações maiores usando atomos e moleculas
├───pages
│ └─ Combinação de organismos e requisição de dados
└───styles
└─ Estilo globais/Muito usados
No back-end eu escolhi fazer o clássico MVC (Model-View-Controller, no caso sem o View,) com algumas mudanças para torná-lo mais facil de desenvolver à API. Outra coisa que também vale a pena mencionar é que estou usando importações ES6/ESM.
├───config
│ └─ Configurações
├───controllers
│ └─ Logica de negocio
├───data
│ └─ Dados usados no "seeder"
├───middleware
│ └─ Middlewares (Autenticação and Erros)
├───models
│ └─ Esquema do BD
├───routes
│ └─ Rotas API
├───uploads
│ └─ Destino de imagens upadas
└───utils
└─ Functions utilitarias
Sinta-se à vontade para criar uma nova issue com o respectivo título e descrição no repositório. Se você já encontrou uma solução para o seu problema, adoraria revisar sua pull request!
⭐ Se você gostou do projeto não se esqueça de dar uma estrela a este repo, eu ficaria bastante grato!
Não se esqueça de configurar o .env do backend, use o seguinte modelo:
PORT=
MONGO_URI=mongodb+srv://<username>:<password>@cluster0.7arhk.mongodb.net<database>?retryWrites=true&w=majority
JWT_TOKEN=
PAYPAL_CLIENT_ID=
MERCADO_PAGO_ACCESS_TOKEN=
# Clonar
$ git clone https://github.com/Rawallon/Ecommerce-react-redux-app && cd Ecommerce-react-redux-app
# Install as dependencias do front-end
$ cd frontend && npm i && cd ..
# Instala as dependencias do back-end
$ cd backend && npm i && cd ..
# Instala o concurrently
$ npm i
# Joga dados no seu BD
$ npm run data:import
# Roda front e back
$ npm start
# Você pode rodar individualmente usando
# npm run client
# npm run server