DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for I made a full-stack and type-safe personal site using the t3-stack (Next.js)!
ashish
ashish

Posted on • Updated on

I made a full-stack and type-safe personal site using the t3-stack (Next.js)!

Intro

First of all, thanks a lot for 1000+ followers on Dev.to, I really canโ€™t believe weโ€™ve come this far. I hadnโ€™t even thought that I would make it this far. Thank you so much to all my followers and everyone who reads my content, love you all!

A portfolio site or a personal site is something that you have to build at some point for sure if youโ€™re a web developer and every developer has their own unique way of doing it using unique frameworks. But when it comes to portfolio sites, most of them are just frontend focused with little or no backend but that was not the case for me.

Next.js is always my first choice for building web apps but I wanted a type-safe and full-stack solution for my site, so I decided to use the t3-stack! Iโ€™m a big fan of create-t3-app and Iโ€™m also a maintainer for itโ€™s repo. This blog is not a tutorial but more like a walkthrough and breakthrough of my personal site.

The Initial Idea

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!

NOTE: In case you donโ€™t want to read till end, you can visit the site here and view the source code here. Donโ€™t forget to give a star to the project if you liked it!

The Stack

As I already said, I used the t3-stack for my site which is basically made up of -

  • Next.js as a framework
  • Tailwind CSS for styling
  • Prisma as ORM
  • tRPC for type-safe APIs
  • NextAuth.js for authentication

And youโ€™ll be surprised to know that I have used all of these pieces of amazing tech in my personal site!

The Home Page

The first thing that I always work on while building a web app is making itโ€™s index or home page. I already mentioned above what I wanted my Nav Bar to look like and that my design was inspired by leerob.io. Now, it was time to implement it. After spending a lot of hours breaking and building things using Tailwind CSS, I finally made this index page which I love a lot -

The Home Page looks a bit different on mobile version -

The Static Pages

Now the next things I wanted to build were the static pages like /about, /now, and /links. The first one sounds pretty clear that itโ€™s the About Me page. /now has info about what Iโ€™m doing these days and /links has all my links listed in one single page.

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.

The links page is generated using the map() function from an object containing info about all the links which looks something like this -

export type Link = {
  name: string;
  url: string;
  value: string;
  icon: IconType;
};
export type Links = Link[];

export const links: Links = [
  {
    name: "Discord",
    url: "https://discord.com/users/784363251940458516",
    value: "asheeshh#4872",
    icon: SiDiscord,
  },
  {
    name: "GitHub",
    url: "https://github.com/asrvd",
    value: "@asrvd",
    icon: SiGithub,
  },
    ...
]
Enter fullscreen mode Exit fullscreen mode

Notice how everything is type-safe, thatโ€™s one of the best practices for web developers. Type Safety shouldnโ€™t be optional. IconType is imported from the react-icons library.

The Spotify Stats Page

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.

I have 3 different API routes for each of them which filter out the response so that I only get what Iโ€™m using which also helps making it type-safe easier. The page updates in real time. Here is what the page looks like -

The GuestBook

This is my favorite part of my personal site and I really like the concept. The idea was taken from leerobโ€™s guestbook. I wanted to build something similar where people can leave messages on the site for me and others.

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.

Basically, whenever someone visits the guestbook page, they can see all the previously posted messages but they canโ€™t post a message till they are signed in. NextAuth.js makes it very easy to implement auth in Next.js. Once youโ€™re signed in you can send a text message of maximum 100 words which is validates using Zod.

Head over to the guestbook to send your own message here. Here is what the page looks like -

Image description

Cmd+K Interface

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 -

Image description

Conclusion

Overall, I really like how the site finally looks and Iโ€™m planning to add more pages and cool features to the site too! In case youโ€™re looking for the site itโ€™s deployed using Vercel @ asrvd.me, and the source code is available on the GitHub Repo.

Thanks for reading, see you in the next blog!

Top comments (20)

Collapse
 
nexxeln profile image
Shoubhit Dash

Mine is also made with create-t3-app :)

