Para ser una verdadera developer, se necesita tanto teoría como práctica. Siguiendo el consejo de mi amigo developer T, la forma más efectiva de luchar contra el síndrome del impostor es cogiendo soltura al programar, y eso sólo se consigue practicando. Hacer un proyecto como parte de un curso online es útil, pero no cuenta. Créeme, lo he probado. Así que si te decides a leer esta serie de posts, que sólo sea para coger ideas y/o hacer tu propia versión. Esa es la clave: si quieres aprender de verdad, no hagas un clon de mi "clon" 
. Empecemos.
Definición del proyecto
Voy a hacer un clon de JustETF, una web que recopila la mayoría de ETFs del mercado, los ordena y te da la posibilidad de crearte una cartera simulada de ETFs.
Objetivos
No voy replicar exactamente la web, sino sólo los conceptos básicos que me hagan practicar profundamente con JavaScript, sin frameworks. Así que ese es el objetivo, afianzar mis conceptos de vanilla JS.
También quiero ser capaz de documentar un proyecto correctamente, y por estoy haciendo este en forma de artículos.
Mi amigo T dice que debo ser capaz de trabajar con:
- API requests
- CRUD operations
- Login/logout
- 4-5 páginas de navegación
y hacerlo de una manera que respete las buenas prácticas, por ejemplo:
- Business logic separada de la UI
- HttpClient logic a parte
Especificaciones técnicas
Paso de complicarme con varias resoluciones de pantalla. Lo haré para que se vea bien en portátiles a partir de 14'' y para que funcione en Chrome. Si de paso funciona en otros navegadores, será de pura casualidad.
Herramientas, tecnologías y lenguajes
Voy a construir este proyecto usando:
- HTML5
- CSS3
- SASS
- JavaScript versión a partir de ES6
- Firebase
Investigación y conceptos iniciales
JustETF es una web completísima, con elección de idioma e indentificador de país en el que te encuentras. Para esto necesitaré una herramienta (library?) para ofrecer la posibilidad de cambiar de idioma y algún tipo de identificador de la ubicación del usuario. Ni idea de cómo hacer eso, ¿con las cookies? 
Soy un mar de dudas.
Es además una web de suscripción mensual, con 3 planes de precios, para análisis de ETFs.
Tiene una sección de tutoriales que parece más una página de FAQ donde buscar preguntas.
Su homepage es sencilla, con una hero image y un menú principal con 3 opciones + el login.
El ETF screener tiene mucha chicha:
A la izquierda tenemos los tipos de ETFs (categorías), según en lo que inviertan. Quizás sólo hago como 3 o 4 tipos.
Se debe de poder filtrar por categorías.
Creo que para mostrar datos voy a usar únicamente los ETFs de iShares y vanguard, para simplificar. No tengo ni idea de si es posible coger los datos de sus webs, y en todo caso, si necesito una API para eso, aunque supongo que sí.
De todas formas, como es información pública, creo que debería ser capaz de encontrarla en otro sitio, si no puedo cogerla directamente de sus webs. O puede que me esté columpiando 
.
Las columnas de la tabla, para simplicar, serán:
- nombre del ETF
- rentabilidad por dividendo (dividend yield)
- rentabilidad anualizada de los últimos 10 años (10 years annualised performance)
Al hacer clic sobre un ETF, se abre su página particular, donde se ve un gráfico de su rendimiento con varias opciones, por ejemplo con o sin dividendos.
Creo que necesitaré una library para mostrar gráficos chulos.
La página de Strategy builder consiste en darle al usuario opciones mediante filtros para que ponga sus datos y la web le proponga una estrategia de inversión. Supongo que aquí habrá que cruzar sus requisitos con la base de datos de ETFs y mostarle los que coincidan con su criterio.
La Academy son simplemente una serie de artículos 
aquí puedo añadir libros sobre inversión.
Por último tenemos la función de login. Ahí dentro un usuario puede:
- buscar ETFs y marcarlos como favoritos, pasando éstos a una lista
- crear una cartera de ETFs y ver su rendimiento
Y creo que ya está bien, ¿no?
Arquitectura
Aquí es donde definiré la estructura de la app y sus rutas. Sin influencias externas, voy a hacer lo que más lógico me parece, visualmente.
La home page será la ruta raíz (root) de fondo amarillo, las amarillas, sus rutas hijas, y las verdes, hijas de las amarillas.
Diseño de la UI
Como el diseño de JustETF ya está hecho, voy a hacer unos mockups ultra simplificados, porque al fin y al cabo, mi app va a ser mucho más sencilla que la app real. Aquí va.
Home page:
Página ETF screener:
Página ETF profile view:
Página Strategy builder:
Página Academy:
Página de login:
Página de signup:
Ahí está, una UI más simple que el mecanismo de un botijo.
Paleta de colores
En cuanto a los colores, he elegido esta paleta, que me ha llevado menos de 5 minutos, desde w3schools :
#ECA991
#DA3C02
#387562
#11986D
#082B20
Plan de acción
No se cómo titular esta sección, así que "plan de acción" me ha parecido lo más aproximado a lo que quiero escribir aquí. Quizás re-escriba este apartado en el futuro, no aquí, sino utilizando este título para re-definir un plan de acción a medida que vaya teniendo más claras las cosas.
Sé que no se debería hacer así, pero entre no hacer nada y hacer algo caótico, pero que funcione, me decanto sin duda por la segunda opción. Porque sé que no hay otra manera de convertirme en una gran frontend dev. Vale, creo que los pasos a seguir deberían ser algo así:
- Crear un proyecto en vsCode
- subirlo a GitHub para poder trabajar con control de versiones
- añadirle SASS
- crear la UI en diferentes archivos HTML, uno por cada pantalla.
- darle estilo con CSS
- añadir dummy data para ver el efecto
- añadirle funcionalidad con JS - la chicha del proyecto está aquí. No tengo ni idea de qué debería ser lo primero a programar. ¿Las rutas? seh.
- crear rutas de navegación
- ver qué API puedo usar...y usarla, sustituyendo así los datos estáticos por datos reales de la API. Aviso que a estas alturas ya he dicho "API" tres veces y aún no sé exactamente lo que es. Vas bien, Rocío.
- añadir posibilidad de hacer login y registro, con Firebase, supongo.
Bueno, ¿y ahora, qué? Ahora, querida, sólo queda empezar. Ale, suerte.