OneStopShop

Onestopshop

Advertir esta aplicación es un trabajo en progreso y no debe considerarse listo para la producción. Utiliza nuevas tecnologías que aún no son estables, como las acciones del servidor y la llovizna ORM.

Acerca de

Marketplace en línea construido con el enrutador de aplicaciones Next.js, que permite a los usuarios comprar productos, registrarse y enumerar sus propios productos para la venta. Los usuarios pueden crear un perfil de vendedor, administrar productos y cobrar el pago.

Características clave:

• Enrutador de aplicaciones next.js con componentes del servidor React
• Rutas interceptadas (con enrutamiento paralelo) para la vista rápida del producto y la creación de nuevos productos en el administrador
• Acciones del servidor para mutaciones
• PlanetScale MySQL Base de datos con Rackle Orm
• Carga para cargas de archivos typesfe (por ejemplo, imágenes de productos)
• Autenticación de usuario con empleado
• Integración de Stripe Connect para pagos del mercado (incluidas las tarifas de la plataforma y los pagos del vendedor)

Manifestación

Para demostrar la experiencia de pago, consulte con un número de tarjeta de prueba como 4242 4242 4242 4242 y use cualquier fecha futura para el vencimiento y cualquier 3 dígitos para el CVC. Solo podrá pagar con productos de vendedores que tienen una cuenta de rayas conectada a su tienda (como los juguetes de Tim). También puede crear su cuenta de vendedor y conectarla a Stripe para la experiencia completa.

Página de inicio

Editor de páginas de productos de administración

Ejecutando la aplicación

Siga los pasos a continuación para ejecutar la aplicación localmente:

1. Crea una base de datos MySQL.
2. Cree un archivo .env local con las variables según el archivo .env.example .
3. Ejecute npm install .
4. Genere una migración con npx drizzle-kit generate:mysql . Esto crea una nueva carpeta llamada migrations-folder en la raíz que contiene las consultas SQL para crear las tablas de la base de datos. Las migraciones se sincronizan automáticamente con la base de datos a través de la función de migración en db.ts Alternativamente, puede ejecutar las consultas SQL generadas a partir de la migración manualmente a través de la consola PlanetScala y eliminar la función de migración en db.ts
5. Ejecute npm run dev para abrir la aplicación en modo de desarrollo.

Eso es todo. Ahora debería poder acceder a la aplicación en http://localhost:3000 .

Notas

• Al generar la migración por primera vez con llovizna, asegúrese de que el migrations-folder en la raíz esté vacío o no exista.

Libro de cuentos

Storybook se ha agregado a esta aplicación, sin embargo, no se ha trabajado activamente desde la creación inicial de la aplicación. De todos modos, se puede ejecutar utilizando los siguientes comandos:

1. Ejecute el script de compilación del viento de cola para crear un archivo de salida para las clases de viento de cola (después de que se ejecute y completarse, es posible que tenga que 'matar' el terminal (es decir, ctrl + c ) para detener el proceso si no se detiene automáticamente).

   Comando: npm run tailwind

2. Ejecutar Storybook (esto utilizará el archivo de salida de viento de cola creado en el paso anterior y se ejecuta en http://localhost:6006 ).

   Comando: npm run storybook

Solución de problemas

Si ve un error relacionado con una tabla que no existe en PlanetScale (probablemente se lanza en app/(storefront)/(main)/page.tsx Como este es el primer uso de la base de datos), esto se debe a que la base de datos no está en sincronía. Revise los pasos de 'Ejecutar la aplicación' arriba y verifique la pestaña 'Insights' en PlanetScale para verificar que las consultas de creación de tabla se hayan ejecutado.

Que contribuye

Siéntase libre de hacer problemas y relaciones públicas para nuevas funciones/correcciones