Introducing Gradient King - Never again run out of gradients! 🌈

Gradient king helps you generate awesome gradients for your next project.

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello Geeks πŸ‘‹

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Due to exams, I wasn't able to attend the last hackathon powered by vercel, but now I'm super excited to share my biggest ever project made as a submission for Amplify Hashnode Hackathon

Little flashback

I constantly need gradients for my projects, yeah, every developer needs them. Gradients are very much important as they give good UX to the users. So, I started planning an app on it and it then enlarged to grab awesome features. The project is never finished, it is still becoming better and better. I'm glad I have created useful stuff for the dev community.


Introducing Gradient King

main.gif Gradient king solves all your gradient problems. It provides a huge collection of gradients and you could easily choose one. Besides It, we also provide a well-efficient gradient generator where you could upload your image and grab the gradients from it. How cool is that πŸ™Œ

Github Repo / Live Demo

Inspiration

inspiration

I was struck by these 2 awesome articles The logic of good gradients and The Secret of Great Gradient

Have you ever noticed how some colors and gradients look so natural and beautiful, while others look so unnatural and weird? The reason for this can be found somewhere between our pupil and our visual cortex. The difference between natural and unnatural is just familiarity or maybe nature is created to perfectly to fit together with our souls. The gradients we identify as beautiful are similar to what we see in nature. Conversely, a combination of colors our eyes have never seen before would rightly evoke feelings of discomfort and unease.

And this is what gave me the idea to build an awesome gradient generator where you could upload your local images πŸ“‚ and get them converted into gradients 🎨

This was the first idea 🎯 in my mind and then I got to make the app more advanced with more features

TL;DR

Please watch the short demo (use headphones 🎧)

So far, these are the features Gradient King have

  • 100+ gradients

    Untitled design (1).gif Gradient King is richly supplied with gradients for you to copy. As this is an open-source project, the list will increase for sure. πŸ‘ You're getting access to a huge amount of gradients and simply clicking on the Copy CSS button copies the CSS code of that gradient to your clipboard πŸ“‹

  • Generate your own gradients

    Untitled design (2).gif Gradient King provides you a playground where you create gradients from your local images. πŸ“‚

    Indeed Mother Nature is rich in colors, So why should we waste this opportunity?

  • gh.gif Gradient King is now able handle search for anything on the page - Colors, authors, contributors, etc πŸ”

  • Seperate page for each gradient

    Untitled design (6).png Gradient in a small part of a page may not be useful for you as you have to use in big area. No problem, just click on a gradient and it will open in a relatively larger area πŸ’ͺ

  • PWA, Installable app

    Webp.net-resizeimage (5).png Yeah, it was a task but I accomplished it. I managed to get passed on all the Progressive Web App checks. Now, you're able to install the app on your local device and works offline πŸ’»

  • Contributor page

    Untitled design (7).png Are you an open-source enthusiast, this is for you. We proudly show our contributors on our main website and we love to ❀️ Go ahead and give a pull request, get featured on our contributor's page πŸ‘¨β€πŸ’»

  • Dark mode

    Webp.net-resizeimage (4).png Dark mode πŸŒ’, an awesome feature everyone loves and cares about. Of course, I found time to work on it and make it happen. The dark mode is acceptable for all pages.

  • Fully Responsive

    Untitled design (10).png Responsiveness is an important part of a website πŸ“±, it doesn't matter why it should be, it just thinks you should do it. Yeah, I did get the same feeling.

    I know developers are not gonna code on their smartphones but as a web developer, it is my responsibility to add responsiveness to my project.

  • Free and Open Source

    gh.png I'm an open-source lover, I love to be πŸ’–. So, inviting all devs to view the code as well as contribute to the app. github.com/saviomartin/gradientking

  • Minimal UI, Lightning Fast, Elegant animations

    Untitled design (3).gif Thanks to Material UI, React Router Dom, Animate on Scroll and Animate.css. These awesome libraries helped me to add these awesome UX features. I super sure that they did a great job in the UX of my app ⚑️.

    Everything loads super fast (without even loading), So appropriate to use on daily basis.

