Repositorio, entorno y más... - Coder-Box S01E03

Bienvenidos a “Entorno, Repositorio, y más”


S01 - E03

De a poquito le vamos dando forma a nuestro proyecto. Hoy nos toca preparar todo para ponernos a codear.  Te vamos a dar un recorrido de todas las herramientas que necesitamos instalar para que Coder-Box, o cualquier proyectos que estés creando, sea realidad.

Sin mayor preámbulo, les dejo el resumen de nuestra tercera entrega.

A darle átomos.


Entorno

En este capítulo vamos a dar nuestros primeros pasos en el proyecto. Crearemos el repositorio con el cual el equipo va a trabajar día a día. Luego instalaremos todas las dependencias principales y las librerías necesarias en este momento. También vamos a configurar el ambiente en Vercel, que es la plataforma en la que estaremos haciendo los deploys correspondientes a medida que el proyecto avance y las funcionalidades del mismo tomen forma. Con esto dejaremos el entorno de trabajo listo para empezar.

Y para finalizar crearemos un tablero en Asana para ir asignando a los diferentes integrantes del equipo las diversas tareas y también hacer una lista de pendientes.


Repositorio

Para crear nuestro repositorio vamos a hacerlo en Github. Elegimos esta plataforma porque es de las más usadas y de la que encontraremos un mayor soporte de la comunidad y tutoriales a disposición ante cualquier eventualidad que pueda surgirnos. No es una ciencia, seguir los pasos como hicimos en el video y listo, ya tenemos nuestro repo listo para poder subir nuestro código y que no se nos pierda ninguna información.


Proyecto

Bueno, basta de cháchara. Llegó el momento de crear el proyecto e instalar todo lo necesario para que podamos empezar a crear líneas de código.

Ya que vamos a utilizar Next.js por encima de React, no es necesario que usemos la herramienta nativa de React para crear el proyecto, entonces vamos directo a crearlo con next. Y algo más antes de empezar de apretar Enter, es que vamos usar Typescript, por lo tanto en la creación ya podemos agregar TS como dependencia de la siguiente manera.

yarn create next-app coder-box --typescript

Esté comando va a crear toda la estructura de archivos necesaria para Coder-Box, luego vienen las dependencias que ya sabemos que vamos a usar. Si en algún momento queremos agregar más, lo iremos mencionando.

Styled-Components

Para nuestra librería de estilos para los componentes vamos a usar SC. Con el siguiente comando la agregaremos como dependencia de nuestro proyecto.

yarn add styled-components


React-Hook-Form

Esta librería nos ayudará a tener un mayor control de nuestros formularios y poder manipular de manera más sencilla los datos.

yarn add react-hook-form

Lodash

Una excelente herramienta para que nos ayude con la manipulación de toda la data en Coder-Box. Recorrer arrays, objetos o archivos Json con Lodash hace que programar sea super sencillo. Ahre.


yarn add lodash

Vinculación

Luego de tener nuestro proyecto bonito y listo para comenzar, tendremos que vincularlo con el repositorio de Github. Siguiendo los siguientes simples pasos podremos lograrlo.

  • git remote add origin git@github.com:AP-openProjects/coder-box.git
  • git branch -M main
  • git push -u origin main

Ahora si, Coder-Box ya está conectado con Github y podremos sincronizar todos nuestros archivos con las bondades que Git nos ofrece.

Branches

Estructura de las ramas

Nombre / Tipo / Tarea-Descripción

estebanCapi/bugfix/error-login

Tareas

Inicialmente vamos a crear 4 secciones (columnas), pero si en un momento creemos necesario algún cambio podemos ir adaptando nuestro espacio de trabajo.

Tenemos que ir completando la tarea con toda la información que creamos que va a ayudar a la creación y que sea necesario para realizarla. No se preocupen si no tenemos toda la info en el momento, se puede ir actualizando en el futuro. Estos datos son el título, descripción, responsable y subtareas.

Backlog: Aquí pondremos todas las ideas que se nos ocurren del proyecto. Desde funcionalidades básicas o complejas, hasta cambios de diseño. También pondremos tareas de investigación, estudio, organización.

To-do: En esta columna iremos pasando las tareas que tenemos pensadas para esté sprint (pueden ser 1 o 2 semanas).

In-Progress: Contiene las tareas que están siendo realizadas en ese dia/s. Lo ideal es que sea solo una, pero ocasionalmente pueden ser más de una.

Done: Finalmente tendríamos una columna para poner todas las tareas finalizadas. Y poder tener un control de lo terminado recientemente en el sprint.

ESTUDIA

Desarrollo web fullstack;

Adquiere los conocimientos necesarios para insertarte en el mercado laboral y construir tus propias aplicaciones web

Vamos a cubrir

JAVASCRIPT/TYPESCRIPTHTML/CSSREACTNODE JSPOSTGRESQLFIREBASEAPI RESTAPIs (Mercado Libre)+ MUCHO MÁS!
apx