TLDR
I've made a custom DEV analytics dashboard as a fun side project, which you can check out live here: https://dev-analytics.netlify.app. This article is about the things I've learned during the process.
The Idea
If you're a DEV writer, then you're probably already familiar with the analytics dashboard for your profile. It provides you with a bunch of useful data such as page views, comments or reactions count, which you can use to plan your next articles. Although it's enough to do its job, I thought it would be a fun project to recreate and add some more features to it.
Learning New Technology Stack
The main goal of this project was to learn something new in a fun way, so I've decided to use Remix for it, and oh my - it was perfect. I was amazed by how powerful it is by using just standard web features such as cookies, query parameters, and forms. Just remember to be cautious when picking a starter template for your project. I picked the default one, and later found out it wasn't supported by Netlify. As a result, I had to delete the entire repository and start the configuration process again. 🙈
The next thing I've learned during this project is how important caching data is, and here Cachified, in combination with an LRU Cache, came to the rescue. These two technologies are also super simple yet so powerful, thus, if you're not sure how to deal with cache, these two should be at the top of your list. You can see how I utilized it in this project by checking this file on GitHub.
Another technology used here that is worth noting is Recharts. It comes with a bunch of very useful components such as a fully responsive line chart, chart tooltip, chart legend, and many more. I was amazed by its easy customization - it offers a lot of possibilities if you want to style or format your charts in a certain way. Check out this component if you're looking for some inspiration.
Last but not least - Tailwind CSS. I've used it to style the entire user interface and I had a great experience. Some people say it's messy, hard to maintain and bloats HTML, but I didn't encounter any of that. For me, it's perfect for small to medium-sized projects (maybe large ones too, but I've never used it commercially).
To sum it up, the list of used technologies is as follows:
General Takeaways
Procrastinating on this application and article for a long time has taught me a few things that I plan to apply to my upcoming projects. These are:
- Launch it fast - it doesn't really matter if it's missing a 404 page, as it is not a primary concern for most users. Focus on delivering the necessary features first; the rest can be added later.
- Keep it simple - don't overcomplicate things. Maintain a user-friendly interface; users will appreciate its ease of use. Furthermore, prioritize functionality over complexity to ensure a seamless user experience.
- Plan it first - don't dive directly into coding. Spend some time analysing the tech stack, understanding the deployment environment, and identifying key features the app needs. Remember, strategic planning will save a lot of time in the long run.
Live Demo
If you would like to play around with it, you can do so here: https://dev-analytics.netlify.app.
Initially, it will ask you to set your API key, which is discouraged, but unfortunately, since DEV doesn't provide any OAuth solution, it's the only way of authentication. The key will be stored in a secure, http-only cookie only in your browser and won't be shared anywhere. In case you have any concerns, you are more than welcome to check out the source code.
I hope you find both this tool and article useful. I'd love to hear your thoughts on them. Don't hesitate to share your opinions or suggest new features in the comments section! Also, consider following me on Twitter to stay updated.
Thanks for reading! 👋
Top comments (4)
Very cool project, although I'm not completely sure what the point is, as I can already see my analytics on dev. The React based UI is very impressive, and recharts is a good chart choice. :D I have my own personal thing like this that I might share soon on my website. Great post!
Thank you for your feedback! Yeah, it might seem like nothing new at the moment, but in the future, I plan to add some more features to it and adjust it to my (and other users') needs. 😅
Cool, can't wait to see it. Remember to keep me in the loop!
Sure! I'll keep an eye on yours too.
That is cool to explain in a post your development of your Analytics project! 🥳🙌