Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carolinapalacios/e-commerce-storydots
E-commerce
https://github.com/carolinapalacios/e-commerce-storydots
firebase firebase-auth nest prisma react tailwindcss ts-rest typescript vite zod zustand
Last synced: 17 days ago
JSON representation
E-commerce
- Host: GitHub
- URL: https://github.com/carolinapalacios/e-commerce-storydots
- Owner: CarolinaPalacios
- Created: 2024-03-19T03:51:22.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-25T04:08:27.000Z (10 months ago)
- Last Synced: 2024-11-14T07:47:30.744Z (3 months ago)
- Topics: firebase, firebase-auth, nest, prisma, react, tailwindcss, ts-rest, typescript, vite, zod, zustand
- Language: TypeScript
- Homepage: https://e-commerce-storydots-challenge.web.app/
- Size: 2.16 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛒 E-commerce-storydots
E-commerce desarrollado como Challenge para StoryDots.
[](https://e-commerce-storydots-challenge.web.app/)
**Desarrollado con:**
[](https://nestjs.com/)
[](https://www.postgresql.org)
[](https://prisma.io) [](https://www.typescriptlang.org)
[](https://vitejs.dev) [](https://reactjs.org)
[](https://tailwindcss.com)
[](https://github.com/colinhacks/zod)
[](https://e-commerce-storydots-challenge.web.app/)
## Descripción
E-commerce Storydots es una aplicación web diseñada para gestionar productos de una tienda en línea. Permite a los usuarios crear, editar, eliminar y ver productos disponibles en el catálogo. El proyecto está dividido en un backend desarrollado con NestJS y un frontend construido con ReactJS.
## Funcionalidades
### Backend (NestJS)
- Gestión de productos: Crud completo para la gestión de productos.
- Uso de Prisma: ORM para interactuar con una base de datos PostgreSQL.
- Uso de ts-rest/nest: Definición de contratos utilizando TypeScript y Zod para la validación de datos en las solicitudes y respuestas.
### Frontend (ReactJS)
- Interfaz de usuario intuitiva: Permite a los usuarios navegar fácilmente por las diferentes secciones de la aplicación.
- Uso de ts-rest/react-query: Definición de contratos utilizando TypeScript y Zod para la validación de datos en las solicitudes y respuestas.
- Estado global: Utiliza Zustand para la gestión del estado de la aplicación de forma eficiente y sencilla.
- Estilos con TailwindCSS: Usa Tailwind CSS para una rápida y fácil personalización de la interfaz de usuario.
## Cómo levantar el proyecto en local
### Requisitos previos
- [Node.js](https://nodejs.org): Asegurate de tener Node.js 20 LTS o superior instalado en tu sistema. Para instalarlo puedes acceder al sitio oficial de Node.js.
- [pnpm](https://pnpm.io): Este proyecto usa pnpm como un gestor de paquetes. Una vez que tienes Node.js instalado, instala globalmente pnpm con el siguiente comando:
```bash
npm i -g pnpm
```
- [NestJS](https://nestjs.com): NestJS se usa como framework de Node.js para el backend de este proyecto. Para instalarlo globalmente utiliza el siguiente comando:
```
npm i -g @nestjs/cli
```
Esto instalará la interfaz de línea de comandos de NestJS globalmente en tu sistema, permitiendo utilizarla para generar proyectos y componentes NestJS.
Alternativamente, si prefieres no instalarlo, este proyecto ya lo tiene instalado como una dependencia en el archivo `package.json`, por lo que podrías usarlo ejecutando `npx nest` en lugar de `nest`, cambiando los scripts del proyecto.
## 💾 Instalación
[Clonar el repositorio](https://github.com/CarolinaPalacios/e-commerce-storydots): Clona, descarga o haz fork del repositorio.
```bash
# Clonar el repositorio
git clone https://github.com/CarolinaPalacios/e-commerce-storydots.git
# Navegar al directorio
cd e-commerce-storydots
# Navegar al directorio backend
cd backend
# Instalar las dependencias
pnpm install
# Navegar al directorio frontend
cd ../frontend
# Instalar las dependencias
pnpm install
```
## 🚀 Configuración del entorno backend
- Navega hasta el directorio `backend`.
- Crea un archivo .env con las siguientes variables de entorno:
```bash
PORT=3000
DATABASE_URL= # URL de la base de datos, por ejemplo: postgresql://user:password@localhost:5432/db_name
```
- Genera los archivos de Prisma con el siguiente comando:
```bash
pnpm prisma db push
```
Esta generación asegura que los modelos y funciones de Prisma estén actualizados y se ajusten a la estructura de la base de datos.
- Ejecuta el servidor con el siguiente comando:
```bash
pnpm start:dev
```
Esto inicializa el servidor en modo de desarrollo, ya se puede acceder al mismo en http://localhost:3000/api.
Inicialmente, si ingresas a esta URL, estará la documentación del backend generada por Swagger, estos son los endpoints disponibles:
**Products**:
- GET /products: Obtiene todos los productos.
- GET /products/:id: Obtiene un producto especifico por su ID.
- POST /products: Crea un nuevo producto.
- PATCH /products/:id: Actualiza un proyecto por su ID.
- DELETE /products/:id: Elimina un proyecto por su ID.
**Brands**:
- GET /brands: Obtiene todas las marcas.
- GET /brands/:id/products: Obtiene todos los productos de una marca.
Adicionalmente si quieres iniciar el proyecto con productos, puedes usar Postman u otra interfaz de usuario para crear algunos en la base de datos, para esto, creé una función en AppController que crea los datos de prueba.
Haciendo una petición de tipo POST a http://localhost:3000/api/data/load se creará un conjunto de datos de prueba.
## 🖌️ Configuración del entorno frontend
- En otra terminal navega hasta el directorio `frontend`.
- Crea un archivo .env con la siguiente variable de entorno:
```bash
VITE_API_BASE_URL= # URL del backend, para local: http://localhost:3000/api
```
- Ejecuta el servidor con el siguiente comando:
```bash
pnpm dev
```
Esto inicializa el cliente en modo de desarrollo, ya se puede acceder al mismo en http://localhost:5173.
## Construcción de la aplicación
- Si quieres construir la aplicación backend, puedes hacerlo en el directorio `backend` con el siguiente comando:
```bash
pnpm start:prod
```
- Si quieres construir la aplicación frontend, puedes hacerlo en el directorio `frontend` con el siguiente comando:
```bash
pnpm build
```
---
### Extras
- Integración con Firebase: Creación de usuarios, autenticación y gestión de usuarios.
Esto está comentado tanto en el backend como en el frontend por errores del navegador al querer iniciar sesión con el popup de Google, pero se puede descomentar y probarlo ya que funciona localmente. Para usar la autenticación hay que crear un proyecto en Firebase desde la [consola](https://console.firebase.google.com/). La documentación te guiará para generar las credenciales, y además en el dashboard debes agregar como método de acceso el proveedor de autenticación de Google.
Guarda el archivo que te brinda Firebase y una vez que tengas las credenciales, puedes agregarlas en el archivo .env de la aplicación.
Para el backend necesitarás:
```bash
FIREBASE_PRIVATE_KEY= # el valor de private_key
FIREBASE_PROJECT_ID= # el valor de project_id
FIREBASE_CLIENT_EMAIL= # el valor de client_email
```
Para el frontend necesitarás:
```bash
VITE_FIREBASE_API_KEY= # el valor de API web (esto lo encuentras en la consola de Firebase)
VITE_FIREBASE_AUTH_DOMAIN= # el valor de auth_domain
VITE_FIREBASE_PROJECT_ID= # el valor de project_id
VITE_FIREBASE_STORAGE_BUCKET= # el valor de storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID= # el valor de messaging_sender_id
VITE_FIREBASE_APP_ID= # el valor de app_id
```
Y listo, puedes volver a iniciar la aplicación, deberías poder loguearte con el popup de Google y verás que sólo estando logueado podrías interactuar con el dashboard.
## 🤝 Ayuda
Si conoces alguna solución para el problema a la hora de construir la aplicación integrando Firebase, puedes contactar conmigo o puedes mandar un pull request y la estaré revisando 🙌.