KuraiTsukino / project3-frontend

A travel app made with React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend de la aplicación 🚀 Tsukino Travels 🚀

La aplicación 🚀 Tsukino Travels 🚀 es una aplicación en donde se podrán agregar lugares interesantes para visitar en los diferentes países de Europa.

Al abrir la página encontramos el Header con una barra de navegación que cuenta con:

  • 🌐 Logo de la página 🌐 El cual también es un botón que nos envía al Home.

  • 🏠 Tsukino travels. Home. 🏠

  • 🌇 Europe Countries 🌇 Página donde se observan los diferentes países.

  • 🏞 Places to visit 🏞 Página de todos los lugares.

  • 🎇 About 🎇 Breve reseña

  • 👩‍💻 Botón de login 👩‍💻 En este botón se observará la imagen que haya elegido el usuario en la página de editar imagen, si no elige ninguna se observará una imagen por defecto.

Cuenta con 5 páginas principales.

  • 🏠 Home 🏠

En donde encontramos los botones de "Log in" que es para accesar a la cuenta previamente realizada y "Register" que es para registrar una cuenta nueva.

En la página de 🚪 Log in 🚪 tenemos un formulario que nos pide el email y la contraseña del usuario que registramos. Si accedemos los datos correctamente, encontraremos la página de 👩‍💻 Perfil 👩‍💻

En la página de ✍️ Register ✍️ observamos un formulario que pide Nombre, email, contraseña y pide confirmar contraseña para la creación de un usuario.

  • 👩‍💻 Profile 👩‍💻

Aquí se encuentran los datos agregados como apellido y país en donde vive el usuario, así como un espacio para agregar una foto de perfil, la cual será mostrada en la imagen del header

  • 🏞 Europe Countries 🏞

En esta página observamos las banderas de todos los países de Europa, por el momento solo se observan estos países, si damos click en la bandera se accede a la página individual de cada uno encontrando la información de:

  • Capital 🛣
  • Moneda 💶
  • Idioma 💬
  • Aeropuertos 🛫

Así como una imagen representativa del país.

  • 🌇 Places to visit 🌇

Aquí encontraremos todos los lugares que han sido creados en la página, con una imagen, el nombre y nombre del país al que pertenece.

En la vista del lugar individual se observan sus datos de:

  • País donde se encuentra 🏞
  • Tipo de atracción 🏔
  • Costo 💶
  • Horario 🕰
  • Un comentario sobre la atracción 💬
  • Una imagen del lugar 📷
  • Un mapa al cual si le dan click envía a la página de google maps donde se observa con más detalle el mapa 🗺

También encontramos cuatro botones:

  • Editar lugar 🌇 Tenemos un formulario en el que podemos editar todos los datos de los lugares, al terminar de editar y guardar la información envía a la pagina de todos los lugares.

  • Borrar lugar ❌ Al oprimir este botón borra el lugar seleccionado.

  • Ver el resto de lugares 🌇 Regresa a la página de todos los lugares.

  • Otros países 🏞 Envía a la página de los países

  • About 🎇 Cuenta con un pequeño comentario sobre mí

🛠 Construido con 🛠

  • HTML
  • CSS. Tailwind.
  • ReactJS
  • JavaScript, JSX - Funciones CRUD
  • MongoDB - Base de datos
  • Netflify - Despliegue

Dependencias

  • React-Router-Dom
  • Tailwind
  • Axios

✒️ Autora ✒️

Kurai Tsukino aka Sandra Mena

Gracias totales

A Mike Nieva, K'ohnin y a Sam por su ayuda y enseñanzas invaluables 🥰

About

A travel app made with React


Languages

Language:JavaScript 98.2%Language:HTML 1.6%Language:CSS 0.2%