Colorem

In the tapestry of modern design, color palettes weave emotions, breathe life, and paint stories upon the canvas of innovation. Explore them on Colorem.

Github View Live

Colors, like music, evoke emotions and set the tone for your creativity.

Access our app effortlessly, from anywhere, by your mobile's convenience.

Responsive design ensuring seamless user experiences on all devices!

Inspiring Designs, One Color Harmony at a Time!

For in-depth project development insights, explore our dedicated info page.

Deep Dive

Explore further details regarding the tech-stacks used and the experience gained from developing this project.

Next.js - Primary framework
React.js - Utilized core concepts of React in 90% of the project.
Material UI - The ultimate design-component library.
Contentful as the Headless CMS.
Redux - For state management on both client & server side.
Firestore takes care of all data.
Firebase - For User authentication & management
MongoDB - To store larger chunk of palettes & gradients data.
Jest to test the Next.js app.
ES-Lint kept my code a little tidy.

Macbook Air M1 - The device I used throughout this project.
VS Code - Primary IDE
GoDaddy - for a sober domain name.
Vercel - A super charged platform that i primarily used for CI/CD & deployments.
Jira - Github Projects, An alternative for Atlassian Jira, which i used for project management following Agile (It's hard when you're the only team member).

Hello!
Please do not mistake this explanation with a blog post. I will be concise here.

If you want to skip reading more, collapse here

IDEA

I must be honest; the inspiration for this idea came from an impressive website called coolors.co. I was drawn to its practicality and captivated by its user interface.

While inspecting the network tab, my tech instincts kicked in as I noticed numerous API calls occurring during each render, which bothered me. This led to the inception of Colorem, driven by the need to address this issue. I subsequently opted for Next.js for server-side rendering, resulting in a significant reduction in API calls.

EXPERIENCE

The fundamental concept behind the website closely resembled Coolers.co.

Added features: Palette liking, saving, and code copying (JSON, Array, CSS property) and authentication.
Engaging journey: The six-month project duration flew by, thanks to the captivating nature of Next.js.
Seamless development: Next.js streamlined the development process and upheld React's fundamental principles, offering valuable insights.

That was the lame asf story for my first Full-Stack production ready project: Colorem.

Fill the Feedback form 🚀