Sprint 4

Aplicación web fullstack

El desafío consiste en la creación de una aplicación web entera, haciendo foco en el front end y sin necesidad de codear el back end. Visualización de datos mientras incorporas librerías gráficas hechas con React.

Preparación

Revisar los requisitos en la plataforma de Acamica, esta vez el enfoque se encuentra en la lógica de Firebase, un refuerzo de React Router y React component.

1. Descargar los recursos del proyecto
2. Organizar los archivos (create-react-app). Esta vez, he creado carpetas muy organizadas para separar las funcionalidades en la aplicación, y que el código sea más entendible.
3. Configurar los estilos iniciales

Al tener una interfaz muy sencilla, pues me quedaré con los estilos CSS también sencillos, nombrando con clases a los componentes.

Desarrollo

1. Crear los folders con las distintas funcionalidades en la aplicación.
2. Conectar la base de datos con el proyecto
3. Diseñar los elementos visuales a. Components: Son elementos reusables. Ejemplo: Buttons, Profile Pic. b. Containers: Son elementos que contienen componentes. Ejemplo: Header, Main, PostList c. Pages: Son las vistas a las que React Router hace referencia
4. Crear la lógica de la funcionalidad de los componentes
5. Crear las APIs para la interacción de la base de datos
6. Opcional - Crear las reglas de autenticación de Firebase
7. Opcional - Crear variables de ambiente que guarde las credenciales de Firebase

Obstáculos

1. Crear un contexto de usuario que obtenga la información de la cuenta de Google
2. Conteo de likes

Conclusión

1. La separación de archivos en folders ha sido muy útil para evitar componentes anidados
2. La lógica debe de estar separada de lo visual

Enlaces

El proyecto se encuentra en este link https://sprint-4-acamica.vercel.app/

Link a GitHub https://github.com/DavidSalomonDev/sprint-4_acamica