c shopping
Minimum MVP Publishing
Olá pessoal! Bem-vindo ao C-Shopping, uma jornada para o mundo do comércio eletrônico revelando as maravilhas tecnológicas. Eu sou "Ji Xiaopeng", o autor de código aberto do C-Shopping, e hoje apresentarei a você uma plataforma de comércio eletrônico de código aberto com base nas mais recentes tecnologias. Vamos explorar juntos!
Links de demonstração ao vivo do projeto:
Gateway do projeto: https://github.com/huanghanzhilian/c-shopping.
Reaja o aplicativo de aplicativo móvel nativo:
Gateway do projeto: https://github.com/huanghanzhilian/c-shopping-rn.
Se você achar isso útil, por favor me dê uma estrela. Será um grande incentivo.
Fundo:
Intenção:
Abordar os problemas mencionados em segundo plano.
Objetivo:
Crie um ecossistema completo e bem projetado adequado para a Web.
Em primeiro lugar, vamos nos aprofundar na tecnologia por trás do C-Shopping. Eu adotei uma série de tecnologias de ponta, incluindo Next.js, CSS do Tailwind, UI sem cabeça, Redux-Toolkit-RTK, JWT e Docker, entre outros. Isso garante que este projeto não seja apenas eficiente, mas também altamente escalável. Estamos comprometidos em abordar alguns pontos problemáticos das plataformas tradicionais de comércio eletrônico: falta de estética, adaptação inadequada a diferentes dispositivos e uma interface monótona, entre outros. Ao adotar as mais recentes tecnologias e princípios de design, o C-Shopping cria uma experiência de desenvolvimento técnico totalmente responsivo para os usuários.
A loja C prioriza a experiência do usuário. Nossa interface não é apenas bonita, mas também responsiva, permitindo que os usuários desfrutem de fazer compras facilmente em qualquer dispositivo. As funções de gerenciamento do centro e pedidos também tornam sua experiência de compra mais personalizada e conveniente.
Um dos destaques do C-Shopping é a adoção de uma série de tecnologias avançadas, incluindo o Next.js, CSS do Tailwind, UI sem cabeça, consulta Redux-Toolkit-RTK, etc., fornecendo aos usuários um desempenho e experiência definitivos. Não apenas nos concentramos na estética, mas também nos esforçamos pela excelência em tecnologia.
Next.js, com experiência rápida de raios
O c-shopping usa o Next.js, o que significa que não apenas a velocidade da página da web é incrivelmente rápida, mas também suporta a renderização do lado do servidor, fornecendo um nível de suavidade sem precedentes.
? Tailwind CSS Design elegante
Ao usar o CSS do Tailwind, a loja C injeta um senso de estilo. Cada interface é requintada, tornando as compras um banquete visual.
? Liberdade e flexibilidade da UI sem cabeça
O C-Shopping opta pelo estilo da interface do usuário sem cabeça, dando aos usuários mais liberdade durante o processo de compra. Não é mais confinado às estruturas tradicionais da interface do usuário, ele abre mais portas para personalização.
? Segurança JWT sem preocupações
A segurança é fundamental! O JWT é usado para autenticação de usuário, fornecendo a garantia mais forte para o seu comportamento de compras, permitindo que você compre com confiança.
? Docker Implementação perfeita
A loja de CC abraça o Docker, tornando incrivelmente simples a implantação do projeto. A contêinerização permite que todo o projeto seja executado perfeitamente em diferentes ambientes.
Redux Toolkit e RTK Consulta State Management Art
O C-Shopping usa o Redux Toolkit e a consulta RTK, tornando o gerenciamento do estado mais relaxado e agradável. Você pode rastrear melhor o fluxo de dados no aplicativo, garantindo a estabilidade da experiência de compra.
Agora, vamos dar uma olhada em algumas características básicas do C-Shopping. Desde exibições claras de navegação e produto até recursos convenientes de carrinho de pesquisa e compras, todos os detalhes foram cuidadosamente projetados para proporcionar aos usuários uma agradável experiência de compra.
Lado do usuário
| Módulo | Dispositivos de mesa | Dispositivos móveis |
|---|---|---|
| Lar | ||
| Categoria secundária | ||
| Categoria de terceiro nível | ||
| Detalhes do produto | ||
| Conecte-se | ||
| Registrar | ||
| Procurar | ||
| Carrinho de compras | ||
| Confira | ||
| Perfil de usuário | ||
| Minhas ordens | ||
| Meus comentários | ||
| Gerenciamento de endereços | ||
| Visitas recentes |
Lado administrador
| Módulo | Dispositivos de mesa | Dispositivos móveis |
|---|---|---|
| Conecte-se | ||
| Centro de Administração | ||
| Gerenciamento de usuários | ||
| Gerenciamento de categoria | ||
| Árvore de gerenciamento de categoria | ||
| Gerenciamento de especificações | ||
| Gerenciamento de produtos | ||
| Gerenciamento de pedidos | ||
| Gerenciamento de revisão | ||
| Gerenciamento deslizante | ||
| Gerenciamento de banners |
Estrutura do projeto C-Shopping:
Explicação da estrutura -chave:
? APP : Código principal do aplicativo
? Componentes : componentes reutilizáveis de reação
? ajudantes : funções e ferramentas auxiliares
? Ganchos : ganchos de reação personalizados
? Modelos : Definições de modelo de dados
? Público : Recursos estáticos, como imagens, fontes, etc.
? Armazenamento : Configuração relacionada ao Redux State Management
? Estilos : arquivos de estilo
? UTILS : Utilitários gerais
...
Essa estrutura foi projetada para tornar o projeto organizado, fácil de manter e escalável. Cada seção é dividida com base em
funcionalidade e responsabilidades, facilitando a compreensão e a colaboração dos membros da equipe.
Ambiente de Desenvolvimento
Clone ou faça o download do repositório executando o seguinte comando no terminal:
git clone https://github.com/huanghanzhilian/c-shopping.git
Instale as dependências do projeto usando NPM ou YARN:
npm install
ou
yarn
Crie um novo arquivo .env do arquivo .env.example no diretório raiz do projeto para definir as variáveis de ambiente necessárias. Esta etapa é crucial (para upload da imagem para OSS):
NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
Instale o MongoDB na sua máquina local.
Execute o projeto:
npm run dev
Registre uma conta:
http://localhost:3000/register
Depois de criar uma conta, encontre sua conta no banco de dados e modifique o campo root para true e o campo role para admin. Isso concede que você acessa todos os recursos do painel de administração:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
Entrada do administrador: http: // localhost: 3000/admin
Em MongoDB, crie a categoria raiz:
mongo
use choiceshop
db.categories.insert({
"name" : "Featured Items",
"slug" : "choiceshop",
"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
"colors" : {
"start" : "#EF394E",
"end" : "#EF3F55"
},
"level" : 0
})
Implantação do Docker
O diretório raiz do projeto já está configurado com o Docker Compose. Depois de instalar o Docker, basta executar a implantação:
docker compose up -d --build
Sou um explorador de tecnologia, um aprendiz ansioso e um solucionador de problemas.
我是一个技术的探索者 ， 一个渴望学习的人 ， 一个解决问题的人。
Siga nossa conta oficial do WeChat para obter mais informações. Sinta -se à vontade para fornecer qualquer feedback ou sugestão abrindo um problema ou deixando uma mensagem na conta oficial. Você também pode me adicionar no WeChat para mais comunicação.
| Minha conta oficial do WeChat | Meu WeChat |
|---|---|
Mit
Copyright (C) 2024 Jipeng Huang
O C-Shopping é um projeto de código aberto, e recebemos mais desenvolvedores para ingressar em nossa comunidade. Você pode encontrar o código -fonte do projeto em nosso repositório do GitHub, sugerir melhorias ou contribuir para o desenvolvimento.
Se você estiver interessado no projeto, fique à vontade para ingressar em nossa comunidade e contribuir para o crescimento do projeto.
