Skip to content

Latest commit

 

History

History
179 lines (115 loc) · 3.97 KB

README.MD

File metadata and controls

179 lines (115 loc) · 3.97 KB
Raw

Poke Feel

Es una aplicación web en la cual puedes tener un registro de tu sentimiento del día en base a unas preguntas y relaciona tu sentimiento con un pokemon (PokeFeel) usando inteligencia artificial del lado del servidor.

Demo

App Demo

Features

  • Light/dark theme
  • Local Storage sincronizado entre pestañas
  • Caché con Tanstack-query
  • Mobile First
  • Servidor funcional

Taller

Las carpetas enumerados están hechas con fines educativos para explicar ciertos conceptos de React JS, cada carpeta tiene su archivo README.MD en la cual está una lista de TODOS que contiene varios retos.

Carpeta Concepto Nivel
1-conceptos-basicos-react useState, props, render Basico
2-rutas-react react-router-dom, paginas Basico
3-asyncronia-basica-custom-hook useEffect, fetch, map, customHook Basico
4-asyncronia-media-componentes-controlados services, axios, inputs Intermedio
5-asyncronia-avanzada tanstack-query, caché Intermedio

Tech Stack

Client: React, TailwindCSS, Tanstack-query/@react, NextUI, React router dom

Server: Node, Express

Installation

BACK

Requisitos

NODE JS >= 20

Pasos

Primero tienes que instalar el proyecto back y ponerlo en funcionamiento, los pasos son:

  • Copiar el archivo .env.example y pegarlo en un archivo .env
  • Si quieres empezar con data, ve a la ruta /back/src/data , copia y pega los archivos *.example.json y sacale el example del nombre del archivo
  cd back
  npm install
  npm run dev

FRONT

Requisitos

NODE JS >= 20

Los pasos son:

  • Copiar el archivo .env.example y pegarlo en un archivo .env

Cada carpeta tiene su propio package.json por lo cual para instalar un proyecto front, estos son los comandos:

  cd <NOMBRE_CARPETA_FRONT>
  npm install
  npm run dev

Para hacer que Tailwind compile las clases es necesario ejecutar en otra terminal de la carpeta lo siguiente:

  npm run tailwind:watch

API Reference

Collection JSON

Question

Get all questions

  GET /question
Parameter Type Description
random boolean trae de forma aleatoria las preguntas
limit number cantidad de preguntas que trae

User

Get user

  GET /user

Create / Update user

  POST /user
Body Type Description
id UUID id generado desde el cliente
name string nombre del usuario
pokemon string nombre de su pokemon favorito
trainer string nombre de su entrenador favorito

Pokemon

Get all pokemons

  GET /pokemon

Get an random pokemon

  GET /pokemon/random

Trainer

Get all trainers

  GET /trainer

Feeling

Get all feels

  GET /feeling

Create an feel

  POST /feeling
Body Type Description
answers array listado de preguntas con su respuesta
model string model AI que va a evaluar el sentimiento

Delete all feels

  DELETE /feeling

Delete an feel

  DELETE /feeling/:id