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

Last update: Dec 21, 2022

Overview

Slickr ✨️

View Demo · Report Bug · Request Feature

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

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

Clone the repository

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

Change the working directory

cd slickr

Install dependencies

npm install

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

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

👨‍💻 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.

Slickr needs a ⭐️ from you

Create elegant screenshots of your source code. Built with SolidJS

Create elegant code screenshots of your source code. Introduction CodeImage is the newest tool to help developers to create beautiful screenshots of t

Jan 3, 2023

Pinging.net - Monitor Your Internet Connection

Pinging.net Pinging.net quickly determines if you are online by running multiple tests. It then continues to monitor your connection via repeated test

Nov 27, 2022

Customize your README.md file with ready-to-use sections in a simple way with the web editor

myreadme Customize your README.md file with ready-to-use sections in a simple way with the web editor Docker version Docker Hub docker run -p 7000:300

Jul 25, 2022

A community-centric site like you've never seen before.

Kleptonix A community-centric site like you've never seen before. Overview This section will be updated when basic posting and account creation functi

Apr 19, 2022

Get started on Remix with TypeScript and Tailwind CSS in seconds

remix-typescript-tailwind-quickstart Get started on Remix with TypeScript and Tailwind CSS in seconds. This is an example setup of Remix building on t

Mar 16, 2022

simple-remix-blog is a blog template built using Remix and TailwindCSS. Create your own blog in just a few minutes!

simple-remix-blog is a blog template built using remix.run and TailwindCSS. It supports markdown and MDX for the blog posts. You can clone it and star

Dec 8, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals will send an image to be processed, this then gets sent to a Python instance which will get the data read from the image. That data gets sent back and will be saved to the account this meter belongs to. This gives you the ability to track your currently analog meter in a digtal environment.

Usage App Server About this project App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals

Dec 20, 2022

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

JSON Server Get a full fake REST API with zero coding in less than 30 seconds (seriously) Created with 3 for front-end developers who need a quick ba

Jan 3, 2023

Get any Candy Machine ID in seconds with this npm module!

What Does it do? Grabs Candy Machine ID of any v1 or v2 candy machine websites. Installation npm i candymachinescraper --save Example Usage // Get Can

Oct 26, 2022

Extensión para crear el icono y cover de un curso en Platzi para organizar la toma de apuntes en Notion

💚 Platzi Cover Extensión para extraer el icono y cover de un curso en Platzi para organizar la toma de apuntes en Notion 📦 Instalación Descargar el

Nov 15, 2021

PEARL (Planetary Computer Land Cover Mapping) Platform API and Infrastructure

PEARL API & Infrastructure PEARL is a landcover mapping platform that uses human in the loop machine learning approach. This repository contains the A

Dec 23, 2022

A cover page transition based on Vitalii Burhonskyi's Dribbble shot.

Cover Page Transition A cover page transition based on Vitalii Burhonskyi's Dribbble shot. Article on Codrops Demo Installation Install dependencies:

Dec 31, 2022

[WIP] n8n nodes that cover the Zoho "Books" API

n8n-nodes-starter This repo contains example nodes to help you get started building your own custom integrations for n8n. It includes the node linter

Nov 26, 2022

Get started with GatsbyJS straight away without having to spend a whole day configuring your usual addons.

Gatsby Starter Infinite Get started with GatsbyJS straight away without having to spend a whole day configuring your usual addons. This starter includ

Jun 27, 2022

An NPM package to help frontend developers get started with using SASS and SCSS on your project easily. The Package follows the 7-1 architecture project structure.

Project Title - Create SASS APP Ever wanted to code up a frontend project with SASS & SCSS and you are stuck with building the acclaimed 7-1 architect

Sep 22, 2022

A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands and enjoy.

Offline-docs A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands an

Dec 24, 2022

Comments

Area where previous covers can be saved

Is your feature request related to a problem? Please describe. I always end up having to download the cover images I create, so they can be saved. It’s frustrating. Describe the solution you'd like I’d to see an area where users can see their previous images in a folder-like system

Describe alternatives you've considered I’ve considered creating a folder on my computer where I can place my cover images, but that would take up too much storage.

Additional context Here’s what I meant by folder-like system. Something similar to Google Drive

opened by CBID2 0
Icons or images are not getting scaled proportionally
Describe the bug After adding any icon/image, you can scale them proportionally. This leads to distortion of the actual pixel ratio.

To Reproduce Steps to reproduce the behavior:

Go to https://slickr.vercel.app/

Click on Try now CTA

Now choose any image or picture and try to scale.

See error

Expected behavior Users can scale images proportionally.

Screenshots

Desktop (please complete the following information):

OS: [e.g. iOS]

Browser [e.g. chrome, safari]

Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]

OS: [e.g. iOS8.1]

Browser [e.g. stock browser, safari]

Version [e.g. 22]

Additional context Add any other context about the problem here.
opened by learnwithgurpreet 0
Missing Icons for some Techs and libs
Describe the bug In Choose Your Icon of Icon part while we choose certain techs like electron or NPM the icon is not showing in the image.

To Reproduce Steps to reproduce the behavior:

Go to 'https://slickr.vercel.app/app'.

Click on 'Icon'.

Select 'electron' or 'NPM' from Choose Your Icon Dropdown.

See bottom right of the Image.

Expected behavior The Icon should be added in the Image.

Screenshots

Desktop (please complete the following information):

OS: Windows 10 Home 2004

Browser Brave (Chromium)

Version 92

bug
opened by Ajay-056 2
Search Functionality for elements

I think we need search functionality in elements to be working. It'll make the app more slick. Also I think there should be a back button after selecting a group of elements because after selecting a group of element user is not able to go back to elements again.

Let me know what do you think about this Savio.
enhancement

opened by davidn07 1

Releases(v0.0.9)

v0.0.9(Jul 27, 2021)

Hurray! Slickr is live in production 🎉

Slickr 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 🤟
Source code(tar.gz)
Source code(zip)