🌐 Kanban - A Task Management Portfolio Project Built with Next.js

Crafted pixel-perfect from the Kanban Figma files provided by frontendmentor.io.

Here are the tech details and my thoughts:

🛠 JS Framework - Next.js

Next.js makes the creation of full-stack applications smooth and enjoyable. I have a particular fondness for the new app router and server components. I'm planning to stick with this framework for the foreseeable future.

🔐 DB/Auth - Supabase

Supabase has been my go-to for several side projects, and I can't get enough of it! It offers a generous free tier and provides out-of-the-box authentication and APIs. Combined with Next.js, it's like doing full-stack development on autopilot. I'm a big fan of the Supabase client too - it's impressively type-safe and features an intuitive API.

🔄 State Management - Zustand

This is my first project using Zustand. My initial thoughts are that it reduces a lot of the boilerplate code associated with state management tools like Redux (especially when combined with immer), and it magically doesn't even require a context provider. My implementation here is extremely basic, but Zustand is a tool that I would certainly like to dive deeper into in the future.

🎨 CSS Framework - TailwindCSS

TailwindCSS is my love. At this point, I know the Tailwind selectors better than the original CSS ones. It just clicks with me, and with the mastery of multi-cursor methods, I can't see a reason to pick a different CSS framework. If I wasn't attempting to implement a Figma file, I would've liked to use a UI library such as ShadCN on top of it.

💡 Concepts Practiced:

🛂 Authentication

🔒 Protected Routes

📑 Row-Level Security

🧮 State Management

👍 Optimistic Update Pattern

🕴️ Singleton Pattern

❗ Form Validation & Error Handling

💾 Persisting Data in a PostgreSQL Database

🖼️ Figma File 1:1 Recreation

🎀 Tailwind CSS

🌓 Dark/Light Theme

📚 General Things I Learned from This Project

📝 Do More Preplanning

When I kicked off, I started coding the UI straight away, and as I continued, I decided to add data persistence through a database. I began creating tables, rows, and columns on-the-fly, with no logical connection to the front end, resulting in quite a mess. Several times, I had to refactor due to these missteps. Moving forward, I plan to have my data all sorted ahead of time before I start working on the front end.

🎯 Just Get it Done

A common roadblock in my development process is the quest for the perfect solution, or doubts about the approach I'm taking. In many projects, I lose sight of the finish line because I get wrapped up in 'optimizing' and starting over, rather than just pushing through. In this project, I maintained a mindset that, so long as what I'm doing works and doesn't seem like it will cause issues further down the line, it's good enough. While I can (and did) refactor later, the first time around, I just need the code to be readable and the project to function.

🛠 It's Not Cheating to Use Tools

The layers of abstraction offered by Next.js and Supabase in building a full-stack application are quite astonishing. Sometimes, I feel like being so distant from what's happening behind the scenes makes me less of a programmer - as if not writing in assembly somehow disqualifies me. However, this project helped me shake off that notion. The goal isn't about being a 'badass programmer', but about building stuff. And these tools make the process enjoyable and (relatively) straightforward.

Thanks for taking the time to check out my project!

Made with ❤️ by Brad in Bali 🌴