Design comparison
Solution retrospective
In this project, I developed a componentized React solution with SCSS styling, utilizing React Spring for a simple card animation. It presented numerous challenges, notably my first attempt at implementing a dark/light theme responsive app. Initially, I anticipated difficulties in accommodating both user theme preferences and device dimensions, fearing it would result in a convoluted .scss file. Surprisingly, it didn't turn out as bad as expected. However, for future projects of similar or larger scale, I plan to use separate styling files to avoid ending up with such a large file.
Another hurdle I faced was implementing the responsive layout due to changes in organization. I addressed this by hiding elements on desktop and displaying mobile ones, and vice versa. Nevertheless, I recognize that there may be better solutions to this problem, and I'm open to suggestions.
Additionally, I encountered challenges in programmatically changing the SVG color. Vite doesn't support this natively, and the external library I attempted to use was broken in the newest update. Despite my efforts to revert to a functioning version, I was unsuccessful. As a workaround, I converted the SVGs into components using an external tool (https://react-svgr.com/).
Despite these challenges, I added several features that I believe greatly enhance the application. Main standout feature is the 'getInterestingUsers' function, which displays a user from a hardcoded list of famous, prominent, or interesting users on the platform. This feature can be triggered by clicking the magnifying glass icon in the search bar or by submitting the search form with an empty input. Additionally, I implemented failsafes to handle scenarios where a user's account is deleted, preventing errors from being displayed. I believe this new feature makes the app a lot more interesing and enjoyable for people that don't know many or any github users.
Overall, this project was my favorite on this platform, and I thoroughly enjoyed developing it.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord