Este proyecto es una p谩gina web que permite a los clientes de Rimac cotizar un seguro vehicular 馃殫.
Las(os) usuarias(os) por谩n ingresar sus datos y decidir el monto con el que deseean asegurar su veh铆culo. Adem谩s pueden agregar o quitar otras coberturas al plan del seguro vehicular.
- Puedes ver una demo del proyecto en el siguiente video: Ver video
- Puede visualizar el proyecto desplegado en el siguiente link: Hacking Challenge App
Nota: Todos los campos del primer formulario de ingreso son requeridos y deben cumplir con el siguiente formato:
- DNI: 8 d铆gitos num茅ricos (Ejemplo:
99900991).- Celular: 9 d铆gitos num茅ricos (Ejemplo:
525213649).- Placa: 3 primeros d铆gitos deben ser n煤mericos o letras. Debe continuar un gui贸n
-y los tres 煤ltimos d铆gitos deben ser num茅ricos (Ejemplo:ABC-369).
- Clonar el repositorio:
git clone https://github.com/Danielalab/hacking-challenge-rimac.git - Entrar a la carpeta:
cd hacking-challenge-rimac - Instalar las dependencias del proyecto:
npm install - Levantar el servidor local:
npm start
Se utiliz贸 React para renderizar las vistas contruyendo una single page aplication que ayuda a que la p谩gina cargue de forma m谩s r谩pida. Se utilizaron diversos Hooks para manejar el estado de la aplicaci贸n:
- useState: para manejar el estado interno de cada componente.
- useContext: para guardar informaci贸n global que se necesitaba en diversos componentes como la placa, nombre de cliente, etc.
Se utiliz贸 React Router para manejar las rutas de la aplicaci贸n. Hooks utilizados:
- useLocation
- useHistory
Se utiliz贸 para validar las propiedades de cada componente.
Se utiliz贸 Sass para construir los estilos de la aplicaci贸n y poder reutilizarlos usando clases.
Se utilizo Git para el control de versiones del proyecto de manera local y Github para alojar el proyecto de forma remota, crear un project, releases, issues.
Se utiliz贸 este framework de Css para poder contruir los estilos de la aplicaci贸n de forma m谩s r谩pido utilizando sus clases pre-construidas.
Herramiento de desarrollo para poder mantener un estilo legible en el c贸digo. Para este proyecto se hizo uso de la gu铆a de estilos de Airbnb.
Es una PaaS que nos permite desplegar la aplicaci贸n de forma r谩pida.
Para este proyecto se crearon 4 historias de usuario. Cada historia tiene sus criterios de aceptaci贸n y definici贸n de terminado. La planificaci贸n se encuentra en un tablero de Kanban alojado en un proyecto de Github Ver tablero.
Por cada Historia de usuario se creo una lista de tareas en issues (Ver lista de tareas). Antes de crear las historias de usuario se identifico la lista de posibles componentes de acuerdo al dise帽o entregado (Ver lista de componentes).
- HU1: Yo como cliente de Rimac debo poder iniciar sesi贸n de manera sencilla para cotizar mi seguro vehicular
- HU2: Yo como cliente de Rimac debo poder indicar los datos de mi veh铆culo y el monto de mi seguro
- HU3: Yo como cliente de Rimac debo poder agregar y quitar coberturas a mi plan de seguro vehicular
- HU4: Yo como cliente de Rimac debo poder ver una p谩gina de agradecimiento con los instrucciones finales
Para este proyecto se realizaron 3 realeases: