What are you most proud of, and what would you do differently next time?
"En este desafío, estoy orgulloso de haber aplicado el uso de mapeos de datos y la descomposición de componentes para tener mayor escalabilidad. Para la próxima, me gustaría poder aplicar estados a los componentes para que sean dinámicos según la receta que quiera consultar y aplicar animaciones.
What challenges did you encounter, and how did you overcome them?
El desafío más grande fue descomponer aquellos componentes que contenían más de un ítem repetitivo.
What specific areas of your project would you like help with?
Me gusataría recibir ayuda con el estilado de mis componentes y del proyecto en general, dado que seguro se pueden aplicar mejores practicas.
What are you most proud of, and what would you do differently next time?
I am most proud of the component modularity achieved in this project. The Card, Profile, and CallToAction components are reusable, clean, and follow best practices in React development. This structure allowed me to easily add, remove, or modify parts of the card without affecting other areas. However, next time, I would focus on improving state management by incorporating React hooks, such as useState or useContext, to handle dynamic data more effectively. Instead of hardcoding values, I would retrieve user profiles and social links from an external API, allowing the card to be more dynamic and adaptable.
What challenges did you encounter, and how did you overcome them?
One challenge I encountered was handling CSS specificity and ensuring that styles applied correctly to each component. At times, styles conflicted or overrode each other. To overcome this, I used BEM (Block Element Modifier) naming conventions and scoped the styles within each component file. Additionally, using component-specific CSS files helped avoid global style conflicts. Another challenge was managing static assets like the avatar image, which I resolved by properly configuring file paths and ensuring they were bundled correctly in the build process.
What specific areas of your project would you like help with?
I would like assistance in implementing more advanced CSS techniques, such as animations or transitions, to enhance user interaction. Additionally, help with improving the project’s state management, especially handling asynchronous data from an API, would be valuable. I'd also appreciate guidance on how to better test components using Jest or Testing Library to ensure the robustness of the application as it grows.
What are you most proud of, and what would you do differently next time?
I am very proud to have completed this project and created a clean and responsive blog preview card using React. The design closely follows the specifications of the Frontend Mentor challenge, and I implemented a well-structured layout with great attention to detail in terms of spacing, typography, and responsiveness across different devices. The component-based structure is easy to maintain and update.
What challenges did you encounter, and how did you overcome them?
The challenge was working with the spacing and alignment of the design to ensure it precisely matched the Frontend Mentor specifications, which sometimes meant adjusting margin and padding values. To overcome this issue, I used browser developer tools to inspect and iteratively adjust the layout.
What specific areas of your project would you like help with?
I would like to receive help to further optimize the design, particularly to refine the CSS to ensure a more consistent and smooth layout across all screen sizes. I would also appreciate guidance on how to improve the overall project performance, such as using best practices for image optimization and lazy loading. Additionally, I am interested in learning how to incorporate more advanced CSS techniques, like animations or transitions, to enhance user interaction and engagement. Feedback on how to make the codebase more modular and maintainable would also be valuable.
What are you most proud of, and what would you do differently next time?
Estoy más orgulloso de haber creado un componente reutilizable en React y haber aplicado un enfoque de diseño mobile-first. La próxima vez, me enfocaría en usar componentes más inteligentes con estado y optimizaría el manejo del renderizado para mejorar el rendimiento.
What challenges did you encounter, and how did you overcome them?
Uno de los desafíos más grandes que enfrenté fue asegurarme de que las imágenes y estilos se renderizaran correctamente, especialmente al trabajar con rutas relativas. Para superar esto, investigué sobre la estructura de carpetas en proyectos de React y ajusté las rutas de las imágenes, lo que me ayudó a comprender mejor cómo manejar los activos en el proyecto.
Otro desafío fue el diseño responsive, ya que quería asegurarme de que el componente se viera bien tanto en dispositivos móviles como en pantallas más grandes. Para ello, utilicé un enfoque mobile-first y realicé pruebas en diferentes resoluciones, lo que me permitió ajustar los estilos y asegurarme de que la experiencia del usuario fuera consistente en todos los dispositivos.
Finalmente, también me enfrenté a la gestión de props en el componente Card. Para solucionarlo, revisé la documentación de React sobre la gestión de props y practiqué la creación de componentes más estructurados y modulares, lo que facilitó el paso de datos y la reutilización del componente en diferentes contextos.
What specific areas of your project would you like help with?
Me gustaría recibir ayuda específicamente para mejorar la estructura de mis componentes en React. Algunos aspectos en los que me gustaría enfocarme son:
Descomposición de Componentes: Quisiera aprender a descomponer mis componentes en subcomponentes más pequeños y reutilizables.
Uso de Hooks Personalizados: Estoy interesado en explorar la creación y el uso de hooks personalizados.
Patrones de Composición: Me gustaría entender mejor cómo implementar patrones de composición de componentes.
