DEV Community

Cover image for Next.js, Material UI, MongoDB Personal Dashboard
Katsiaryna (Kate) Lupachova
Katsiaryna (Kate) Lupachova

Posted on

Next.js, Material UI, MongoDB Personal Dashboard

Originally published on my personal blog

Motivation

As a developer who tries to contribute to the community by writing blog posts, developing and maintaining open-source libraries, and building side projects, I'd like to have a place where I could see and track all these my activities in one place. So I decided to create the dashboard of my personal projects.

Tech Stack

For the tech stack I've chosen to use:

Overview

The app has a "classic" dashboard layout:

  • header
  • dark and light theme switch
  • sidebar with toggle
  • content area
  • footer

Also, the app uses ESLint custom rules, prettier code formatting, husky git hooks with lint-staged.

Pages

The dashboard consists of 5 pages:

  1. Overview of my blog posts, npm packages demo, and hobby apps stats
  2. dev.to stats
  3. GitHub stats
  4. Twitter stats
  5. NPM packages stats

Page 1 - Overview of my blog posts, npm packages demo, and hobby apps stats

page-one

The first page displays the main stats of the blog posts on my personal website, of the npm packages demos that I developed and maintain, and of the hobby apps that I wrote in my spare time. These stats are rendered in the table and include:

  • the date of publishing
  • the title, which also serves as a link to the respective blog post/demo/app
  • this week number of weeks with comparison to the previous week
  • total views count
  • modal window with the chart that shows the number of views for each day during the last month

Published, Last 7 days views and Total views columns are sortable. By default, the data is sorted by the number of views for the last 7 days. The blog posts table has pagination.

The data about the views count is stored in MongoDB Atlas database. There is a dedicated Next.js API Route that communicates with the database. To be able to gather these stats, I developed a custom hook - useViewCounter.

Probably another part that was tricky to implement on this page is the feature of sorting the Material UI table by specific columns. This is how I implemented it.

Page 2 - dev.to stats

I'm a follower of the "Learn in public" concept. When I learn something new while working on a project and I write an article on it, I definitely know the subject better later. Plus I hope this also helps other developers in their "gaining new knowledge" journey.

page-two

To use dev.to API you just need to obtain the API key. How to do so is described in the official docs.

There are two stat cards at the top of the page. They show data about followers count and the total number of posts for today. The data is gathered from https://dev.to/api/followers/users and https://dev.to/api/articles/me APIs respectively. "Running numbers" animation implemented with the react-spring library.

Also, there are dynamics of followers count chart. But dev.to API provides data only for the current number of followers. Where do I get the data for the previous days? To be able to display this data we need to:

  1. store followers count in the database (for this I use MongoDB Atlas)
  2. run the cron (scheduled) job for this to happen daily (GitHub actions to the rescue)

The number at the bottom right corner of the followers' count card shows the followers' number change for the last week.

The main section of the page consists of cards with information about each blog post. This data is fetched from https://dev.to/api/articles/me API. Each card has information about:

  • article's title
  • date of publishing
  • number of views, reactions, and comments
  • tags list
  • cover image

The card is clickable. By clicking on it, the article opens in a new tab, using the URL data from the API.

All blog posts can be sorted by the published date (sorted by default), number of views, reactions, or comments. How to implement this feature is described in this blog post.

Page 3 - GitHub stats

page-three

Before using GitHub REST API you need to create a personal access token. Here are the instructions on how to do so.

At the top of the page, the general GitHub user profile data and main stats indicators are shown. A user profile data is a response from https://api.github.com/user endpoint and it includes:

  • name
  • bio
  • avatar
  • location
  • company and other profile information.

The followers' count and the number of the public repos are also coming from the above-mentioned endpoint.

But the data about total stars and total forks amount is calculated based on each repo data. To get the information about all user's repos you should query https://api.github.com/user/repos endpoint.

Same as for dev.to followers count, the data on GitHub total repos, total followers, total stars, and total forks is stored daily in the database with the help of the scheduled GitHub action.

The repositories section of the page displays cards with each repo data, such as:

  • repo name
  • website (if exists)
  • description
  • number of stars, forks, watchers
  • language
  • created at and updated at dates
  • license

The cards are sortable by stars (default), forks, and the last update date.

I have a separate app that utilizes GitHub REST API - GitHub API dashboard, that I've developed a while back and probably need to update. A user can enter any existing GitHub username and see public information on that user, including profile information, a person's programming languages structure, and repos data.

Page 4 - Twitter stats

page-four

I'm not a very active (mildly speaking) Twitter user. I mean I do read other people's tweets, but do not tweet myself often. Maybe this will change eventually, but it is what it is now.

As it's stated in the docs, to get access to the Twitter API you need to:

  1. apply and receive approval for a developer account
  2. get your app's key and tokens.

