Giter VIP home page Giter VIP logo

pi-countries-main's Introduction

Objetivos del Proyecto

  • Construir una App utlizando React, Redux, Node y Sequelize.
  • Aprender a mejorar las prácticas.
  • Aprender y practicar el workflow de GIT.
  • Usar y practicar testing.

Versiones minimas para funcionar correctamente:

  • Node: 12.18.3 o mayor
  • NPM: 6.14.16 o mayor

Versiones de frameworks usadas:

  • react: 17.0.1
  • react-dom: 17.0.1
  • react-router-dom: 5.2.0
  • redux: 4.0.5
  • react-redux: 7.2.3

IMPORTANTE: Versiones mas actuales podrían presentar configuraciones diferentes respecto a las versiones en las que venimos trabajando durante el bootcamp.

En la api es necesario un archivo .env con los siguientes datos:

PORT=3001 // puerto en que escuchará las peticiones
DB_USER=*User* // usuario de la base de datos
DB_PASS=*Password* // contraseña de la base de datos
DB_BD=*Name* // nombre de la base de datos
DB_HOST=*localHost* // host de la base de datos

Es necesario una base de datos de PostgreSQL ya que con lo que trabaja este proyecto

Idea principal

La idea general es crear una aplicación en la cual se pueda ver información de distintos paises utilizando la api externa restcountries y a partir de ella poder, entre otras cosas:

  • Buscar paises
  • Filtrarlos / Ordenarlos
  • Crear actividades turísticas

Tecnologías necesarias a inplementar

  • React
  • Redux
  • Express
  • Sequelize - Postgres

Base de datos

Modelos

  • País con las siguientes propiedades:
    • ID (Código de 3 letras) *
    • Nombre *
    • Imagen de la bandera *
    • Continente *
    • Capital *
    • Subregión
    • Área
    • Población
  • Actividad Turística con las siguientes propiedades:
    • ID
    • Nombre
    • Dificultad (Entre 1 y 5)
    • Duración
    • Temporada (Verano, Otoño, Invierno o Primavera)

La relación entre ambas entidades debe ser de muchos a muchos ya que un país puede contener varias actividades turísticas y, a su vez, una actividad turística puede darse en múltiples países. Por ejemplo una actividad podría ser "Ski" que podría ocurrir en Argentina y también en Estados Unidos, pero a su vez Argentina podría también incluir "Rafting".

Backend

Se debe desarrollar un servidor en Node/Express con las siguientes rutas:

  • GET /countries:
    • En una primera instancia deberán traer todos los países desde restcountries y guardarlos en su propia base de datos y luego ya utilizarlos desde allí (Debe retonar sólo los datos necesarios para la ruta principal)
    • Obtener un listado de los paises.
  • GET /countries/{idPais}:
    • Obtener el detalle de un país en particular
    • Debe traer solo los datos pedidos en la ruta de detalle de país
    • Incluir los datos de las actividades turísticas correspondientes
  • GET /countries?name="...":
    • Obtener los países que coincidan con el nombre pasado como query parameter (No necesariamente tiene que ser una matcheo exacto)
    • Si no existe ningún país mostrar un mensaje adecuado
  • POST /activities:
    • Recibe los datos recolectados desde el formulario controlado de la ruta de creación de actividad turística por body
    • Crea una actividad turística en la base de datos, relacionada con los países correspondientes

Frontend

Pagina inicial: Debe contener

  • Alguna imagen de fondo representativa al proyecto
  • Botón para ingresar al home (Ruta principal)

Ruta principal: debe contener

  • Input de búsqueda para encontrar países por nombre

  • Área donde se verá el listado de países. Al iniciar deberá cargar los primeros resultados obtenidos desde la ruta GET /countries y deberá mostrar su:

    • Imagen de la bandera
    • Nombre
    • Continente
  • Botones/Opciones para filtrar por continente y por tipo de actividad turística

  • Botones/Opciones para ordenar tanto ascendentemente como descendentemente los países por orden alfabético y por cantidad de población

  • Paginado para ir buscando y mostrando los siguientes paises, 10 paises por pagina, mostrando los primeros 9 en la primer pagina.

Ruta de detalle de país: debe contener

  • La ruta debe contener (nombre, código de país de 3 letras y continente)
  • Código de país de 3 letras (id)
  • Capital
  • Subregión
  • Área (Mostrarla en km2 o millones de km2)
  • Población
  • Actividades turísticas con toda su información asociada

Ruta de creación de actividad turística: debe contener

  • Un formulario controlado con JavaScript con los siguientes campos:
    • Nombre
    • Dificultad
    • Duración
    • Temporada
  • Posibilidad de seleccionar/agregar varios países en simultáneo
  • Botón/Opción para crear una nueva actividad turística

Es requisito que el formulario de creación esté validado con JavaScript. Por ejemplo: Que el nombre de la actividad no pueda contener símbolos, que la duración no pueda exceder determinado valor, etc.

pi-countries-main's People

Contributors

angelpm9506 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.