Como creamos Codealo.dev

johnnietirado
12/6/2020

La idea detrás de Codealo

Esta pagina web fue diseñada para crear una comunidad de programadores centrada en proyectos de programación. Muchas veces no sabemos que tipo de proyectos debemos hacer para mejor demostrar nuestras habilidades, es por eso por lo que en Codealo hacemos esta parte fácil brindando una gran cantidad de idea de proyectos que puedes hacer para poder exponer tus habilidades.

Además, es un portal de entrada para muchas personas que quieren empezar en este mundo, nuestra parte de empieza aquí esta diseñada para ayudar a los nuevos programadores.

Como logramos esto en 36 horas

Con los años uno aprende que para crear las cosas bien y rápidamente debemos utilizar las herramientas correctas y las que mejor dominamos. Es por esto que se eligió el siguiente stack para Codealo.dev

En este caso, ya que estamos trabajando con una página de contenido optamos por usar el JAM Stack.

J de JavaScript que nos permite obtener nuestra información de nuestra API o Manejador de Contenido.

A de API, la manera que vamos a consumir el contenido de la página

M de Markup, en este caso utilizamos HTML para mostrar toda nuestra información.

Frontend

NextJs es un framework utilizando ReactJs que nos permite usar Server Side Rendering y Static Site Generation para tener una página super rápida y dinámica.

Para poder crear el estilo único de Codealo elegimos utilizar TailwindCSS una librería de CSS muy poderosa que nos permite construir cualquier diseño.

Al combinar estos dos, construimos la interfaz rápidamente, creando un estilo limpio.

Backend

Strapi es un proyecto Open Source con las de 30,000 ⭐ en GitHub. Tiene un panel administrativo que te permite crear contenido muy fácilmente (como este blog post que esta leyendo ahorita) y además tiene muchas funciones comunes de un backend.

Strapi nos permitió hacer lo siguiente rápidamente:

🔥 Crear los modelos de nuestra data rápidamente

🔥 Crear las rutas de la API poder obtener nuestra información.

🔥 Crear usuarios utilizando GitHub

🔥 Manejar nuestras imágenes y contenido de media.

Mucha de la velocidad de construir Codealo vino de las herramientas que nos da Strapi desde el comienzo.

Servidor y Base de Datos

Nuestro código de Strapi esta alojado usando Digital Ocean dentro de un servidor virtual privado. Esto nos cuesta $20 / mes, pero también contiene nuestra base de datos.

Todo esto es manejado utilizando Dokku y Docker para poder correr todo dentro de contenedores y subir el código al servidor utilizando Git.

Conclusión

Gracias a las decisiones que tomamos podemos agregar muy fácilmente nuevo contenido a la página sin tener que hacer cambio al código. Entramos a nuestro portal de Strapi para agregar o editar el contenido que deseamos y este se ve reflejado en la página web.

Te recomiendo ver el LIVE que hicimos hablando sobre el proceso y como trabajamos en conjunto para poder lograr mucho en 36 horas.

LIVE – Como construimos Codealo


Hecho con 🧡 por
@Tomás Ferreira y @Johnnie Tirado
© 2021 Codealo