DevAnalytics at DOHackathon: Cleaner UI, cleaner code

Sandor Dargo - Dec 30 '20 - - Dev Community

A few days ago, I shared that I created cards to display the statistics of your most popular articles and tags and that the UI is fully functional.

Since then I'm focusing on smaller adjustments.

Soon, I'll work on an Angular project that motivated me to participate in this hackathon. Also at my workplace, I'm mentoring 2 devs who joined our company directly after graduation.

One of them was more focusing on UI during her internships and while in the beginning, she was working on C++ backends, she managed to get back to the frontend side. But we still - virtually - meet every week to discuss generic programming concepts, interesting ideas, and tools.

This week, I turned the table around and I asked her to mentor me in Angular and how a nice UI should look like.

As you can see on the below picture, some margins have been applied, the cards are more similar in size. What you don't see is that so far the whole page was one big Angular component and it also started to change, I started to extract smaller component.

A nicer UI

During the next couple of days, I'm going to continue cleaning up the code, cleaning up the UI and add some responsiveness to it.

If I have some extra time at the end of the hackathon, I'll check if I can add some more statistics.

Let me know what you think and feel free to try it here.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .