c shopping
Minimum MVP Publishing
¡Hola a todos! Bienvenido a C-Shopping, un viaje al mundo del comercio electrónico que revela las maravillas tecnológicas. Soy "Ji Xiaopeng", el autor de código abierto de C-Shopping, y hoy, le presentaré una plataforma de comercio electrónico de código abierto basada en las últimas tecnologías. ¡Exploremos juntos!
Proyecto de enlaces de demostración en vivo:
Project Gateway: https://github.com/huanghanzhilian/c-shopping.
React Aplicación de aplicaciones móviles nativas:
Project Gateway: https://github.com/huanghanzhilian/c-shopping-rn.
Si encuentra esto útil, por favor dame una estrella. Será un gran aliento.
Fondo:
Intención:
Abordar los problemas mencionados en el fondo.
Objetivo:
Cree un ecosistema completo y bien diseñado adecuado para la web.
En primer lugar, profundicemos en la tecnología detrás de C-shopping. He adoptado una serie de tecnologías de vanguardia, que incluyen Next.js, Tailwind CSS, UI sin cabeza, consulta Redux-Toolkit-Rtk, JWT y Docker, entre otros. Esto asegura que este proyecto no solo sea eficiente sino también altamente escalable. Estamos comprometidos a abordar algunos puntos débiles de las plataformas tradicionales de comercio electrónico: falta de estética, adaptación inadecuada a diferentes dispositivos y una interfaz monótona, entre otros. Al adoptar las últimas tecnologías y principios de diseño, C-shopping crea una experiencia de desarrollo técnico totalmente receptivo para los usuarios.
La choza C prioriza la experiencia del usuario. Nuestra interfaz no solo es hermosa sino también receptiva, lo que permite a los usuarios disfrutar de comprar fácilmente en cualquier dispositivo. Las funciones de gestión del centro personal y de pedidos también hacen que su experiencia de compra sea más personalizada y conveniente.
Uno de los aspectos más destacados del choque C es la adopción de una serie de tecnologías avanzadas, que incluyen Next.js, CSS de viento de cola, UI sin cabeza, consulta Redux-Toolkit-RTK, etc., que brindan a los usuarios un rendimiento y experiencia definitivo. No solo nos centramos en la estética, sino que también nos esforzamos por la excelencia en la tecnología.
Next.js impulsado como una experiencia rápida
C-shopping utiliza Next.js, lo que significa que la velocidad de carga de la página web no solo es increíblemente rápida, sino que también admite la representación del lado del servidor, proporcionando un nivel de suavidad sin precedentes.
? Diseño elegante de CSS CSS
Mediante el uso de CSS de viento de cola, C-shopping inyecta un sentido del estilo. Cada interfaz es exquisita, lo que hace que comprar sea una fiesta visual.
? Libertad y flexibilidad de la interfaz de usuario sin cabeza
O opta por el estilo de la interfaz de usuario sin cabeza, lo que brinda a los usuarios más libertad durante el proceso de compra. Ya no se limita a los marcos de interfaz de usuario tradicionales, abre más puertas para la personalización.
? Seguridad JWT sin preocupaciones
¡La seguridad es primordial! JWT se utiliza para la autenticación del usuario, proporcionando la mayor garantía para su comportamiento de compra, lo que le permite comprar con confianza.
? Despliegue de Docker Perfect
C-shopping abraza Docker, haciendo que la implementación del proyecto sea increíblemente simple. La contenedorización permite que todo el proyecto se ejecute perfectamente en diferentes entornos.
Redux Toolkit y RTK Consulty State Management Art
C-shopping utiliza Redux Toolkit y RTK Consult, haciendo que la gerencia estatal sea más relajada y agradable. Puede rastrear mejor el flujo de datos en la aplicación, asegurando la estabilidad de la experiencia de compra.
Ahora, echemos un vistazo a algunas características básicas del chop chop. Desde pantallas de navegación y productos claros hasta convenientes características de carreras de búsqueda y compras, cada detalle ha sido cuidadosamente diseñado para proporcionar a los usuarios una experiencia de compra agradable.
Del lado de usuario
| Módulo | Dispositivos de escritorio | Dispositivos móviles |
|---|---|---|
| Hogar | ||
| Categoría secundaria | ||
| Categoría de tercer nivel | ||
| Detalles del producto | ||
| Acceso | ||
| Registro | ||
| Buscar | ||
| Carro de la compra | ||
| Verificar | ||
| Perfil de usuario | ||
| Mis pedidos | ||
| Mis reseñas | ||
| Gestión de direcciones | ||
| Visitas recientes |
Lado de administrador
| Módulo | Dispositivos de escritorio | Dispositivos móviles |
|---|---|---|
| Acceso | ||
| Centro de administración | ||
| Gestión de usuarios | ||
| Gestión de categorías | ||
| Árbol de gestión de categorías | ||
| Gestión de especificaciones | ||
| Gestión de productos | ||
| Gestión de pedidos | ||
| Gestión de revisión | ||
| Gestión de controles deslizante | ||
| Gestión de banner |
Estructura del proyecto C-shopping:
Explicación de la estructura clave:
? Aplicación : Código principal de la aplicación
? Componentes : componentes reactivos reutilizables
? ayudantes : funciones y herramientas auxiliares
? Ganchos : ganchos reaccionados personalizados
? Modelos : definiciones de modelos de datos
? Público : Recursos estáticos, como imágenes, fuentes, etc.
? Almacén : Configuración relacionada con Redux State Management
? estilos : archivos de estilo
? Utilizaciones : servicios públicos generales
...
Esta estructura está diseñada para hacer que el proyecto sea organizado, fácil de mantener y escalable. Cada sección se divide en función de
Funcionalidad y responsabilidades, lo que facilita que los miembros del equipo entiendan y colaboren.
Entorno de desarrollo
Clon o descargue el repositorio ejecutando el siguiente comando en el terminal:
git clone https://github.com/huanghanzhilian/c-shopping.git
Instale dependencias del proyecto utilizando NPM o hilo:
npm install
o
yarn
Cree un nuevo archivo .env desde el archivo .env.example en el directorio raíz del proyecto para definir las variables de entorno requeridas. Este paso es crucial (para la carga de imagen a 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 MongoDB en su máquina local.
Ejecute el proyecto:
npm run dev
Registre una cuenta:
http://localhost:3000/register
Después de crear una cuenta, busque su cuenta en la base de datos y modifique el campo root a verdadero y el campo role para administrar. Esto le otorga acceso a todas las características del tablero de administración:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
Entrada del administrador: http: // localhost: 3000/administrador
En MongoDB, cree la categoría de raíz:
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
})
Implementación de Docker
El directorio de Project Root ya está configurado con Docker Compose. Después de instalar Docker, simplemente ejecute la implementación:
docker compose up -d --build
Soy un explorador de tecnología, un aprendiz ansioso y un solucionador de problemas.
我是一个技术的探索者 ， 一个渴望学习的人 一个解决问题的人。 一个解决问题的人。
Siga nuestra cuenta oficial de WeChat para obtener más información. Siéntase libre de proporcionar comentarios o sugerencias abriendo un problema o dejando un mensaje en la cuenta oficial. También puedes agregarme en WeChat para una mayor comunicación.
| Mi cuenta oficial de WeChat | Mi wechat |
|---|---|
MIT
Copyright (c) 2024 Jipeng Huang
C-shopping es un proyecto de código abierto, y damos la bienvenida a más desarrolladores para unirse a nuestra comunidad. Puede encontrar el código fuente del proyecto en nuestro repositorio de GitHub, sugerir mejoras o contribuir al desarrollo.
Si está interesado en el proyecto, no dude en unirse a nuestra comunidad y contribuir al crecimiento del proyecto.
