Quatu template Next.js 14

Plantilla de tienda utilizando quatu como Backend, potenciado por Next.js 14 y creado por Harkaysoft

Revisa los features de la nueva versión 🚀Ver nueva versión 1

quaTu

Plataforma backend de e-commerce enfocado en MYPES, ofreciendo la creación de infraestructura robusta, flexible y escalable.

Consigue tu cuenta demo en Quatu.xyz/registro.

Deja de pagar por comisiones, paga por el peso de tus imágenes.

Este es un repositorio donde se ubica el código fuente, este es realizado con Next.js

Para comenzar

Clona el repositorio

git clone https://github.com/harkaysoft/quatu-nextjs-14-template.git

Instala las dependecias
```
npm install
```
Configura las variables de entorno (enviroment variables)

Copia el archivo .env.example y genera .env en el directorio raíz del proyecto:
```
cp .env.example .env
```
Escribir el id de tu tienda en la variable correspondiente

Este ID se consigue en https://quatu.xyz/home
```
NEXT_PUBLIC_COMPANYID= n # Este ID se consigue en https://quatu.xyz/home
```
Ejecuta el servidor
```
npm run dev
```

Abre http://localhost:3000 en tu navegador para ver el resultado.

Se puede modificar la página modificando app/src/(public)/page.tsx. La página se modificará automáticamente tras ediciones.

Creación de tus propias querys

Ingresa a la API de quatu en API Quatu

Agrega tus querys

Puedes personalizarlo en la API Quatu, a través de la interfaz gráfica de Apollo Client

Luego en src/lib/graphql/query, crea

export const TuQuery = gql(`

## COPIAS EL QUERY SEGÚN TUS NECESIDADES

`)

En TuQuery escoge un nombre a tu elección, este se utilizará en los próximos pasos.

Quedando algo así: (Query de ejemplo)

export const TuQuery = gql(`  // Procura que el nombre de `TuQuery` sea similar al nombre de la query  ------
 query AllProductsByCompanyOnlyVisible($companyId: Int!) {   // <-- nombre de la query                <-----┘
   allProductsByCompanyOnlyVisible(companyId: $companyId) { // Te recomendamos que el subnombre de la query solo cambie la primera letra a mininúscula para evitar.confuciones.
     name
     SKU
     UPC
     id
     image {
       id
       link
     }
   }
 `)

Genera el schema

Antes de crear querys personalizadas, debes generar el schema, sino typescript arrojará errores de tipos.
```
npm run codegen
```

Obten la data

En un page.tsx o un componente, crea tu estructura de react de la siguiente manera:

'use client'

   ...

import { useQuery } from '@apollo/client'
import { TuQuery } from '@lib/graphql/query'

export default function Productos() {

const { loading, error, data, refetch } = useQuery(
   TuQuery,
   {
     variables: {
       companyId: Number(process.env.NEXT_PUBLIC_COMPANYID)
     }
   }
 )

return (

// Si es un elemento no iterable

  {data?.tuQuery?.name} // Este elemento estará tipado, por lo que te recomendamos seguir las sugerencias de typescript

  ...

// Si es un elemento iterable

  {data?.tuQuery?.price?.map((price, index) => ( // Este elemento estará tipado, por lo que te recomendamos seguir las sugerencias de typescript

    {price?.unitPrice}

  ))}
)

}

Para mas información, le recomendamos la documentación de Apollo Client

🚀Estamos actualizando constantemente esta sección

Personalización

Este template es de uso libre para los usuarios y externos que quieran conocer la plataforma backend e-commerce de quaTu.

Este proyecto tiene detrás estilos mediante de Tailwind y la libreria de estilos NextUI

Además, el proyecto utiliza una paleta de colores generados a través de Material Theme Builder.

Selecciona el color primario
Escoge tus fuentes (No se utilizará en este proyecto)
Exportar theme
Descargar mediante .JSON
Extraer los objetos light y dark
Se utiliza tailwind para modo oscuro mediante dark:
Para establecer colores text-light-primary dark:text-dark-primary
Para mas información, revisar Dark mode y Customing Colors de Tailwind

Finalmente, se recomienda utilizar NextUI, ya que la plantilla esta optimizada para esta.

Envía a producción a través de Vercel

La manera mas fácil de enviar a producción este template es a través de Vercel.

Revisa la documentación de como llevar a producción Next.js deployment documentation.

Aprende más

Para aprender más sobre el proyecto, hecha un vistaso a los siguientes recursos:

quaTu
GraphQL
Docs quaTu
Codegen Graphql
Apollo Client
Next.js Documentation - aprende sobre recursos de Next.js y APIs.
Tailwind
NextUI
Vercel OG
Framer motion

Contacto

El encargado de realizar modificaciones a este README.md es @jhangmez, contactar con él para más información o a través de su página.

Made with ❤️ by Jhan Gómez P.

Harkay S O F T

jhangmez/template-quatu