I made a full-stack portfolio site using Next.js and Tailwind!

1

PlanetScale

This is where backend stuff comes in like database, TRPC, authentication, and Prisma. I used PlanetScale’s free tier for my database. The whole backend is built using TRPC and Prisma, both of which take care of type-safety and have absolutely amazing DX.

#Vitess #Databases #Relational Databases 98 social mentions

2

Last.fm

Here starts the good part, the Spotify stats page is made using fetching my Spotify data like - Currently Playing Song, Top Artists, and Top Tracks which are fetched from last.fm API. I have used SWR for data fetching which makes building type safe data fetching very easy.

#Music Streaming #Music Online #Music 2621 social mentions

3

kbar

I also added a Cmd+K interface to my site to make mouse-less navigation easier. It’s made using kbar and styles using Tailwind CSS. Here is what it looks like -.

#Web App #Productivity #User Experience 6 social mentions

4

ShowdownJS

The first two ages are very heavy on content so I decided to use markdown and tailwind’s typography plugin for styling. I also used showdown to fetch the markdown and turn it into HTML. The code for the above can be found on the site’s GitHub repository.

#Competitive Intelligence #Data Profiling #Resource Profiling And Monitoring 9 social mentions

5

DEV.to

The initial idea I had in my mind was a very minimal site with a minimal navbar that would look more like a sidebar, and the design would be somewhat inspired by leerob’s site. Apart from this, I also wanted my site to display some cool dynamic and real-time data like my Spotify data, my blog posts fetched from dev.to and a guestbook where people could leave messages for me!

#CMS #Blogging #Blogging Platform 387 social mentions