Building My First Next.js Project: Components, Props, Arrays, and Dynamic Progress Bars

Building a Next.js Project Progress Tracker while learning React components, props, arrays, TypeScript, and dynamic UI
Building a Project Progress Tracker while learning the fundamentals of Next.js, React, TypeScript, and dynamic UI development.

Learning a new framework is always a little strange at first.

You install a bunch of packages, the terminal spits out enough text to make you question your career choices, and suddenly you’re staring at files with names like page.tsx wondering what exactly you signed up for.

That’s where my latest project begins.

I’m building a simple Project Progress Tracker with Next.js. The idea is straightforward: create an application that tracks the other applications I build, including how far along each project is.

Yes, I’m building a project to track my projects. We’re officially through the looking glass.

More importantly, the app gives me a practical way to learn Next.js and React concepts instead of working through isolated examples that never turn into anything useful.

So far, I’ve covered components, props, TypeScript types, arrays, objects, .map(), JSX, Tailwind CSS, and dynamic progress bars.

Here’s what I’ve learned along the way.

Continue reading “Building My First Next.js Project: Components, Props, Arrays, and Dynamic Progress Bars”