Introducing Gradient King - Never again run out of gradients! 🌈
Tags: javascript, programming, react, node
Published: 2021-03-01 09:20:06

## 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](https://townhall.hashnode.com/announcing-aws-amplify-hackathon-on-hashnode)

### 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614574490444/URynyBT1Q.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](https://github.com/saviomartin/gradientking) /[ Live Demo](https://dev.di7tazxmp7xob.amplifyapp.com/)

## Inspiration

![inspiration](https://cdn.hashnode.com/res/hashnode/image/upload/v1614575117620/kSEY6MZRn.png)

I was struck by these 2 awesome articles [The logic of good gradients](https://medium.theuxblog.com/the-logic-of-good-gradients-421f8d60ad3e) and [The Secret of Great Gradient](https://uxplanet.org/the-secret-of-great-gradient-2f2c49ef3968)
>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 🎧)

%[https://youtu.be/6sM3A8p54Ps]

So far, these are the features Gradient King have

- 100+ gradients
![Untitled design (1).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1614340472271/WhnLB260RT.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614340531321/mW5HMNbkL.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?

- Search
![gh.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1614393540875/SURHID4n3.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614340374196/7N67gcZYc.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614341704462/e9nCrxDMy.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614340404427/lvyrXzsa8.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614340712958/ZzMFy20Yn.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614341287292/Qm9Fpu0ZA.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614341926565/bnHeKuQi8.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](https://github.com/saviomartin/gradientking)

- Minimal UI, Lightning Fast, Elegant animations
![Untitled design (3).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1614341861984/9SM_NwAKE.gif)
Thanks to [Material UI](http://material-ui.com/), [React Router Dom](https://reactrouter.com/web/guides/quick-start), [Animate on Scroll](https://michalsnik.github.io/aos/) and [Animate.css](https://animate.style/). 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

- [React](https://reactjs.org/)
- [CSS]()
- [Jquery](https://jquery.com/)
- [Material UI](http://material-ui.com/): for styling and Icons
- [Animate.css](https://animate.style/): for smooth Animations
- [AOS](https://michalsnik.github.io/aos/): for scroll animations
- [react-router-dom](https://reactrouter.com/web/guides/quick-start): for routing
- [AWS Amplify](https://aws.amazon.com/amplify/): for hosting

## 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
```jsx
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 👇
```jsx
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614334528021/GbcVFTTGP.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 👇
```jsx
const [dark, setDark] = useLocalStorage("DarkMode:", true);
```
And now, we're able to store our data in `localstorage`
![loca.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614335070820/F_25wYx82.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 👇
```css
.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 👇
```css
@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 🤝.
```jsx
const findSearchWord = (e) => {
    if (e.keyCode === 13) {
      window.find(e.target.value);
    }
  };
```
and then we should render our component.
```jsx
 <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](https://github.com/saviomartin/gradientking) and find more. After the basic completion of the code, I pushed it to [Github](https://github.com/) 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](https://aws.amazon.com/amplify/). My friend helped me lot, he guided me to use [Amplify](https://aws.amazon.com/amplify/) and helped me in hosting the app 👏
Amplify is super powerful, it has a much larger space. I was new to [Amplify](https://aws.amazon.com/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/](https://dev.di7tazxmp7xob.amplifyapp.com/)

## Challenges
| Challenge      | Solution |
| ----------- | ----------- |
| adding scroll animations | Used AOS library |
| User want to contribute an Idea | Made a feature request template |
| Change different URLs without loading | Used `react-router-dom` |
| Generate image by uploading faster | Converted it into base64 value |
| user want to see the gradient in a bigger way      | Implemented a page where it show the clicked gradient       |
| Notification withing the app | Used `react-toastify` library |
| User want to report a bug | Made bug template |
| Make the app 100/100 on PWA Check | Optimised app, solved errors |
| Responsiveness of the app   | Used `@media` queries        |
| Stop duplication of same user details in contributors page| Wrote 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

- Voting (user can upvote a gradient)
- User authentication
- Comments
- Generate gradient from a website URL (in progress)
- Generate gradient from a word, eg: love - red gradient
- Download Gradient
- Chrome extension which does all the features
- <strike>Share on Twitter</strike>[(update 27th February 📢)](#share-on-twitter-february-27)
- <strike>Contributors in the Readme</strike>[(update 28th February 📢)](#contributors-in-the-readme-february-28)
- <strike>404 page</strike>[(update 1st March 📢)](#404-page-march-1)
- Launch on Product Hunt

## 🍰 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`](https://github.com/saviomartin/gradientking/blob/main/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

```JSON
{
  "id": 104,
  "githubUsername": "saviomatin",
  "colors": [
    "#3CA55C",
    "#B5AC49"
  ]
},
```
Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/saviomartin/gradientking/compare).

Please read [`CONTRIBUTING`](https://github.com/saviomartin/gradientking/blob/main/CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](https://github.com/saviomartin/gradientking/blob/main/CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.

🛡️ Licensed under `MIT`

---

## 👀 Wrapping Up
Yeah, that's a wrap. Hope you enjoyed [Gradient King](https://dev.di7tazxmp7xob.amplifyapp.com/). 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](https://twitter.com/SavioMartin7)

%[https://twitter.com/SavioMartin7/status/1365957352998993923]

### 🌎 Lets connect
- [Github](http://github.com/saviomartin)
- [Twitter](https://twitter.com/saviomartin7)
- [LinkedIn](https://www.linkedin.com/in/saviomartin/)
- [Instagram](https://www.instagram.com/teen_developer/)

---

## 📢 Changelog
These are the awesome features that I have developed after the publishing of the article. 🙌

[Github Repo](https://github.com/saviomartin/gradientking) /[ Live Demo](https://dev.di7tazxmp7xob.amplifyapp.com/)

- Share on Twitter (February 27 ⏳️)
![twitter.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614521398463/wQMoehrCX.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 ⏳️)
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1614521087397/RxPJwWCYT.png)
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614575454476/q4cUXRDJW.png)
If you go to a page that doesn't exist like [`https://dev.di7tazxmp7xob.amplifyapp.com/asada`](https://dev.di7tazxmp7xob.amplifyapp.com/asada) or [`https://dev.di7tazxmp7xob.amplifyapp.com/404`](https://dev.di7tazxmp7xob.amplifyapp.com/404) you will now get this 404 page, where you could jump back to home 🏠. 404 pages also support Dark Mode 🌒.

> Originally published at [hashnode](https://savio.xyz/introducing-gradient-king-never-again-run-out-of-gradients)