https://github.com/luisventurae/pokemon-fullstack
Web App de tarjetas pokemon con su descripción y características. Incorpora buscador local y paginador en scroll
https://github.com/luisventurae/pokemon-fullstack
atomic-design backend expressjs frontend fullstack-javascript hexagonal-architecture javascript migrate-mongo mongodb nodejs pokemon-api sass scroll-pagination typescript vue-router vuejs2 vuex
Last synced: 6 months ago
JSON representation
Web App de tarjetas pokemon con su descripción y características. Incorpora buscador local y paginador en scroll
- Host: GitHub
- URL: https://github.com/luisventurae/pokemon-fullstack
- Owner: luisventurae
- Created: 2023-12-16T08:36:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-21T22:08:58.000Z (almost 2 years ago)
- Last Synced: 2025-02-13T15:27:15.213Z (8 months ago)
- Topics: atomic-design, backend, expressjs, frontend, fullstack-javascript, hexagonal-architecture, javascript, migrate-mongo, mongodb, nodejs, pokemon-api, sass, scroll-pagination, typescript, vue-router, vuejs2, vuex
- Language: TypeScript
- Homepage:
- Size: 396 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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/](https://pokeapi.co/) directamente.
```mermaid
flowchart LR
Frontend -- Uso de Backend --> PokéAPI
```
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:
```bash
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/](https://pokeapi.co/).
```mermaid
flowchart LR
Frontend -- Uso de Backend--> Backend[Backend TypeScript]
Backend -- Uso de BD --> transactionDatabase[(Database Mongo DB)]
```
Para levantar el proyecto es necesario tener lo siguiente:
#### Requisitos
1. Seguir los [pasos anteriores](#requisitos) para levantar el Frontend con la única diferencia que en el `.env` deberá quedar así:
```bash
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:
```bash
# 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](#método-1) o el [Método 2](#método-2)