Colors-related toolkit¹ for Artists, Designers & Developers.
¹As of now, not really a toolkit.

---

Table of Contents 📖

• Introduction 🔎
• Usage 🚀
• Tech Stack 💻
• Thoughts 💭
• Acknowledgments 👥
• License 📝

Introduction 🔎

Kolor-Dev is a color-related toolkit solely developed by @kon-pas with the aim of self-learning web development.

As for now, there is no intent to provide further support.

Usage 🚀

Head to showcase.md for a quick showcase.

Alternatively, visit Kolor-Dev directly or clone the repository and run the following:

npm install
npm run build
npm run start

The website can now be accessed via http://localhost:3000 on your machine or via <TARGET_MACHINE_IP>:3000 on your local network.

Tech Stack 💻

• Scripting

  • TypeScript@4.8.0 – static typing with pleasure
  • SassScript@1.54.5 – CSS preprocessing

• Backend

  • Next.js@12.2.5 – data fetching, routing & plenty of features Next.js has to offer
  • Prisma@4.8.1 – data mapping, modeling & typing, database client

• Frontend

  • React@18.2.0 – on which Next.js is built
  • TailwindCSS@3.1.8 – utility CSS classes
  • TailwindCSS Debug Screens@2.2.1 – manual layout testing

• Deployment

  • MongoDB Atlas – database deployment
  • Vercel – frontend & backend deployment

• Design

  • Adobe Illustrator – vector graphics
  • Adobe Photoshop – sketches, raster illustrations

• Code Quality

  • ESLint@8.22.0 – static code analysis
  • Prettier@2.8.3 – code formatting
  • BEM – CSS methodolody
  • Lighthouse – performance, quality & correctness

• Utils

  • clsx@1.2.1 – constructing class strings
  • colvertize@0.1.0 – converting colors
  • nanoid@4.0.0 – generating IDs
  • react-toastify@9.1.1 – toast notifications

Thoughts 💭

Next.js with TypeScript has the DX I admire.

Using Prisma was convenient, but the project is way too small to fell profiting from using it instead of other tools, like Mongoose for database client and data modeling. As I was not restricted to a certain database, mapping was not crucial.

TailwindCSS did not boost my productivity, as it takes time to get used to it, but I believe the reward compensates the effort.

Coding styles in SCSS & BEM was fine, but nothing more. I still would go with CSS-in-JS if I were to choose.

That being said, in general and personally, TailwindCSS with CSS-in-JS is my favorite approach.

Acknowledgments 👥

Inspired by Color Hunt and coolors. SVG icons by heroicons. Hero section SVG path of the landing page taken from LWKS.

License 📝

This project is MIT licensed.