Prologue

#webdev #sideprojects #nextjs #fullstack

This walkthrough is to improve my skill with Next.JS. My focus is to learn fullstack with Next.JS by creating note taking app. Shoutout to Frontend Mentor and Notion for my inspiration to create this app.

Techstack

Here’s my techstack:

NextJS
Tailwind
TipTap for text Editor
Prisma
PostgreSQL
NextAuth
Vercel
Bootstrap Icon for icons

Goal

This app should be able to:

Sign in, sign up, and log out your account.
Create and edit note that includes:
- Title
- Tags
- The content of the note
Use text editor to create the content of the note.
Delete, archive, and search a note.
Switch theme.
Show all tags.

It needs to be said that my focus is to learn the backend aspect of Next.JS, which… probably means that I’m not going to make this app responsive 😅. I know, I know… A frontend dev that refuses to make her side-project responsive. Tragic. Also, this is going to be my first ever series and first time creating fullstack app, so I’m going to need every inputs that you can give me and I would be so happy for them.

As usual full code can be found at my github. It is not done yet, as you can tell. But, that’s really about it. Let’s learn together 😁

Thanks for coming by and Peace ✌