Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eugenia1984/ohlalashoes

E-Commerce con Next, TypeScript, Mongoose
https://github.com/eugenia1984/ohlalashoes

Last synced: 13 days ago
JSON representation

E-Commerce con Next, TypeScript, Mongoose

Host: GitHub
URL: https://github.com/eugenia1984/ohlalashoes
Owner: eugenia1984
Created: 2023-11-13T13:52:20.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2023-11-13T17:40:03.000Z (about 1 year ago)
Last Synced: 2024-11-10T15:44:46.550Z (2 months ago)
Language: TypeScript
Size: 35.8 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Trabajo Final para Tecnicatura Universitaria en Programación

---

## Integrantes y Roles

| Integrante | Rol |
| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [**Calle, Sonia**](https://github.com/SoCalle) | Analista Funcional (realiza la documentación Funcional del proyecto) / Scrum Master / Tester QA (documentar casos de prueba durante el desarrollo) / FrontEnd - BackEnd Developer / Base de Datos |
| [**Costa, María Eugenia**](https://github.com/eugenia1984) | Team Lead / Diseñadora UX/UI (realiza la documentación de Diseño y presentación) / Documenta el desarrollo en el README del proyecto en GitHub y en la Wiki / FrontEnd - BackEnd Developer / Base de Datos |
| [**Alsina, Maximiliano**](https://github.com/MalsinaG) | Product Owner / Realizara el video final de presentación / FrontEnd - BackEnd Developer / Base de Datos |
| [**Matias Alancay**](https://github.com/matias9486) | FrontEnd - BackEnd Developer / Base de Datos |

---

## Links

| Links |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [ Brief](https://docs.google.com/document/d/1LPc0LTbNF5unnrfiF8R59yl9BBKEm1BsEWLsPGhDPJI/edit?usp=sharing) |
| [ Documentación funcional](https://docs.google.com/document/d/1YNPMAWqXpl7aj9xLWDiIT1L7vwaxbv-jqRyhpXVV4Hc/edit?usp=sharing) |
| [ Mapa del sitio](https://docs.google.com/document/d/1Ec3KNFZzIzSQiBec-16NTbqHis8xm4VU2E9OXlZHgHQ/edit?usp=sharing) |
| [ Presentación](https://www.canva.com/design/DAFuEnIx6ZQ/WqMlVRlpdpPYe6gUj71rOw/edit?utm_content=DAFuEnIx6ZQ&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) |
| Video (en construcción) |

---

## Tecnologías

| Front End y Back End |
| -------------------- |
| **HTML5** |
| **CSS3** |
| **JavaScript** |
| [ **TypeScript**](https://www.typescriptlang.org/) |
| [ **React**](https://react.dev/) y **react-dom** |
| [ **Material UI**](https://mui.com/material-ui/): @emotion/react - @emotion/styled - @mui/material - @mui/icons-material - @mui/x-data-grid |
| [ **NEXTjs**](https://nextjs.org/) |

| Manejo de formularios |
| --------------------- |
| [**react-hook-form**](https://react-hook-form.com/), para crear formularios eficaces, flexibles y ampliables con una validación fácil de usar. |

| Sliders |
| -------- |
| [**react-slideshow-image**](https://www.npmjs.com/package/react-slideshow-image), un simple componente de presentación de diapositivas construido con React que soporta efectos de deslizamiento, fundido y zoom. |

| Dependencias |
| ------------ |
| [**SWR**](https://swr.vercel.app/) (**stale-while-revalidate**), bibilioteca React Hooks para la obtención de datos, el componente obtendrá sonstante y automáticamente el último flujo de datos. Y la interfaz de usuario será siempre rápida y reactiva |
| [**js-cookie**](https://www.npmjs.com/package/js-cookie), para procesar las cookies en el Front End |
| [**NextAuth.js**](https://next-auth.js.org/), autentificación para Next.js |
| [**axios**](https://axios-http.com/), es un cliente HTTP basado en promesas para Node.js y el navegador. Es isomórfico (puede ejecutarse en el navegador y en Node.js con el mismo código base). En el lado del servidor utiliza el módulo http nativo de node.js, mientras que en el cliente (navegador) utiliza XMLHttpRequests. |
| [**react-paypal-js**](https://www.npmjs.com/package/@paypal/react-paypal-js), ofrece a los desarrolladores una solución que elimina la complejidad de cargar el SDK de JavaScript. Aplica las mejores prácticas por defecto para que los compradores obtengan la mejor experiencia de usuario posible. |
| [**jsonwebtoken**](https://jwt.io/), un estándar de Internet propuesto para crear datos con firma opcional y/o cifrado opcional , los tokens se firman utilizando un secreto privado o una clave pública/privada. |
| [**bcryptjs**](https://www.npmjs.com/package/bcrypt), una librería de Nodejs para hashear passwords |
| [ **Docker**](https://www.docker.com/) |
| [**Formidable**](https://www.npmjs.com/package/formidable), un módulo de Nodejs para parsear data, especialmente al subir archivos |
| [**Cloudinary**](https://cloudinary.com/), ofrece servicios de gestión de imágenes y vídeos en la nube. Permite a los usuarios cargar, almacenar, gestionar, manipular y distribuir imágenes y vídeos para sitios web y aplicaciones. |

| Base de datos |
| ------------- |
| [ **MongoDB**](https://www.mongodb.com/) |
| [ **Mongoose**](https://mongoosejs.com/) |

| Peticiones REST API |
| ------------------- |
| [ **Postman**](https://www.postman.com/) |

| Manejador de paquetes |
| ----------------------|
| [ **Yarn**](https://yarnpkg.com/) |

| Control de versiones |
| -------------------- |
| **Git** |
| **GitHub** |

---

## ¿Cómo ver el proyecto en local?

Este proyecto está creado con [**Next.js**](https://nextjs.org/) con el comando: [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

---

## Primeros pasos

### Antes que nada debes tener insatalado:

- **Node** de versión 16 en adelante

- **Yarn**

### Bajarte el código del repositorio, creando una carpeta en tu local, y luego:

```BASH
git clone https://github.com/CodeSystem2022/E-Commerce-ERROR4004-BIS.git .
```

Una vez creado entra dentro de la carpeta del proyecto.

### Instalar las dependencias (node_modules) con:

```BASH
yarn install
```

### Correr el servidor en local, con:

```bash
yarn dev
```

### Abrir [http://localhost:3000](http://localhost:3000) en tu navegador localmente, para ver la aplicación.

Primero de necesita la base de datos, en la terminal con el comando:

```bash
docker-compose up -d
```

-> El `-d`, significa detached

->A tener en cuenta para las configuraciones de Docker y Base de datos:

-El **service** es `ohlalalshoesdb`, en el archivo `.env`: `MONGO_URL=mongodb://localhost:27017/ohlalalshoesdb`.

-El nombre del **contenedor** es `holalashoes-database`, este nombre irá en el archivo **docker-compose.yaml** y es el nombre que veréen Docker

-El nombre del **volumen** es `mongo`.

### Configurar las variables de entorno

Copiar el archivo `.env.template` y renombrarlo a `.env`. Van a ver que tenemos las variables de GITHUB, para obtener **GITHUB_ID** y **GITHUB_SECRET**:

- registrarse y loguearse en GitHub

- Ir a `settings` > `developer settings` > `OAuthApps` > `NewOAuth App` y completar:

-GitHub App name: `Ohlala Shoes`

-Description: `Ohlala Shoes, an e-commerce to buy shoes. Created with Nextjs`

-HomePage URL: `http://localhost:3000`

-Callback URL: `http://localhost:3000`

-Copiamos el **Client ID** y hacemos click en **Generate a new clienten secret**, ambos datos los dejamos en el archivo `.env`

### MongoDB URL Local:

`MONGO_URL=mongodb://localhost:27017/ohlalalshoesdb`

### Reconstruir los módulos de node y levantar Next

```bash
yarn install
yarn dev
```

### Llenar la base de datos con información de pruebas

Llamar a: `http://localhost:3000/api/seed`

- Con **Postman** podemos hacer las peticiones REST FUL API, creandonos:

- GET: `localhost:3000/api/seed` para confirmar que tenemos bien la base de datos

#### Endpoints para ver todos los productos:

- **Todos los productos**: GET: `localhost:3000/api/products`

- **Productos por genero**: GET: `localhost:3000/api/products?gender=men` para ver los productos por genero masculino, los demás géneros posibles son: `women`, `kid` y `unisex`

- **Un producto por su slug**: GET: `localhost:3000/api/products/{slug}` slug es la parte que llega dinamica acorde al producto a mostrar un producto por el slug

- **Un producto por tag o por el titulo**: GET: `localhost:3000/api/search/{string}`

#### Endpoints de usuarios

- **Para ver todos los usuarios**: POST: `localhost:3000/api/user/login`. Y se debe emviar en el body:

```
email: string,
password: string
```

Para recibir de response el **token** con el **user** (email, role y name)

- **Para registrar un usuario**: POST: `localhost:3000/api/user/register`. Debemos enviarle en el body (por defecto lo creamos con rol de usuario, no de administrador):

```
{
"email": string,
"password" : string,
"name": string
}
```

Para recibir de response el **token** con el **user** (email, role y name)

- **Para validar tokens**: GET: `localhost:3000/api/validate-token`

#### Endpoints de ordenes

POST `localhost:3000/api/orders`

GET `localhost:3000/api/orders/pay`

#### Endpoints de administrador

- Para ver **el detalle**: GET `localhost:3000/api/admin/dashboard`, para recibir la response con la siguiente información: "numberOfOrders", "paidOrders", "numberOfClients", "numberOfProducts", "productsWithNoInventory", "lowInventory" y "notPaidOrders"

- Para ver **usuarios**: GET `localhost:3000/api/admin/users` y asi poder ver todos los usuarios. Y en el caso de necesitar modificar un role de un usuario: POST `localhost:3000/api/admin/users/{id}`, se debe psar como parametro el id del usuario que se desea modificar y el nuevo rol.

- Para ver las **ordenes**: GET `localhost:3000/api/admin/orders`

- Para ver **productos**: GET `localhost:3000/api/admin/products` para tener la lista de los productos

- Para ver **archivos subidos**: GET `localhost:3000/api/admin/upload` para tener las imagenes de productos que se suben al actualizar o crear un producto
---
---

## ¿Cómo nos organizamos?

- Utilizamos las metodologías **ágile** y el marco de trabajo **Scrum**

- Dividimos todo el proyecto en **3 Sprints** de **una semana** cada uno.

## SPRINT 1 - SEMANA 1 (20 OCT - 26 OCT):

Creación del **repositorio** en GitHub

Creación del **proyecto** con NEXTjs

Creación del **Navbar**, con: logo, links (Men, Women, Unisex, Kids), la lupa para buscar, el carro de compras y el Menú lateral, que tendrá: lupa de búsqueda, Profile, My orders, Men, Women, Kids, Unisex, Login, Exit y si es administrador el panel de adminsitrador con: Products, Orders, Users.

Creación de la HomePage con las tarjetas de los productos, que contienen la imagen del producto, el nombre y el precio

**Página con el detalle del producto**, que tiene: slider con las imagenes del producto, titulo, precio, boton de - y + para modificar la cantidad de productos, botones con los talles disponibles, botón para agregar al carro de compra y la descripción

**Página del carro de compras** (`/cart`), donde muestra la imagen del producto, el título, la talla, el precio, se pueden agregar o quitar productos. Y también se ve el resumen del pedido, con la suma total a abonar. Y también la **Página de carro de compras vacío** (`` /cart/empty), la cual tiene un ícono del carro de compras, el mensaje y un boton para volver.

**Página del la dirección de envío de la compra**(`/checkout/address`), con el título, varios campos apra completar la dirección de envío y el botón de confirmación.

**Página del resumen de la compra**(`/checkout/summary`), donde se ve en tarjetas el detalle con imagen, titulo, precio, talla y total de ítems de cada producto. Y se ve el resumend e la compra con la dirección de envío (que permite editar) y el total a pagar(también editable para modificar la cantidad de items desde el carro de compra) con el botón para confirmar la compra.

**Página de pago**(`/orders/{id}`) con un badge con informe si el pago esta ok o no. Debe tener tarjetas con los articulos a comprar y el resumen de la dirección de envío y el total a pagar.

**Página de historial de ordenes**(`/orders/history`), donde se ve en una tabla el historial de las ordenes, con los id, el nombre completo, si está pago o no y un link para ir al detalle de la orden.

**Página de iniciar sesión** donde se ingresa con correo electrónico y contraseña. Y hay un link por si no es un usuario registrado se pueda registrar.

**Página de crear cuenta** con nombre completo, correo electrónico y contraseña. Si ya tiene cuenta puede ir a la página de iniciar sesión.

Crear los **REST FULL API** para tener los endpoints de busqueda de **productos**: GET:`/api/products`, GET:`api/products?gender=men` para buscar por genero (men, women, kid, unisex), GET:`/api/products/{slug}` para buscar el producto por el slug y `/api/search/{string}` donde string es una palabra ya sea del titulo o de las tags

Crear la **pantalla de carga** par que el usuario sepa que se están buscando los productos

Crear las **páginas por genero**: hombre, mujer, niños y unisex, para que al hacer click en las opciones del navbar tengamos los productos por género

## SPRINT 2 - SEMANA 2 (27 OCT - 2 NOV):

Completamos las paginas de registro y login, teniamos solo la maquetación, ahora agregamos las validaciones con **React-hook-form**.

Cremaos los usuarios en la base de datos, utilizando **JSON Web Token**. Y los endpoint para ver a los usuarios (POST): `localhost:3000/api/user/login`, loguearse (POST): `localhost:3000/api/user/login` y validar token: (GET):`localhost:3000/api/validate-token`

Validaciones en el formulario de registro y login

Agregar la funcionalidad en el menú lateral para el **login** (que debe redirigir a la pagina de login) y **logout** (que debe desloguear al usuario). También manejar de modo condicional, para olo mostrar el **panel de adminsitrador** al usuario que esté logueado y tenga rol de admin.

Si no hay ítems en el carro de compras que se muestre la pagina de carro vacío y si tiene items que se muestre la pagina del carro de compras

Que la página de resumen de compra muestre la dirección de envío acorde a lo completado en el formulario.

Implementamos NextAuth.js y vamos a tener usuarios que pueden loguearse con sus datos de GitHub y usuarios de nuestra base de datos

Creamos en API para poder consultar los productos: GET: `http://localhost:3000/api/products` y tambien en las paginas `api/orders` para ver las ordenes

Creamos la base de datos para las **ordenes** de las compras de los productos en el carro de compras y completamos toda la parte funcional de la orden, para tener completos los pasos del carrito desde seleccionar un producto, pasando por agregarlo al carro de compras, completar el domicilio de envio, poder modificarlo y completar la orden

Se trabaja sobra la pagina `/orders/{id}` para tomar los datos del la orden y mostrarlos en pantalla.

Hacemos que la pagina `/orders/history` tenga las ordenes del usuario registrado, ya que antes estaba maquetada con los datos harcodeados.

## SPRINT 3 - SEMANA 3 (3 NOV - 10 NOV):

Botones de cobro de Paypal y tarjeta de crédito

REST Endpoints de cobros

Validar pago contra PayPal

Información de cómo se pagó una orden

Tokens de autenticación

Procesos automáticos después del cobro

**Panel administrativo** con pantallas de: Ordenes, Usuarios, Productos y Dashboard informativo, se aplican las validaciones respectivas para los nuevos endpoints y páginas para que solo Administradores puedan ingresar.

Con las nuevas páginas que solo puede ver el usuario con rol de **Admin** agregamos: manejo del **mantenimiento de productos**, con: carga de archivos, validaciones personalizadas con React Hook Form, manejo de File System, subida a Cloudinary desde nuestro backend, creación de productos, actualización de productos, eliminación de imágenes, carga múltiple, diferentes rest endpoints, manejo de Radios y Checks y
Watch y observables de React Hook Form

---

## Workflow de Git y GitHub

- La rama principal es: **main**

- En base a la rama main se crean las nuevas ramas para ir trabajando en las tareas. Una vez completada la tarea, dicha rama es unida a main y eliminada.

### ¿Cómo nombramos las ramas?

`feat/#-`, donde el **nro de issue** corresponde al issue creado y a la historia d eusuario en la que se trabaja y **tarea** es un nombre descriptivo de la tarea a realizar.

Si es una tarea solo de estilos en vez de `feat` utilizamos `style`, si es solo de documentación utilizamos `doc` y si es para arreglar un gub `bugfix`

---

## Estructura del proyecto

```
>.next
> api
> components
> admin
> cart
> layouts
> products
> ui
> context
> auth
> cart
> ui
> database
> hooks
> interfaces
> models
> mongo
> node_modules
> pages
> admin
> api
> admin
> auth
> orders
> products
> search
> user
> auth
> cart
> category
> checkout
> orders
> product
> search
> public
> logo
> products
> styles
globals.css
> theme
> utils
.env.template
.eslintrc.json
.gitignore
docker-compose.yaml
next-env.d.ts
next.config.js
package.json
README.md
tsconfig.json
yarn.lock
```

---

## Aprender más

Para aprender más de **Next.js**, te compartimos los siguientes recursos:

- [Next.js Documentation](https://nextjs.org/docs) - aprende sobre Next.js y API.

- [Learn Next.js](https://nextjs.org/learn) - un tutotial interactivo de Next.js.

Poder ver el repositorio: [the Next.js GitHub repository](https://github.com/vercel/next.js/) - el feedback y la contribución son bienvenidos.

---

## Para deployar en Vercel

La forma más sencilla de deployar tu proyecto de Next.js es usando [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme), los creadores de Nextjs.

Mirá: [Next.js deployment documentation](https://nextjs.org/docs/deployment) para más detalles.