Proyectos & Portfolio ( Diseño + Desarrollo Web )

Portfolio...

1

Calculadora de gastos

REACT 17

Ejercicio para comprender como funciona react desde el lado del cliente, es decir, desde el navegador, modificando el DOM

  • Aplicación en la que sobre un presupuesto se añaden gastos y te indica el dinero que te queda para llegar a ese presupuesto, y se te pasas del presupuesto el dinero que debes.
1

2

Lista de tareas

REACT 17 / LOCAL STORAGE

Ejercicio un poco más complejo para comprender como funciona react desde el lado del cliente y como almacenar datos mediante la API localStorage del navegador.

  • Aplicación que permite crear una lista de tareas desde el navegador utilizando el almacenamiento local de éste, que incluye crear, editar y borrar tareas, así como seleccionar las completadas o mostrarlas u ocultarlas
2

3

Información de héroes

REACT 18 / JSON

Ejercicio con REACT, para entender como funcionan los Hooks y su librería para realizar el routing de una aplicación (react-router-dom), y como leer un archivo JSON para mostrar y buscar datos dentro de la aplicación, recorriendo el archivo JSON.

  • Curso de REACT de Fernando Herrera (Udemy)
3

4

Api con PokeApi.co

NEXT 13

Ejercicio con NEXT JS (Framework de REACT), para entender su sistema para generar layouts,rutas y generación de archivos estáticos,aparte de conocer como usarlo para traer información desde una API pública a la aplicación.También se hace uso del localStorage del navegador.

  • Curso de NEXT JS de Fernando Herrera (Udemy)
4

5

Cálculo de gastos

REACT 17 / FIREBASE

Ejercicio realizado con REACT, utilizando login y registro de usuarios con Firebase (Base de datos en la nube de Google),también, almacenando y extrayendo la información de la base de datos, y generando las vistas según la información a mostrar.

  • La aplicación consiste en introducir los gastos mensuales por categoría y fecha, y mostrar estos por fecha y categoría agrupados por día,también, se muestran los gastos totales por categoría.
5

6

Gestor de información

REACT 16 / FIREBASE

Esta es la aplicación más antigüa que realice con REACT (cuando REACT funcionaba con componentes de clase) y que habría que actualizar...

  • Curso de REACT Hooks y Firebase de Vaxi Drez (Udemy)
6

7

Blog de notas

REACT 18 / FIREBASE

Aplicación realizada con REACT...

  • Curso de REACT de Fernando Herrera (Udemy)
7

8

Calendario - gestión de tareas de equipo

REACT 18 / NODE / MYSQL

Aplicación realizada con REACT y NODE con una Base de Datos MySQL...

  • Curso de REACT + NODE de Fernando Herrera (Udemy), adaptando el código para ser utilizado con MySQL
8

9

Web estática

GATSBY / DATO CMS

Curso Gatsby: ...

  • Curso de REACT + NODE de Fernando Herrera (Udemy), adaptando el código para ser utilizado con MySQL
9

10

Lista de tareas para proyectos

REACT 17 / FIREBASE

En está aplicación puedes crear un proyecto y añadirle tareas, al seleccionar un proyecto concreto se visualizan las tareas de dicho proyecto, los proyectos y las tareas se pueden editar y borrar, si se borra un proyecto se borrarán todas las tareas de dicho proyecto, se pueden seleccionar tareas completadas o no completadas y ver el resultado de gastos e ingresos asociados a cada proyecto. Cuando se crea un proyecto o tarea se imprime la fecha y hora de su creación.

  • Aplicación web, antecesora de siguiente, pero creada con REACT 17, igualmente, creada con CSS (SASS), como se especifico con REACT 17 (Librería de JavaScript) y FIREBASE (base de datos en la nube de Google). Su diseño no se adapto para dispositivos móviles
10

11

Agenda de tareas

REACT 18 / FIREBASE

En está aplicación se pueden crear y gestionar tareas por categoría y color (se incluyen las funciones de editar, borrar tareas, seleccionar tareas por categoría y/o tareas completadas o no completadas u ordenar tareas por orden de prioridad, en conjunto o por categoría). También, se ha añadido un calendario (ya que se pueden selecionar un rango de fechas para la realización de cada tarea) y una funcionalidad para calcular el gasto o ingreso por categoría.

  • Aplicación web creada con CSS (SASS), REACT 18 (Librería de JavaScript) y FIREBASE (base de datos en la nube de Google). Su diseño no se adapto para dispositivos móviles.
11

12

eCommerce

NEXT 12 / STRAPI

Aplicación realizada con NEXT JS (Framework de REACT) con STRAPI(CMS) como Backend y Mongo DB como Base de Datos...

  • Curso de NEXT JS - crea tu tienda online de Agustín Navarro Galdón (Udemy)
12

13

eCommerce

NEXT 13 / MONGO DB

Aplicación realizada con NEXT JS (Framework de REACT), con Docker y Mongo DB como Base de Datos...

  • Curso de NEXT JS de Fernando Herrera (Udemy)
13

14

Mapa en tiempo real

REACT 17 / SOCKETS IO

Aplicación realizada con REACT y NODE, con la librería de SOCKETS_IO, para crear aplicaciones en tiempo real...

  • Curso de REACT - aplicaciones en tiempo real con SOCKET_IO de Fernando Herrera (Udemy)
14