What I built
I built a site where you can get statistics on how your DEV articles perform. Besides sharing the same statistics that you get from your DEV dashboard, you will get more statistics on your averages, on the relative weight of your posts and in addition, you'll gain some insights on which are your most popular tags.
Category Submission:
Random Roulette
App Link
You can find DevAnalytics here:
https://dev-analytics-frontend-tudwb.ondigitalocean.app/
Screenshots
Description
The application has one single page and an about modal. The about modal shares some information about the purpose of the application and where you can find the source code - in case you'd like to contribute ;)
Otherwise, the application is very simple. It has one input field and a button. You enter your DEV API key and then you click on the Get my stats! button.
In case there is a problem, you see an error message, otherwise once all the data is fetched (it can take some time if you have a lot of articles, but a progress bar shows that there is some work ongoing), you will see a lot of statistics.
Some high-level stats that you already have on your DEV dashboard, and much more!
If you check your stats, there is a fair chance that you will feel the force of Pareto. I definitely saw the principle at work.
There is also a section about tag statistics, something that you won't find at all on your dashboard. You'll have some insights about which of your tags attract the most reads/reactions/comments.
I don't suggest that you should choose your topics based on these stats, I think you would write about what you want, but if maximizing views or reactions is your goal, you might get some useful ideas out of these statistics.
I don't plan to abandon the project after the hackathon, I already have some plans with it. But more about that later down.
One last thing that I must emphasize is that you are not supposed to share your API key with anyone, hence it's masked by default on the screen, and logging it in the backend is disabled, even I cannot get your API Key.
Link to Source Code
You can find the source here for the frontend:
https://github.com/sandordargo/dev-analytics-frontend
And here for the backend:
https://github.com/sandordargo/dev-analytics-backend
Permissive License
Background
My inspiration had two main sources. Learning a new language, a new framework and making these statistics easier to get.
I'm a senior C++ developer with no professional front-end experience. I have some static personal sights and some personal projects to entertain myself but that's it.
This year, I'm going to join a project where we'll rebuild a page in Angular. I already got some initial training which was great, but without practice, it's only worth that much.
I wanted to build something using TypeScript and Angular in my free time before I join the project so that I can help the team more and because I like it when I understand what I do.
And why this particular project?
When I had my second DEV anniversary, I built a command-line tool which provided some of these statistics. I thought it would be the best occasion to extend that tool into an online service.
I think the challenge would have been too daunting if went on with both a topic and a technology that I'm completely unfamiliar with, DEV Analytics with Angular+TS meant the sweet spot for me.
How I built it
Using DigitalOcean's App Platform was rather easy. Probably as the service matures, more tutorials will be available just a few clicks away, but after a few minutes of googling around, I found both how to deploy a Flask app and how to deploy a static website generated with Angular.
I'm pretty sure that with time, this kind of information will be even easier to get.
Otherwise, hell yeah, I learnt a lot and that was one of my biggest motivators: getting some experience with Angular.
What did I learn?
- TypeScript syntax in general
- Angular basics, such as
- how to extract code into new components
- the differences between using
@Input()and the constructor - when to use
[],()or simply nothing around the attribute - how to deal with HTTP calls
- structural directives (
ngIf,ngFor, etc.)
- ng-bootstrap basics
- Accordion
- Modal
- Table
How I actually built it?
I progressed in baby steps and you can pretty much reconstruct them if you read the articles in this series. I took an agile approach one could say. At almost every iteration, I delivered something useful for my clients.
First, I only showed raw JSON data, then a table and later nicer cards. Little by little, as I understood the framework better, I started to refactor, to make the code more reasonable and added some "extras" such a progress bar and error handling.
When I was a bit stuck and needed a second pair of eyes, I asked for the help of someone who I'm mentoring as I know she likes and knows Angular well. It turned out to be extremely useful both for DevAnalytics and for my knowledge. Thanks, Clara!
Next steps?
And here is the end, I have plans but there is my wife's birthday this weekend and it's more important. I'll continue after the Hackathon finishes. I'll try merging the backend (as it's basically just a forwarder) with the frontend so I can host the whole service for free and I also want to add some fancy histograms on how your articles are read compared to each other. Let's say that's the plan for the next month, then I'll have some other side projects to focus on.
Additional Resources/Info
Angular libraries used for frontend:
The framework used for backend:
Top comments (0)