Hello! In this series of posts, I'd like to document my journey of creating a fullstack app as a frontend dev. Don't get me wrong, I love frontend, but there is something cool about fullstack. Therefore, I decided to create this series to share how I go about creating and learning new stuff, and maybe hopefully you, as a reader, will get something from it. If not or you feel like there is something I explained wrong or could be done better, feel free to hop in the comments 😄

Main goal

Have you ever read a book, but then forgotten about the concepts it had, or you've been told to make notes, so it will be easier to comprehend the material? Well, I've been there (no this is not a commercial), but I never stuck with the classic paper notebook. So, I had this idea that instead of creating another To-Do app, I'd make an app that will fetch books from an external API and each book can be given notes. The app would also have authentication, so each user has their own set of notes to a particular book. This way, I'll work with multiple different fullstack concepts.

The stack

The stack I'll use is the one Theo from Theo - ping.gg YouTube channel recommends. Mainly, because I like the promise of end-to-end type-safety and also Jack Herrington said it is easy to grasp for beginners. So, in my projects directory I ran:

npx create-t3-app@latest

This command helped me bootstrap the project. The command also lets you pick technologies. I chose everything (tailwind, prisma, trpc), but the next-auth. I thought by creating my own login system I'd learn a lot, and boy was I right, more on that in the next part of this series, Authentication.