My favorite resources being a freelancer as a side hustle 💎
Tags: webdev, beginners, productivity, react
Published: 2020-08-05 13:01:20

I've read tons of resources collections. 

So have you, I imagine.

This is why I am writing this, in the hopes it can *actually* help you with creating new quality stuff, quicker. 

*Because ‘better’ will always be a losing game for your brand.*

You just need to be wiser while building, making more 💵 , and spending less ⏳ on it as a consequence.

So no bullshit here 💩.

✨ Let's go straight to the point ✨

`If you like any of this, react with 💕 and I will make more`


##📦 [Vercel](https://vercel.com/)

I can't recommend this enough. I also use Netlify, but changed to Vercel because the UI is slicker. It's free, you host your project in a few clicks, and it also gives you an SSL certificate, so you won't have the *site not secured* tag.

![Vercel screenshot](https://dev-to-uploads.s3.amazonaws.com/i/nid692jj47x02tvkipwy.png)

or [Tiiny.host](https://tiiny.host/) if you're prototyping. No registration, just drag the folder and it gives you a link. Up for 3 days and then it's gone.


##🧪 [Hoverify](https://t.co/QIntHWjRlJ?amp=1)

This is paid but worth it. Cheaper than other ones ($18) and amazing. I use the color picker and grid system all the time when building something or just scrolling through a website, to see how the divs are positioned.

![Unflop screenshot](https://dev-to-uploads.s3.amazonaws.com/i/47zgxzhicc6ttvpz1vi3.png)


##🎀 [Csslayout.io](https://csslayout.io/patterns)

Never seen this one on other collections. Super good and fast code snippets for making layouts, navs, headers, etc. Shout-out to fellow Dev member [phuocng](https://dev.to/phuocng) who made this.

![Css Layout screenshot](https://dev-to-uploads.s3.amazonaws.com/i/z7giljlcwuuhzph0ujya.png)

##🔑 [NiceVeryNice](https://www.niceverynice.com/components)

This site itself is a compilation of really good resources. What I use the most is their Components part, where I often go to when looking for reference. Need to build a hero? Go there and check hero examples. I use it with [Hoverify](https://t.co/QIntHWjRlJ?amp=1).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6lq3thyvc0ggqeeds074.png)


##🧲 [Paatern.css](https://bansal.io/pattern-css#introduction)

This is something I only superficially used but I like it. Background and background-image patterns to add complexity to your designs.

![Paatern Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/w06js4x7gihuirwmb27k.png)


##🧷 [Tabler Icons](https://tablericons.com/)

Of all the thousands of icon provider websites, this is my favorite. It's all SVG, color, size and thickness customizable.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gtsv27lv0k43szjfhlpa.png)


##🔋 [Tailwind CSS](https://tailwindcss.com/)

Okay, this one is just because I love it. You probably already know it. Super easy building stuff with Tailwind. Its a utility-first, mobile-first CSS framework that's been ranking up on users recently. I share the hype.

![Tailwind CSS screenshot](https://dev-to-uploads.s3.amazonaws.com/i/x7lpfsm94gzoklftmgh8.png)


##🔮 [Design Systems Repo](https://designsystemsrepo.com/design-systems-recent/)

A project repo that counts with a giant list of design systems, style guides, and pattern libraries. Sometimes I just scroll here to see if I want to try something out of my comfort zone.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7sdq6tod3kd9428hamf3.png)


##🎁 [Treact](https://treact.owaiskhan.me/)

This is GOLD. I built a fully responsive, beautiful React website with it, so I know its good. He also uses [Tailwind](https://tailwindcss.com/).

![Treact screenshot](https://dev-to-uploads.s3.amazonaws.com/i/qcuud2a0dllmxins9wlo.png)


##🚒 [Tailblocks](https://mertjf.github.io/tailblocks/)

By this point, you know I like [Tailwind](https://tailwindcss.com/). I built a responsive personal portfolio in one hour with [Tailblocks](https://mertjf.github.io/tailblocks/) hosting it in [Vercel](https://vercel.com/). Very well structured and easy to use.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mkm5q067t1aocq348tz4.png)


##🎣 [Open](https://open.cruip.com/)

Was a bit reluctant to put this one here, because it costs $49 and I never bought it. But I like the visuals and a friend of mine used it, so here it is.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6icv2f0abaowh5tvoxy0.png)


##⚾️ [Web.dev](https://web.dev/)

Always use this when finishing a website. It scores your SEO, accessibility, how fast it is, etc. Must check it out if you already didn't.

![Web.dev screenshot](https://dev-to-uploads.s3.amazonaws.com/i/2axutqwstzil7zr2dekj.png)


##🎨 [Projector](https://projector.com/)

I think this one is fairly new. I use this to create quick presentations for my clients. You don't have to, but it feels nice not to just send your client their website link.

![Projector screenshot](https://dev-to-uploads.s3.amazonaws.com/i/w9qzva25alpuxwlhom00.png)

##🧸 [Public APIs](https://public-apis.io/)

An amazing list of public APIs for using. This is huge and it's amazing how many different types of APIs there is to experiment with.

![Public API screenshot](https://dev-to-uploads.s3.amazonaws.com/i/v05e130330knarwthhch.png)


### That's it, dear fellow members.

###  Please, if you liked any of this, react a bit with 💕 and I will make more.

###Also, follow me on [Twitter](https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fplatform.twitter.com%2F&ref_src=twsrc%5Etfw&screen_name=leokindacodes&tw_p=followbutton) and let's hang out there 🏓