Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bradvatne/kanban

figma recreation + supabase backend
https://github.com/bradvatne/kanban

Last synced: 5 months ago
JSON representation

figma recreation + supabase backend

Awesome Lists containing this project

README 

        
🌐 **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 🌴