What I've Learned By Building DEV Analytics Dashboard 💡
Tags: buildinpublic, opensource, showdev
Published: 2023-12-18 21:24:13

## TLDR

I've made a custom [DEV](https://dev.to/) 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](https://dev.to/dashboard/analytics) 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](https://remix.run/) 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](https://github.com/remix-run/remix/tree/main/templates) for your project. I picked the default one, and later found out it wasn't supported by [Netlify](https://netlify.app/). 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](https://www.npmjs.com/package/@epic-web/cachified), in combination with an [LRU Cache](https://www.npmjs.com/package/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](https://github.com/rago4/dev-analytics/blob/main/app/lib/cache.ts) on GitHub.

Another technology used here that is worth noting is [Recharts](https://recharts.org/en-US/). 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](https://github.com/rago4/dev-analytics/blob/main/app/components/analytics-dashboard/charts-section.tsx#L93) if you're looking for some inspiration.

Last but not least - [Tailwind CSS](https://tailwindcss.com/). 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:

- [Remix](https://remix.run/)
- [Cachified](https://www.npmjs.com/package/@epic-web/cachified)
- [LRU Cache](https://www.npmjs.com/package/lru-cache)
- [Recharts](https://recharts.org/en-US/)
- [Tailwind CSS](https://tailwindcss.com/)

## 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:

1. **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.
1. **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.
1. **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](https://github.com/rago4/dev-analytics).

---

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](https://twitter.com/rgolawski) to stay updated.

Thanks for reading! 👋