DEV Community

Cover image for 🌟 Biggest “Online Tools” Collection: 10015.io 🧰
Fatih Telis
Fatih Telis

Posted on

🌟 Biggest “Online Tools” Collection: 10015.io 🧰

Hi 👋,

I'm Fatih, a frontend developer based in Istanbul and this is the short story of my project: 10015.io.

10015.io is an online toolbox project I've been working on for a while. Since I'm a frontend developer, I've been using many online tools while I'm working. I'm also a bookmark type of guy where I organize all my bookmarks under specific folders. The longest folder I had on my bookmarks toolbar was "Tools" folder previously. At some point, I asked myself "What is going on?". Clearly, there is something wrong with that folder.

Something wrong

This is the point where I decided to create an online toolbox. There are some reasons behind this decision.

💡 Why I decided to create an online toolbox?

  • There isn't any nice toolbox which contains every tool I need.
  • UI/UX of almost all online tools are really bad.
  • It is hard the find the tool I need instantly.
  • It will be a good challenge for me to discover how this types of tools are developed.

After I made my decision, I started to think about the brand name of the project. As many of you experienced before, almost all generic domains were already bought by domain brokers. So, I need to find a short & catchy as well as smart brand name. Then, a light bulb went on my head and I found 10015. If you look closer to the logo, you will see why I chose this brand name.

10015 Online Tools Logo

If you have a prediction about why I chose 10015 as brand name, just comment and I will send you a 1-year free membership. (Ohh sorry, 10015.io is already free! 🙃)

I developed 2 extension for 10015.io, one is for Chrome and one is for Firefox. You can use these extensions for accessing the tools instantly.

There are 50 online tools in 10015.io right now and I'm adding new tools regularly. I have a list on Notion for upcoming tools which are added as a result of either my needs or requests I get via 10015 contact page.

I set some goals and milestones for 10015.io. Here is my roadmap.

🛣️ Roadmap

  1. 50 Tools -> Write some articles and post stuff on social media
  2. 64 Tools -> Post on Product Hunt
  3. 128 Tools -> Post on Product Hunt as v2
  4. 256 Tools -> Post on Product Hunt as v3

My aim is to make 10015.io the biggest free online toolbox in web, so I decided to use a pretentious title like this for my article as a motivation.

💻 Tech Stack

I'm using Next.js (A React Framework) along with styled-components for styling & theming. I'm not using a UI library for components, all are written specifically for this project. Almost all tools are working on client-side only. There are very few of them making API requests to server.

If you have any comments about 10015.io, feel free to write on comment section or you can directly contact with me.

I will post some articles about the tools individually; how I made them and what I've learnt while I was creating the tools. If you want to get notified, just follow me!

Discussion (31)

Collapse
bpsagar profile image
Sagar Chakravarthy

I really loved the designs, illustrations and animations on the site! So neat!! All the best for your roadmap :)

Are you also considering accepting tools suggestion from others? Like crowdsourcing but probably vetting it yourself first before listing them.

Collapse
fatihtelis profile image
Fatih Telis Author

Hi Sagar, thanks for your kind feedback. 😊 I really spent time for the design even if I'm not a professional designer to make its UI/UX better.

I've a list on Notion for the tools I will develop in future. Some are the ones I added personally and some are the ones that people suggested. They contacted me via website or Twitter or even face-to-face (my friends 🙃) and if it is a tool I can develop, I add it to my list. Also, I have a priority section in the list, so sometimes I directly started to develop the suggested tool if the suggestion is a must-have tool for 10015.io.

If you have any suggestion, feel free to write. ✍️

Collapse
ronaldohoch profile image
Ronaldo Hoch

It's awesome!
You actually have made all tools we used to access different websites, please, turn it PWA.

Collapse
fatihtelis profile image
Fatih Telis Author

Hi Ronaldo, actually it is PWA, but there must be something wrong with the service worker. I'll fix that and let you know when it is installable.

Collapse
fatihtelis profile image
Fatih Telis Author • Edited on

pwa

I've updated the PWA configuration. It works right now, but it takes some time to register the service worker. I'll take a deeper look when I have more time. Thanks for the feedback. :)

Thread Thread
ronaldohoch profile image
Ronaldo Hoch

Thank you 👏

Collapse
ronaldohoch profile image
Ronaldo Hoch

did you use the Workbox from google or write by your self the service worker?

Thread Thread
fatihtelis profile image
Fatih Telis Author

@ronaldohoch I'm using next-pwa package which is using Workbox under the hood. I'm using next.js, so it is not ideal to write the service worker by yourself.

Collapse
nn6v6nn profile image
Richard Kwok

10015 is a man with 2 eyes and 1 ear
look at my name nn6v6nn

Collapse
fatihtelis profile image
Fatih Telis Author

Nice approach 🧠 This is not the first time someone says 10015 looks like a face. Actually, if you look closer the the logo, 10015 is "TOOLS". 🤯 🙃

Collapse
nn6v6nn profile image
Richard Kwok

amazing , I like it

Collapse
sahez97 profile image
Sahz

Curious to know how are you implementing themes using styled-components?

Collapse
fatihtelis profile image
Fatih Telis Author

Hi Sahz, I'm using ThemeProvider of styled-components and all colors, typography, sizes, shadows etc. are passed as props to components.

Collapse
sahez97 profile image
Sahz

Doesn't ThemeProvider reduce performance of the app?
I went through a great article by Kent C.Dodds - epicreact.dev/css-variables/

He explains why using global css variables is more performant that using React context ThemeProvider

Thread Thread
fatihtelis profile image
Fatih Telis Author

Great article Sahz. I've read it before and why I'm still using the ThemeProvider approach is, there is no dark mode in my application, so there will be no re-render problem. Also, I'm not only sending colors, sizes etc. but also some helper functions and block styles from ThemeProvider which is not possible with CSS variables.

Collapse
keeran_raaj profile image
Raj Kiran Chaudhary

Quite awesome.

Collapse
fatihtelis profile image
Fatih Telis Author

Thanks Raj. I hope you like it. 😌

Collapse
jurnet profile image
Jurnet

Another one is that
t.yctin.com/en/excel/to-php-array/
Excel to PHP array

Collapse
fatihtelis profile image
Fatih Telis Author

Added. ✅

Collapse
immazoni profile image
Justin H

Amazing.

Collapse
fatihtelis profile image
Fatih Telis Author

Thanks Justin.

Collapse
nn6v6nn profile image
Richard Kwok

Made with ♥ in Earth

Collapse
jurnet profile image
Jurnet

Hi thks for this. Are u interested to add more , like dedupe list....

Collapse
fatihtelis profile image
Fatih Telis Author

Hi Jurnet, thanks for the feedback. I added it to my upcoming tool list. ✍️

dedupe

Collapse
harunmemis profile image
harun

It's awesome project. All the tools developers need in one place. Good luck

Collapse
jair profile image
Jair

Thanks <3 it's beautiful, keep it up

Collapse
fatihtelis profile image
Fatih Telis Author

Thanks Jair.

Collapse
puka_tchou profile image
Puka Tchou • Edited on

Really nice project, good luck maintaining it!

Collapse
fatihtelis profile image
Fatih Telis Author

Thanks for the good wishes Puka. 🤞

Collapse
dineshs91 profile image
Dinesh S

Looks amazing. This should come in very handy for me.

Collapse
fatihtelis profile image
Fatih Telis Author

Thanks Dinesh. I'm glad you like it.