Asheesh and my website have full stack elements so its perfectly fine to use the T3 stack because of the excellent DX it provides.

But if a website is mostly static I'd recommend using Astro

Collapse
 
asheeshh profile image
ashish Author

@dayvster ICYMI ๐Ÿ‘†

Collapse
 
dayvster profile image
Dayvster ๐ŸŒŠ

Well done, looks good. I dig the super minimal and clean look you went for.
One note: the lightmode/darkmode toggle doesn't seem to work for me yet.

Also didn't Theo say he'd advise against building personal portfolios with the t3 stack :P

Also took the liberty of checking out some of your other posts, dig the writing style, keep it up!

Deffo a blog to bookmark

Collapse
 
asheeshh profile image
ashish Author

thank you so much for taking time to read the blog and other blogs too โค๏ธ

oh, I think you're mistaken, what theo meant was that t3-stack is overkill for a portfolio site with no need for heavy backend like a site with only blog, but mine has pages which utilize whole backend like guestbook so t3-stack was the best choice for me!

Collapse
 
jiasheng profile image
JS

Nice tutorial! Actually, I wrote a similar one about creating a ToDo App using the same stack as T3. So if you feel it relevant, I'd be happy to hear your opinion.
How to Build a Production-Ready Todo App in One Next.js Project With ZenStack

Collapse
 
leob profile image
leob

Thanks for the write-up, a few quick remarks though after looking at your website:

  • First and foremost, the fonts on some pages are REALLY hard to read - worst offenders are the "Now" and "About" pages (asrvd.me/now and asrvd.me/about) - those are virtually impossible to read because the font color is dim and dark ... just change to a lighter color, and Bob's your uncle

  • There's a menu option at the left with a lightbulb icon, which I assume is meant to toggle between dark mode and light mode? That one doesn't seem to work however ...

Overall nice job though, some cool features.

Collapse
 
asheeshh profile image
ashish Author

thanks for the detailed review, I'll fix the font issue asap, I think I might even change the font
About the theme switcher, I'm working on it, am preoccupied atm but it will be working soon!

Collapse
 
eliaschen profile image
EliasChen • Edited on

Perfect blog

Mine also use tailwind css to style my website๏ผˆbuild with astro๏ผ‰

Collapse
 
asheeshh profile image
ashish Author

nice site, i love astro!

Collapse
 
drsushi profile image
Aleksander Grumic

Thanks for this article! It's was great ๐Ÿ‘๐Ÿป and nice work with u'r page! โ˜บ๏ธ
Keep up the good work ๐Ÿ‘๐Ÿป๐Ÿ‘๐Ÿผ๐Ÿ‘๐Ÿฝ๐Ÿ‘๐Ÿพ๐Ÿ‘๐Ÿฟ

Collapse
 
hicmtrex profile image
hichem

great work ๐Ÿ’ช , i like the t3 stack but without tRPC๐Ÿ˜…

Collapse
 
asheeshh profile image
ashish Author

thank you so much, I'd say to try out tRPC - it may seem somewhat complicated at first but it makes a lot of sense once you start using it

Collapse
 
nexxeln profile image
Shoubhit Dash

Great blog post!

Collapse
 
asheeshh profile image
ashish Author

thanks man โค๏ธ

Collapse
 
patilganesh1010 profile image
Ganesh Patil

Great job @asheeshh

Collapse
 
asheeshh profile image
ashish Author

thank you so much โค๏ธ

Collapse
 
matijanovosel profile image
Matija Novosel

I like the minimalistic approach! The colors are too drab for my taste but an excellent website nonetheless.

Collapse
 
asheeshh profile image
ashish Author

thank you so much, I shall add a light mode soon maybe

Collapse
 
passagenick profile image
PassageNick

I hate to break it to you, but a "GuestBook" is as old as the internet itself.

I had a guest book on my website in 1996. ;-)

Collapse
 
asheeshh profile image
ashish Author

that's so cool actually, the first time i had encountered a guestbook on a personal site was on leerob.io though, looks like we are missing out on a lot of good stuff

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›