administrador-de-ecommerce-nextjs
El sitio web de demostración ya no funciona debido a que PlanetScale retiró el plan gratuito.
Fecha de inicio: 26 de julio de 2023.
Descripción
El panel de administración de comercio electrónico con integración de Stripe es una sólida aplicación web diseñada para agilizar y mejorar la gestión de un sitio web de comercio electrónico. Desarrollado utilizando tecnologías de vanguardia como Next JS, TypeScript, Tailwind CSS, Shadcn UI, Planet Scale, Prisma, zustand, clerk auth, Cloudinary y Stripe, este panel integral proporciona a los administradores un poderoso conjunto de herramientas para supervisar y optimizar varios aspectos del tienda en línea.
Características clave
- El panel de administración permite a los administradores del sitio web crear, actualizar y eliminar información de la tienda.
- Los administradores pueden administrar de manera eficiente las vallas publicitarias o pancartas que aparecen en la página de inicio del sitio web. Pueden cargar, actualizar y eliminar carteles promocionales para atraer clientes y resaltar ofertas o ventas en curso.
- Con el panel de administración, administrar categorías, tamaños y colores de productos se vuelve muy sencillo. Los administradores pueden agregar, editar o eliminar categorías, tamaños y colores, lo que permite que el sitio web organice y muestre productos de manera eficiente.
- Para permitir una comunicación fluida entre la aplicación web front-end y el back-end, el panel incorpora rutas API. Esto garantiza que la información del producto se obtenga y muestre sin problemas en el sitio web de cara al cliente.
- El panel de administración utiliza la autenticación de secretario para una autenticación segura, lo que garantiza que solo el personal autorizado pueda acceder y administrar información confidencial.
- Con la integración de Planet Scale y Prisma, la aplicación se beneficia de una base de datos sólida y escalable, capaz de manejar inventarios de productos en crecimiento y aumentar el tráfico del sitio web.
- El corazón de cualquier sitio web de comercio electrónico radica en sus capacidades de gestión de productos. El panel de administración permite a los administradores agregar nuevos productos, actualizar los existentes, archivar productos agotados, marcar productos como productos destacados y eliminar productos que ya no están disponibles. Pueden establecer detalles del producto como nombre, categoría, precio, imágenes y otros atributos específicos del producto.
- La gestión eficiente de pedidos es crucial para cualquier sitio web de comercio electrónico. El panel proporciona herramientas integrales para ver, procesar y gestionar los pedidos entrantes.
- Integre perfectamente Stripe como pasarela de pago, lo que permitirá a los clientes realizar pagos en línea seguros y convenientes. Los administradores pueden ver el historial de transacciones y garantizar una experiencia de pago perfecta para los compradores.
Probando el proyecto
Para probar el proyecto, descargue el archivo zip y ábralo en el editor de su elección. Luego, ejecute npm install en la terminal para instalar las dependencias.
Después de instalar las dependencias requeridas, deberá crear un archivo .env en la raíz de la carpeta de su proyecto. Las variables de entorno requeridas son las siguientes.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
DATABASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
FRONTEND_STORE_URL=
STRIPE_WEBHOOK_SECRET=
Siga los pasos de la documentación oficial de Clerk, Planet Scale, Cloudinary y Stripe para obtener los valores de la variable de entorno. Después de completar los pasos anteriores, ejecute npm run dev para probar el proyecto.
Si no quiere pasar por todos los problemas, siempre puede probar el sitio web de demostración de este proyecto.
