Responsive Article Preview Component with TypeScript and Sass

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

I’m most proud of adopting TypeScript and Sass for this project, as they allowed me to write more structured, maintainable, and efficient code. TypeScript helped me catch potential errors early, while Sass enabled me to manage styles more effectively. Next time, I would experiment more with animations to make the user interactions smoother and more engaging, as I feel this could enhance the overall user experience.

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

A major challenge was transforming the share container from an absolute block at the base of the card to a tooltip that appears above the share button. To address this, I used TypeScript to dynamically inject the tooltip HTML into the DOM when the share button is clicked, while removing the previous share block by applying display: none in Sass/CSS. This approach allowed for a more flexible, responsive interaction and kept the UI clean by only displaying the tooltip when needed. It was a valuable exercise in combining TypeScript and CSS to handle interactive elements effectively.

Additionally, I faced some difficulty with scaling, as my implementation ended up slightly larger than the intended design. Without access to the actual Figma file, I used the provided image design and scaled it in Figma to approximate spacing and font size, which helped, though there were still minor size inconsistencies.

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

I’d appreciate feedback on my use of TypeScript within this project, especially regarding any best practices for managing types in smaller frontend projects. I’m also interested in any suggestions for improving the efficiency and structure of my Sass files, particularly when it comes to organizing styles for scalability in larger projects.