/ReactApi-Start-Wars

Primary LanguageJavaScript

Sprint 8 React Star Wars API📌

Introducción🚀

El proyecto "Start Wars API", es una aplicación web que gestiona a través de una llamada a API en JavaScript para cargar y mostrar una lista de datos de naves, personajes y peliculas.Los usuarios podrán ver la lista de naves y personejes a través de routes. Los usuarios podrán generar Login en LocalStorage.

Objetivos de la práctica🛫

1.- Aplicar el Clean Arquitecture.

2.- Aplicar testing a través de React Testing Library.

3.- Repasar arquitectura en componentes(proceso de contrucción de components y su vinculación),

4.- Repasar Hooks (usestate, useEffect y props de React).

5.- Repasar styled-components.

6.- Utilizar localStorage

7.- Utilizar React-Router-DOM. 8.- ConsumO de datos de una API.

Estructura 📚

  • Requisitos Funcionales 🎯:

    • En pantalla principal mostrar listado de naves.
    • En portadase muestra una vista con los eventos ordenados del más cercano al más lejano en el tiempo.
    • Crear la ficha de cada nave, y mostrar todos susdetalles. El usuario podrá acceder a los detalles de cada nave dando click en cada una de la snaves del listado.
    • Implementar un botón al final del listado de naves, con el texto "view more", que permitá obtener más naves del servidory que se agregarán al listado de naves mostradas al usuario.
    • Modernizar el sitio web. Cambiar los estilos que consideremos pertinentes. El único criterio es que se parezca lo máximo posible a la web oficial de Star Wars.
    • Implementar una pàgina inicial de Bienvenida, y mediante un botón, se podrá acceder a la página principal de naves. Es necesario usar routing de React.
    • Implementar una pantalla de login y register, en las cuales mediante localstorage, se puedan registrar y loguear. En este apartado con lograr mostrar el resultado del login/registo por consola es suficiente.
    • Crear test unitarios de al menos tres componentes.

Comenzando 🚀

Estas instrucciones te permitirán obtener una copia del proyecto en funcionamiento en tu ordenador local, para propósitos de desarrollo y pruebas:

Abre la terminal y ejecuta:

  1. Clone git https://github.com/belcar-ceci/S8.-React-Start-Wars para descargar el proyecto, realiza un fork.

Install

  • npm install
  • npm install --save styled-components

🚀 Proyecto en producción

Dónde encontrar el proyecto en producción:

Versión Desktop 🛰️

animated

Dependencias 🚁

Para el proyecto se utiliza

  • Node Modules.
  • Styled-components.
  • React Router DOM.
  • ReactPlayer.
  • React Testing Library.
  • CSS
  • JS
  • HTML
  • The Star Wars API👾

Herramientas 🧰

  • Miró
  • Trello

Autores🌻

  • Cecilia Carbajal.

Gratitud 🎁

  • Comenta a otros sobre este proyecto 📢 .
  • Apoya nuestros proyectos 🐈‍⬛.
  • Hecho con ❤️ por Ceci Carbel 🐱

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.