Gradient King is super productive enough to grab the best gradients for your next app ✨️

πŸ’» Built with

Planning, Building, and Deploying

Oh yeah, it was time-consuming, but I enjoyed it.

  • Designing

    I used Figma for my design, I'm not an expert but I know how to do basic designing and prototyping.
  • Planning

    Notion is an awesome tool to be cared for. It is super productive enough for me to plan my daily work. I used Pomodoro timers too, I want to be productive.
  • Time to code

    I'm a true React lover. I use it for all my projects and I did use it for creating Gradient King

    npx create-react-app gradientking
    

    And it is how it started, coding components, designing it, getting errors, copying code from StackOverflow, debugging, and Of course, it continues... I wanted my app to get the data from a JSON file. So, I used useEffect to make everything work. Like this πŸ‘‡

    const [data, setData] = useState([]);
    const getData = () => {
      fetch("data.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      })
        .then(function (response) {
          console.log(response);
          return response.json();
        })
        .then(function (data) {
          console.log(data);
          setData(data);
        });
    };
    
    useEffect(() => {
      getData();
    }, []);
    

    And I'll the respose as an array so that I could map it or pass it to other pages. Screenshot 2021-02-26 15:44:55.png And the next thing was that to implement Dark Mode πŸŒ’. I created a component useLocalStorage.js, I did it to avoid duplication of the same code. Now everything becomes fast and easy, we can now use localstorage like this πŸ‘‡

    const [dark, setDark] = useLocalStorage("DarkMode:", true);
    

    And now, we're able to store our data in localstorage loca.png Now, I made a code that if dark mode is true and dark class and else dark mode is false keep it same. So, we just have to change some of our CSS like this πŸ‘‡

    .dark .App {
    background: #333;
    }
    

    And that's it. Now, we have dark mode in our app. Next, to make the app responsive, I used @media queries. Like this πŸ‘‡

    @media (max-width: 500px) {
      .preview {
         width: 90%;
         height: 70%;
      }
    }
    

    To handle the search, it was easy coding just need a bit of logic. There is an inbuilt function called find() and it helps 🀝.

    const findSearchWord = (e) => {
      if (e.keyCode === 13) {
        window.find(e.target.value);
      }
    };
    

    and then we should render our component.

    <input
        type="text"
        placeholder="Search for a Color or Author"
        className="input"
        onKeyDown={(e) => findSearchWord(e)}
    />
    

    And yeah, the total build process is far longer, I just told you the main part of it. Head over to Github Code and find more. After the basic completion of the code, I pushed it to Github and then whenever I need to add more stuff I did a new commit.

  • Deployment

    Honestly, I'm super new to Amplify. I watched a lot of youtube videos in fact did some tutorial to get started with Amplify. My friend helped me lot, he guided me to use Amplify and helped me in hosting the app πŸ‘ Amplify is super powerful, it has a much larger space. I was new to Amplify so I wasn't not knowing how to use these, but I'm sure I'm gonna learn more on AWS. It is yet to be explored for me 🌊

    Feel free to use Gradient King: https://dev.di7tazxmp7xob.amplifyapp.com/

Challenges

ChallengeSolution
adding scroll animationsUsed AOS library
User want to contribute an IdeaMade a feature request template
Change different URLs without loadingUsed react-router-dom
Generate image by uploading fasterConverted it into base64 value
user want to see the gradient in a bigger wayImplemented a page where it show the clicked gradient
Notification withing the appUsed react-toastify library
User want to report a bugMade bug template
Make the app 100/100 on PWA CheckOptimised app, solved errors
Responsiveness of the appUsed @media queries
Stop duplication of same user details in contributors pageWrote a jquery code to solve it

✨️ What's next

I'm pretty sure that I will be constantly adding more and more extraordinary features as I consider this as my biggest project to date. These all are the things I have planned to do in the next few days

🍰 Contributing

As I have said earlier, Gradient King is an open-source project 🀝 and I'd like to invite all devs over the planet to contribute to the app. Here is how you can contribute.

Head over to public/data.json and add your gradient at the bottom of the list. Here is an example contribution πŸ‘‡

Make sure that you have all the required items

{
  "id": 104,
  "githubUsername": "saviomatin",
  "colors": [
    "#3CA55C",
    "#B5AC49"
  ]
},

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

πŸ›‘οΈ Licensed under MIT


πŸ‘€ Wrapping Up

Yeah, that's a wrap. Hope you enjoyed Gradient King. Feel free to use it for your future projects. Share with other friends. Let them know of the resource. Do not hesitate to share your feedback. Share on twitter, tag me @saviomartin7

🌎 Lets connect

🎸 Feedback

Gradient King need your feedback to improove. Help Gradient King by adding your valuable reviews. Support the development! πŸ’–


πŸ“’ Changelog

These are the awesome features that I have developed after the publishing of the article. πŸ™Œ

Github Repo / Live Demo

  • Share on Twitter (February 27 ⏳️)

    twitter.png You can now easily share on Twitter 🐦. Just click on the Twitter icon in the footer and you will be opened to Twitter in a new browser with a pre-defined text.

  • Contributors in the Readme (February 28 ⏳️)

    We love to show our proud contributors πŸ‘¨β€πŸ’». Now, you can see them in the GitHub readme also. Feel free to contribute in the app.

  • 404 page (March 1 ⏳️)

    404.png If you go to a page that doesn't exist like https://dev.di7tazxmp7xob.amplifyapp.com/asada or https://dev.di7tazxmp7xob.amplifyapp.com/404 you will now get this 404 page, where you could jump back to home 🏠. 404 page also support Dark Mode πŸŒ’.

  • New Icons (March 2 ⏳️)

    New Icons are here! 😎 Gradient King has now got super stylish gradient icons. This could help as this icon will replace favicon and act as a logo when Users install Gradient King on their device πŸ’»πŸ–₯️

  • Add Authentication (March 2 ⏳️)

    Added authentication to the project. Now, you can Sign In using your google account. It is persistent. It won't ask you to login when you refresh again πŸ”„. // Todo: implement upvoting β–²

πŸ™Œ Support

My projects are fueled by coffees β˜•, get one for me! β˜•

Tapas Adhikary's photo

Great project Savio. I'm sure it is going to help many in the dev community. I am looking forward to contributing to it in the future. Great work.

Savio Martin's photo

Thanks a lot Tapas Adhikary, Glad you liked the app. Feel free to contribute in the project. It is so nice to be heard I helped the dev community. πŸ‘¬ Thanks for your feedback. πŸ’–

Rahul's photo

Savio this looks preety amazing. I have saved and I will surely contribute to this app in the future.

Savio Martin's photo

Thanks, brother. Appreciate your feedback. Glad you found this useful. Feel free to contribute to the app. Thanks Rahul πŸ‘ŠπŸ’–

Hrithwik Bharadwaj's photo

This is super cool stuff for developers. Amazing work Savio Martin also a nice write up

Savio Martin's photo

Thanks for this amazing feedback Hrithwik Bharadwaj, Feel free to contribute to the app. Glad it helps πŸ’–πŸš€

Favourite Jome's photo

This is an awesome project. I'm looking forward to contributing to the project.

Savio Martin's photo

Thanks Favourite Jome, I'm glad you liked the project. Go contribute it πŸš€. Thanks for the comment πŸ‘

Gaurav Tewari's photo

This is an awesome project for developers, it will help me a lot in my projects. Amazing Work Savio Martin

Savio Martin's photo

Thanks Gaurav Tewari, I'm glad I could help you as well as the entire dev community πŸ™Œ Feel free to contribute to the build process. Thanks for your feedback πŸ’–

Anshu Meena's photo

this is really a amazing project

Savio Martin's photo

Thanks Anshu Meena, Feel free to contribute to the app. Thanks for your feedback. Glad you liked the app πŸ™ŒπŸ’–

Aswin Asok's photo

Simply awesome work Savio, It is going to be useful in a lot of my future projects.

Savio Martin's photo

Thanks Aswin Asok, Glad you found the app useful. Feel free to use the app as well as contribute to the work process. Thanks for the feedback πŸ¦„

Jobin S's photo

Great work savio, this will help me in my future works and very excited to contribute ❀️

Savio Martin's photo

Thanks Jobin S, I am happy to help you in your future projects. New features are on the way. Stay tuned. Feel free to contribute to the build. Thanks for the feedback βœ¨οΈπŸ¦„

Sanvi Merin's photo

Great app brother, glad to see a lot of amazing gradients and awesome features. I will surely contribute to this project. πŸ™Œ

Savio Martin's photo

Thanks Sanvi Merin, I'm glad you found the project helpful. Feel free to contribute to the project. Thanks for the feedback. 🍻

Mary's photo

Stunning project, bookmarked and will contribute to the app in the future. I have already started using it for my freelance works.

Savio Martin's photo

It is great to be seen that you already started using it for your projects. Feel free to contribute to the work. Thanks for your feedback. πŸ€πŸ™Œ

Lalit's photo

Such a fabulous tool 😍.
Never found an awesome tool for gradients like this

Savio Martin's photo

Thanks you πŸ’– Lalit, Thanks for the amazing feedback. Feel free to use Gradient King as well as contribute to the build. Glad you loved the project

Pankaj Tanwar's photo

Hey Savio, I am not a frontend guy but trust me this is really really cool. Great project. Very promising. Keep up the good work, man.

Savio Martin's photo

Thanks a lot Pankaj Tanwar! Glad you enjoyed the app! Always Appreciated! v2 of Gradient King will be soon live! πŸ₯

Mohith Gupta Korangi's photo

You are an inspiration bro....Good Job!!! So, When did you start this project? May I know some resources that you have been learning from?

Savio Martin's photo

Hey Mohith Gupta Korangi, Thanks for this amazing feedback. I enjoyed this one.

It took one and half weeks to plan and design the UI. After then, I started developing the app. My most important aim 🎯 was that users could add local images and generate gradients from them.

Here are some of my learning resources

and many more... These are some of the main learning resources that got me inspired or helped me to learn the stuffs. Thanks for your feedback brother πŸ™ŒπŸ»

Mohith Gupta Korangi's photo

Thank you Savio Martin That'd be helpful for me.

Martin Thampi's photo

Great article Savio Martin, loved the project and saved it. Btw great use of gifs and mockups.

Savio Martin's photo

Thanks, Martin. Feel free to contribute to the app. Thanks for your comment. Thank you πŸŒŸπŸ™

Deepak Kumar's photo

The user interface looks simply great man.

Do checkout one of my application which I built yesterday.

You can find online cohorts and community from this platform.

tech.deepakhq.com/xplorer-a-curated-marketp..

Savio Martin's photo

Thanks Deepak Kumar, Glad you found the UI great. I just thought that UI should be clear, simple, and minimal. Yeah, btw thanks for your feedback. πŸ‘πŸ™Œ

Rayyan Rasheed's photo

It's Amazing Bro, You are really awesome. This will help me in my future projects. Thank You for this.

Savio Martin's photo

Thanks Rayyan Rasheed. Glad this project helps you in future. You rock 🀘Thanks for your feedback. Feel free to contribute to the work process.

Rayyan Rasheed's photo

Savio Martin Sure as soon as possible I will be there in the contributors list in this GitHub repo

Usman Sabuwala's photo

Now I don't have to find cool gradients! Thanks a lot Savio. 😍

Savio Martin's photo

That's awesome Usman Sabuwala, I'm glad I could help you. Feel free to use the gradients as well contributing in the project. Thanks for the awesome feedback! πŸ’–

Joyancefa's photo

Very nice project and the article was easy to read πŸ˜€

Savio Martin's photo

Thank you! Thanks for the feedback, Glad I could help you!

David Galiata's photo

Amazing work!

Savio Martin's photo

Thank you! πŸ₯°