Slickr

<p align="center"> <a href="https://slickr.vercel.app/"> <img alt="Slickr" src="public/assets/logo.png" width="125" /> </a> </p> <h1 align="center">Slickr✨️</h1> <p align="center"> <a href="https://github.com/saviomartin/slickr/blob/master/LICENSE" target="blank"> <img src="https://img.shields.io/github/license/saviomartin/slickr?style=flat-square" alt="slickr licence" /> </a> <a href="https://github.com/saviomartin/slickr/fork" target="blank"> <img src="https://img.shields.io/github/forks/saviomartin/slickr?style=flat-square" alt="slickr forks"/> </a> <a href="https://github.com/saviomartin/slickr/stargazers" target="blank"> <img src="https://img.shields.io/github/stars/saviomartin/slickr?style=flat-square" alt="slickr stars"/> </a> <a href="https://github.com/saviomartin/slickr/issues" target="blank"> <img src="https://img.shields.io/github/issues/saviomartin/slickr?style=flat-square" alt="slickr issues"/> </a> <a href="https://github.com/saviomartin/slickr/pulls" target="blank"> <img src="https://img.shields.io/github/issues-pr/saviomartin/slickr?style=flat-square" alt="slickr pull-requests"/> </a> <a href="https://twitter.com/intent/tweet?text=Checkout%20slickr.vercel.app%20by%20@saviomartin7.%20The%20most%20powerful%20way%20to%20create%20awesome%20cover%20images%20for%20your%20@hashnode%20blog%20🔥"><img src="https://img.shields.io/twitter/url?label=Share%20on%20Twitter&style=social&url=https%3A%2F%2Fgithub.com%2Fsaviomartin%2Fslickr"></a> </p> <p align="center"><img src="public/assets/slickr.gif" alt="slickr gif" width="550" /></p> <p align="center"> <a href="https://slickr.vercel.app/" target="blank">View Demo</a> · <a href="https://github.com/saviomartin/slickr/issues/new/choose">Report Bug</a> · <a href="https://github.com/saviomartin/slickr/issues/new/choose">Request Feature</a> </p>

Introducing Slickr ✌️

Slick is the most powerful and the easiest app to create beautiful cover images for your hashnode blog. Slickr lets you be flexible by handling backgrounds, gradients, patterns, images, icons, bookmarks, uploads and a lot more. You can drag, resize and position your components and give a new feel to your blog. When you're done export it as PNG, JPG, or SVG. Say hello to Slickr 🤟

Read blog to understand better 📖

🚀 Demo

<a href="https://slickr.vercel.app/" target="blank"> <img src="public/assets/slickr-cover.png" /> </a>

Try the App: Slickr

🧐 Features

Slickr comes up with a whole bunch of amazing features to provide you the best experience, Here're some of our best features.

Supercharge your hashnode blog with slickr.

• 💯 Draggable, Resizable, Wrappable
• 🎩 Upload your Images and use it
• 👾 32,000+ Icons (powered by iconsfinder)
• 📦 Use Images from Unsplash
• 🔖 Save Icons or Images
• 🍭 Edit Everything (text, color, size, family, weight, lineheight etc)
• 🌱 4 way backgrounds (Solid, Gradient, Pattern, Image)
• 🥁 Share Images (Get Public Share URL)
• 🌘 Dark mode
• 👤 Join using Google, Github, Facebook
• 💻 Fully Responsive
• 🚀 Fast Downloading
• ⤵️ Export as PNG, JPG, SVG

Enjoy creating cover image for your hashnode blog like never before, get started in seconds ✨️

🛠️ Installation Steps

1. Clone the repository

git clone https://github.com/saviomartin/slickr.git

2. Change the working directory

cd slickr

3. Install dependencies

npm install

4. Create .env file in root and add your variables

NEXT_PUBLIC_UNSPLASH_CLIENT_ID=UNSPLASH_CLIENT_ID
NEXT_PUBLIC_IMGBB_STORAGE_KEY=IMGBB_STORAGE_ACESS_KEY
NEXT_PUBLIC_CLERK_FRONTEND_API=CLERK_FRONTEND_API

5. Run the app

npm run dev

You are all set! Open localhost:3000 to see the app.

🍰 Contributing

• 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.

💻 Built with

• Next JS
• Clerk: Complete User Authentication
• react-color: for color pickers
• html2canvas: for export as PNG, JPG, SVG
• react-rnd: for draggable and resizable components
• react-icons: for icons
• nprogress: for slim progressbars
• react-hot-toast: for toasts
• Material UI: for components
• Vercel: for hosting

🌈 What's next

Slickr is a special project made to empower the amazing hashnode community in the hop to see great articles with beautiful covers. Here are some of my plans ahead for Slickr 🤞

• Ctrl+C and Ctrl+V for components
• history of created covers (in progress)
• Export as GIF (in progress)
• Collaborate with patner
• Templates
• Better Position Tracker
• Rotatable, Scalable, Groupable Components

🛡️ License

This project is licensed under the MIT License - see the LICENSE file for details.

🦄 Deploy

<a href="https://vercel.com/new/project?template=https://github.com/saviomartin/slickr"> <img src="https://vercel.com/button" height="37.5px" /> </a> <a href="https://app.netlify.com/start/deploy?repository=https://github.com/saviomartin/slickr"> <img src="https://www.netlify.com/img/deploy/button.svg" height="37.5px" /> </a> <a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/saviomartin/slickr"> <img src="https://camo.githubusercontent.com/df21703b4229f8d44f76c2d56073657a4ab450ca4566ba5d24d05bf528c298f8/68747470733a2f2f7777772e6465706c6f79746f646f2e636f6d2f646f2d62746e2d626c75652e737667" height="37.5px" /> </a>

👨‍💻 Author

👤 Savio Martin

• Twitter: @SavioMartin7
• Github: @saviomartin
• Hashnode: @saviomartin

🙏 Support

This project needs a ⭐️ from you. Don't forget to leave a star ⭐️

If you found the app helpful, consider supporting me with a coffee.

<a href="https://www.buymeacoffee.com/saviomartin"> <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50px"> </a>

---

<h3 align="center"> Slickr needs a ⭐️ from you </h3>