Pokemon FullStack JS

Desarrollo del:

Frontend

• VueJs v2
• Vuex, Vue Router
• JavaScript
• HTML, Sass, Animaciones
• Atomic Design
• Scroll Pagination
• NodeJs v20.9.0
• Uso de backend modular

Backend

• ExpressJs
• TypeScript
• NodeJs v20.9.0
• Arquitectura Hexagonal
• MongoDB
• Migraciones de base de datos

Despliegue

Método 1

Esta es la forma más sencilla, solo se necesita levantar el frontend y este hará uso del API https://pokeapi.co/ directamente.

  flowchart LR
    Frontend -- Uso de Backend --> PokéAPI

Loading

Para ello es necesario tener lo siguiente:

Requisitos

1. Tener NodeJs v20.9.0
2. Instalar vue2 de forma global

npm install -g @vue/cli

3. Ubicado en /frontend, copiar el .env.example y crear un nuevo fichero llamado .env. su contenido debe tener:

VUE_APP_BACKEND=POKEAPI

VUE_APP_POKEAPI=https://pokeapi.co/api/v2
VUE_APP_APIREST=http://localhost:3000

El valor POKEAPI de VUE_APP_BACKEND hará que el frontend use para el backend el valor de VUE_APP_POKEAPI.

4. Instalar las dependencias:

npm install

5. Levantar el proyecto en el puerto 8080 para el modo desarrollo:

npm run serve

O para producción:

npm run build

Método 2

Esta es la forma completa, se usará tanto el frontend, el backend como la base de datos de mongodb. La base de datos será alimentada con data obtenida del API https://pokeapi.co/.

  flowchart LR
    Frontend -- Uso de Backend--> Backend[Backend TypeScript]
    Backend -- Uso de BD --> transactionDatabase[(Database Mongo DB)]

Loading

Para levantar el proyecto es necesario tener lo siguiente:

Requisitos

1. Seguir los pasos anteriores para levantar el Frontend con la única diferencia que en el .env deberá quedar así:

VUE_APP_BACKEND=APIREST

VUE_APP_POKEAPI=https://pokeapi.co/api/v2
VUE_APP_APIREST=http://localhost:3000

El valor APIREST de VUE_APP_BACKEND hará que el frontend use para el backend el valor de VUE_APP_APIREST.

2. Ubicado en backend, copiar el .env.example y crear un nuevo fichero llamado .env. su contenido debe tener:

# Server
PORT=3000

# DB
MONGODB_URI=mongodb://localhost:27017/pokemondb
MONGODB_DATABASE=pokemondb

3. Instalar dependencias
4. Instalar typescript de forma global:

npm install -g typescript

5. Instalar migrate-mongo de forma global:

npm install -g migrate-mongo

6. Levantar el proyecto en el puerto 3000 (o como esté en el env) para modo desarrollo:

migrate-mongo up

npm run dev

O para producción:

npm run build

migrate-mongo up

npm start

Vista previa del frontend

Se deberia tener esta misma vista tanto si se usa el Método 1 o el Método 2