Breaking free from tutorial hell Part-2

Coding Noob — Wed, 20 Dec 2023 16:20:02 +0000

Alright Part 2 of me trying to get out of tutorial hell.

What did I manage to accomplish till now?

Yesterday was an authentication adventure! I plunged into the world of NextAuth and user management, determined to conquer all challenges without the crutch of tutorials(mostly). It wasn't a walk in the park, though.

First, setting up NextAuth with NextJS 14 proved trickier than anticipated. Turns out, only the beta version works with the latest NextJs 14 framework – who knew? After wrestling with beta code and cryptic error messages, I finally managed to make it work somehow, And now I had a basic OAuth with Google and Git Hub, only to face another hurdle: the database adapter.

I envisioned Prisma waltzing with my PostgreSQL database, simplifying interactions with SQL's cryptic tongue. Alas, NextJS middleware and Vercel Edge runtime had a different plan. Prisma Client wasn't welcome there, forcing me to abandon middleware and guard routes with individual page checks.

But hey, progress! Authentication flowed smoothly, user data was comfortably posted to the database. Now came the real dance: building functions for adding, updating, and deleting to-dos.

Here's where things got spicy. Every to-do had to be a one-man show, visible and editable only by its creator. To pull this off, I needed the user ID – a missing piece in the session data. After watching tons of tutorials and reading a lot of docs I managed to figure out how to attach the userid to the session by using a callback function. Finally, the user ID joined the party, allowing me to attach it to to-dos and track each user's creations.

Server-side magic took over once the user ID puzzle was solved. Through carefully orchestrated actions, to-dos were born, each inextricably linked to their creator's ID. This seamless dance of data ensured that every to-do remained visible and editable only to its destined user.

Voila! A small project, built (mostly) solo, free from the clutches of tutorials. It wasn't always graceful and if someone who knows what they are doing read my code they might die of cringe, but the journey was just as rewarding as the destination.

Trying to get out of the tutorial hell.

Coding Noob — Mon, 18 Dec 2023 16:15:32 +0000

Warning: I have no idea what I am doing and I have never done this before.

Hello, I'm a relatively new coder trying to become a full-stack web developer. I have been learning coding for about half a year now but I am deep inside tutorial hell and cannot code any projects on my own.

I have built multiple projects by just mindlessly following tutorials on YouTube. Even after all these tutorials, I cannot build even a simple project on my own. So I decided to build some projects on my own and become a better coder.

A very short term goal I have is to build a basic admin dashboard by the end of this year.

This blog is for me to keep myself accountable and motivated to code daily.

How much do I know?

I feel like I know all of these but I just can't apply them to actual projects.

The basics
- HTML, CSS, and JS.
- A little bit of React for the front-end.
- Express for backend
- MongoDB.
A bit more advanced stuff that I think I know.
- Typescript
- Next.Js (I think this is kind of easy if you know React)
- ZOD
- SQL (PostgreSQL)
- Prisma ## Building a Todo List

Yeah, that is the best thing I was even remotely confident in being able to build on my own.

How did I build it?

I first set up a basic Next.Js project (Yeah I decided to build it in Next.Js because I like the App Router and the server actions)
Set up Shadcn-ui
- Shadcn because I like the default theme it has.
Created a basic modal with shadcn-ui that is used to Add a new Todo.
The modal has an Input form with simple validation using ZOD.
On submission of the form a server action is triggered to create a new todo using Prisma.
All the stored todos are displayed on the front end on a Table.
You can also delete or edit the to-do.
The Edit todo also opens a modal with an Input form with the current data already pre-filled.
You cannot mark the todo as Done because I completely forgot about that.

What Next?

There are a lot of things missing from this like no loading, and no proper error handling but it is a start.

So now the task is to fix those and re-factor the code because the code that I have written is horrible.

Authentication is very important too.
I was messing around with NextAuth for authentication but it was hard to add it after the latest update.
I did manage to add it but it was using drizzle adapter for some reason the Prisma adapter did not work for me. Maybe I am just too dumb for this.

Screenshots of what I accomplished today.

It ain't much but it's a start.

Thats all I did today Thank you

Forem: Coding Noob

Breaking free from tutorial hell Part-2

What did I manage to accomplish till now?

Trying to get out of the tutorial hell.

How much do I know?

What Next?