Specifically for my dashboard, I use v1.1. of the API and Bearer Token for authorization.

The top section of the page displays general information about the Twitter profile. This data comes from https://api.twitter.com/1.1/users/show API and includes:

  • screen name
  • name
  • description
  • location
  • when a profile was created
  • followers count
  • image URL and so on.

Same as for dev.to and GitHub followers count, the data on Twitter followers is stored daily in the database with the help of the scheduled GitHub action.

The data in the Tweets section of the page comes from https://api.twitter.com/1.1/statuses/user_timeline API. This API returns a tweet's text, date of publishing, retweets and likes count, etc. I visually distinguish if a tweet was a reply to some other tweet and a tweet by itself.

If a tweet returns from the API truncated, I compute a link to its full content.

The tweet cards are sortable by published date (default), retweets, and likes.

Page 5 - NPM packages stats

page-five

While developing a piece of functionality for any projects that I'm involved with, sometimes I publish it as a public library on NPM. Thus any developer (myself included) can use it, and I feel great that I can do something useful for a community.

If you'd like to publish your library, I wrote the blog post on how to publish a custom React component to NPM.

There is no need to obtain an API key or token for querying NPM registry API. For the dashboard, I use only the endpoint that provides the data about a package downloads count - https://api.npmjs.org/downloads/. You can read more about it here.

I have 4 public NPM libraries at the moment. There are stats on each of them in the dashboard:

  • a chart with the daily downloads count for the last month
  • an average downloads per day (calculated)
  • weekly downloads

As you can see, the React progress bar library has the biggest downloads count among my libraries so far. The robust UI components libraries are great, and I love to use them. But sometimes you just need one simple customizable component. And I had exactly such a use case. Here is the blog post about how to create a custom progress bar component in 5 minutes.

Conclusion

The source code for my personal dashboard is available in this repo. And here is the live version (deployed on Vercel).

Discussion (29)

Collapse
ats1999 profile image
Rahul kumar

Looking superb!
Few things i would like to know

  • how long did it take to develop it?
  • how many people have developed togather?
  • What is the developer's experience?

just for my personal curiosity.

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you!

  • really hard to tell how long it took as I was developing it in my spare time with a huge breaks. You can check it in the commits history github.com/KaterinaLupacheva/my-pr...
  • just me alone
  • at the moment around 3 years of total dev experience, including almost 2 years with JavaScript
Collapse
ats1999 profile image
Rahul kumar

If i'll ask you that how much time you would take to develop this application, if you have 8 hours a day. What will be your answer.

Thread Thread
ramonak profile image
Katsiaryna (Kate) Lupachova Author

I'd say about 2 weeks (very roughly)

Thread Thread
ats1999 profile image
Rahul kumar

Thanks

Collapse
ats1999 profile image
Rahul kumar

thanks

Collapse
nnajiforemma10 profile image
Emmanuel Chinonye Nnajiofor

This is super lovely... I love it

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you!

Collapse
ats1999 profile image
Rahul kumar

page: my-projects-dashboard.vercel.app/d...

Why

gets re rendered when i click on any of Published Date
Views
Reactions
Comments

Collapse
martinschleiss profile image
Martin Schleiss

I like it, thanks!

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you!

Collapse
ghccristia profile image
Gustavo Hurtado Cristia

💪👌

Collapse
ptejada profile image
Pablo Tejada

How do you deal with GitHub disabling your scheduled actions?

I recall having used a scheduled GA and it was disabled due to inactivity or something 🤷‍♂️

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Haven't had such issues so far. My GitHub action runs once per day. Here is the GA's yml file github.com/KaterinaLupacheva/my-pr...

Collapse
ptejada profile image
Pablo Tejada

I understand but that does not count towards repo activity. The disclaimer is shown here in a red box

docs.github.com/actions/managing-w...

Collapse
phouchens profile image
Perry H

Nice!

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

thanks!

Collapse
thatanjan profile image
Anjan Shomooder

This is really awesome.

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you very much!

Collapse
snailthelazy profile image
snail

Awesome !

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you!

Collapse
mkubdev profile image
Kubdev

Nice one! I need to do this too!!

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you and good luck with your own!

Collapse
lstrive profile image
lyan

好赞~

Collapse
saroj8455 profile image
Saroj Padhan

Thank you

Collapse
achalgotawala profile image
Aadil Chalgotawala

Hey, Your information was such a very useful and important for us. Digital

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you! Glad that you consider it useful!

Collapse
arroyoruy profile image
Dan Arroyo

Great work. I appreciate you sharing this.

Collapse
ramonak profile image
Katsiaryna (Kate) Lupachova Author

Thank you! I'm happy to share!