/Refactory-Awesome-cards

Group layout project carried out in the Adalab Bootcamp

Primary LanguageSCSS

Awesome Profile Cards

Índice

1. Introducción

2. Descripción

3. Historias de usuario

4. Miembros del equipo


1. Introducción

En este proyecto hemos trabajado con un código heredado realizado con JavaScript y hemos hecho una migración del mismo a React. Asimismo hemos desarrollado un servidor web y trabajado con nuestra propia base de datos. Los objetivos principales de este proyecto eran por tanto, por un lado, lidiar con código heredado y ser capaces de refactorizarlo, así como saber identificar y generar los componentes de una página, separarlos y crear componentes visualmente similares a partir de estos, y por otro lado, trabajar con servidores y bases de datos.


2. Descripción

La página web consiste en:

  1. Una landing page.
  2. Una página de creación de la tarjeta.

Ambas páginas tienen un diseño responsive:

  • Móvil, menor de 768px

  • Tablet, entre 768px y 1200px

  • Desktop, a partir de 1200px


  • Tecnologías utilizadas:

css3 gulp html5 nodejs sass react react react react

  • Especificaciones

    • Uso de Sass para los estilos

    • Uso de mediaqueries para que el diseño sea adaptable al dispositivo

    • Desarrollo usando la estrategia mobile first

    • Uso de git para el control de versiones del proyecto, con ramas y pull-requests

    • Publicación del resultado en Internet usando GitHub Pages

    • Uso de React para la estructuración del JS de la aplicación

    • Transiciones y/o animaciones para mejorar interacciones con la aplicación

    • Navegación entre distintas páginas de la aplicación usando React router

    • Creación de una base de datos de tarjetas

    • Utilización de un motor de plantillas

    • Trabajo con servidor de estáticos

    • Trabajo con servidor de producción


3. Historias de usuario

  • Migración a react

    • Primer paso. Análisis del proyecto

    • Segundo paso. Maquetación con React de la página de la herramienta

    • Tercer paso. Versión completa con React

    • Cuarto paso. Mejoras finales

  • Servidores

    • Primer paso. API

    • Segundo paso. Servidor de estáticos

    • Tercer paso. Motor de plantillas

    • Cuarto paso. Bases de datos


4. Miembros del equipo

Alejandra Mejía

Claudia Berrocal

Macarena Peña

Silvia Días

Denise Overbeck