TesloShop

E-commerce desarrollado con Next.js 14 y con una base de datos escalable en PostgreSQL. Incluye autenticación de usuarios y pagos de prueba incorporados con PayPal.

Configuración del Entorno de Desarrollo

1. Clonar el repositorio:

   git clone https://github.com/Starklord17/TesloShop.git
   cd teslo-shop

2. Crear una copia del archivo .env.template y renombrarlo a .env. Luego, configurar las variables de entorno según tu configuración local.

3. Instalar las dependencias:

   pnpm install

4. Levantar la base de datos con Docker:

   docker compose up -d

5. Ejecutar las migraciones de Prisma:

   npx prisma migrate dev

6. Ejecutar el seed para poblar la base de datos:

   pnpm run seed

7. Limpiar el localStorage del navegador para evitar conflictos de datos anteriores.

8. Correr el proyecto en modo desarrollo:

   pnpm run dev

---

Deploy en Vercel

https://max-teslo-shop.vercel.app/

---

Tecnologías Utilizadas

El proyecto utiliza las siguientes tecnologías y herramientas:

Principales

• Next.js: Framework de React para el desarrollo de aplicaciones web.
• React: Biblioteca de JavaScript para la construcción de interfaces de usuario.
• TypeScript: Lenguaje de programación que se basa en JavaScript, añadiendo tipos estáticos.
• Prisma: ORM (Object-Relational Mapping) para bases de datos.
• PostgreSQL: Sistema de gestión de bases de datos relacional.
• TailwindCSS: Framework de CSS para estilos rápidos y eficientes.
• Docker: Plataforma para desarrollar, enviar y ejecutar aplicaciones en contenedores.

Autenticación y Autorización

• NextAuth.js: Solución de autenticación para Next.js.

Gestión de Estado

• Zustand: Pequeña biblioteca de gestión de estado para React.

Formularios y Validación

• React Hook Form: Biblioteca para el manejo de formularios en React.
• Zod: Biblioteca de validación y análisis de esquemas para TypeScript.

Otros

• clsx: Utilidad para construir strings de clases condicionales.
• bcryptjs: Biblioteca para hashing de contraseñas.
• Cloudinary: Servicio de gestión de imágenes y videos en la nube.
• Swiper: Biblioteca para crear sliders y carruseles modernos.
• React Icons: Conjunto de íconos populares para React.
• PayPal SDK: Integración con PayPal para pagos.

Desarrollo y Herramientas

• ESLint: Herramienta para encontrar y arreglar problemas en el código JavaScript.
• PostCSS: Herramienta para transformar estilos con plugins de JavaScript.
• ts-node: Herramienta para ejecutar TypeScript directamente en Node.js.
• dotenv: Biblioteca para cargar variables de entorno desde un archivo .env.

---

Documentación

• Route Groups
• clsx
• Swiper React
• Prisma
• Best practice for instantiating Prisma Client with Next.js
• Route Segment Config
• Dynamic Metadata
• Prisma Docs - Tx - example
• Zod: TypeScript-first schema validation for product form

Recursos

• React Icons
• Zustand - Gestor de estado
• Swiper
• Open Graph Meta Tags
• Ngrok
• React Hook Form
• PayPal
• PayPal JS SDK
• paypal-js
• Cloudinary

Next Auth

• Next.js Authentication Tutorial
• NextAuth.js Documentation