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 versin Ver nueva versin 1

quaTu

Plataforma backend de e-commerce enfocado en MYPES, ofreciendo la creacin 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 imgenes.

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

Para comenzar

1. Clona el repositorio

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

2. Instala las dependecias

   npm install
   

3. Configura las variables de entorno (enviroment variables)

   Copia el archivo .env.example y genera .env en el directorio raz del proyecto:

   cp .env.example .env
   

4. 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
   

5. Ejecuta el servidor

   npm run dev
   

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

Se puede modificar la pgina modificando app/src/(public)/page.tsx. La pgina se modificar automticamente tras ediciones.

Creacin de tus propias querys

Ingresa a la API de quatu en API Quatu

1. Agrega tus querys

   Puedes personalizarlo en la API Quatu, a travs de la interfaz grfica de Apollo Client

   Luego en src/lib/graphql/query, crea

   export const TuQuery = gql(`
   
   ## COPIAS EL QUERY SEGN TUS NECESIDADES
   
   `)
   

   En TuQuery escoge un nombre a tu eleccin, este se utilizar en los prximos 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 mininscula para evitar.confuciones.
        name
        SKU
        UPC
        id
        image {
          id
          link
        }
      }
    `)
   

2. Genera el schema

   Antes de crear querys personalizadas, debes generar el schema, sino typescript arrojar errores de tipos.

   npm run codegen
   

3. 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 informacin, le recomendamos la documentacin de Apollo Client

Estamos actualizando constantemente esta seccin

Personalizacin

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

Este proyecto tiene detrs estilos mediante de Tailwind y la libreria de estilos NextUI

Adems, el proyecto utiliza una paleta de colores generados a travs de Material Theme Builder.

1. Selecciona el color primario
2. Escoge tus fuentes (No se utilizar en este proyecto)
3. Exportar theme
4. Descargar mediante .JSON
5. Extraer los objetos light y dark
6. Se utiliza tailwind para modo oscuro mediante dark:
7. Para establecer colores text-light-primary dark:text-dark-primary
8. Para mas informacin, revisar Dark mode y Customing Colors de Tailwind

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

Enva a produccin a travs de Vercel

La manera mas fcil de enviar a produccin este template es a travs de Vercel.

Revisa la documentacin de como llevar a produccin Next.js deployment documentation.

Demo

Puedes visitar la pgina Demo en Demo Page

Aprende ms

Para aprender ms 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 ms informacin o a travs de su pgina.