Frontend Mentor | Ese Oxalde's profile

@AriArash44

Submitted about 1 month ago

What are you most proud of, and what would you do differently next time?

I am extremely proud of the growth and learning that this project has facilitated. Some of the most significant accomplishments include:

Mastering New Technologies:
- WebSocket Integration: Implementing the WebSocket protocol for live, real-time updates across multiple devices was a major milestone. It pushed me out of my comfort zone and deepened my understanding of bidirectional communication.
- Cookie-Based Authentication: Transitioning from local storage to cookies for authentication improved the security of the application. I learned how cookies can be automatically sent with requests and offer better server-side validation.
Adherence to Best Practices:
- I made a conscious effort to follow well-established coding patterns, such as the singleton design pattern, and leveraged modern CSS techniques (e.g., using clamp instead of relying solely on media queries) that enhanced the maintainability and scalability of the project.
- Testing: Incorporating comprehensive testing using Jest for back-end route validations and Selenium for UI testing helped ensure robust code and a smoother user experience.
Problem Solving & Workflow Enhancements:
- I experienced first-hand the pitfalls of version control when I accidentally removed my ignored files during a branch switch. This mistake taught me the power of tools like git stash, which has since become an indispensable part of my workflow.
- Setting up a secure development environment with HTTPS by configuring private keys further enriched my practical understanding of secure web development.

If I were to do things differently next time, I would:

Improve Git Management:
- Be more cautious with Git configuration and take proactive steps to ensure that critical ignored files are protected, perhaps by using manual backup for them.

What challenges did you encounter, and how did you overcome them?

This project presented several technical and strategic challenges, each leading to valuable learning opportunities:

Version Control Missteps:
- Challenge: I once accidentally removed my ignored files when switching between projects.
- Solution: This mistake forced me to explore git stash and better understand branch and file management, ultimately improving my version control discipline.
WebSocket Integration:
- Challenge: Working with the WebSocket protocol was completely new, and establishing a stable, real-time connection required researches and trial-and-error.
- Solution: Through careful consultation of documentation and iterative testing, I successfully implemented a robust real-time update feature, which remains one of the project highlights.
Transitioning to Cookie-Based Authentication:
- Challenge: Moving away from local storage for authentication meant I had to learn the intricacies of secure cookie handling, such as managing cookie expiration and ensuring proper server-side validation.
- Solution: By studying best practices and revising the authentication flow, I was able to achieve a more secure mechanism for user verification that automatically sends cookies with each request.

Each of these challenges has not only solved immediate issues but also enhanced my overall understanding and capabilities in web development.

What specific areas of your project would you like help with?

I welcome suggestions and constructive feedback in several areas:

Code Structure & Maintainability:
- Any recommendations on optimizing the code architecture and enhancing the overall organization would be valuable.
Testing Strategies:
- I would welcome feedback on enhancing my testing strategy, particularly in integrating end-to-end testing for both the front-end (with Selenium) and back-end (with Jest). Suggestions on other testing frameworks or methods to increase test coverage would be appreciated.

I am eager to learn and improve, and I value any insights that can help refine both the technical and architectural aspects of this project.

Themeable Blog Preview Component

#bootstrap#jest#typescript#axios