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.
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.
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
- 50 Tools -> Write some articles and post stuff on social media
- 64 Tools -> Post on Product Hunt
- 128 Tools -> Post on Product Hunt as v2
- 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!
Top comments (31)
It's awesome!
You actually have made all tools we used to access different websites, please, turn it PWA.
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.
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. :)
Thank you 👏
did you use the Workbox from google or write by your self the service worker?
@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.
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.
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. ✍️
Curious to know how are you implementing themes using styled-components?
Hi Sahz, I'm using ThemeProvider of styled-components and all colors, typography, sizes, shadows etc. are passed as props to components.
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
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.
10015 is a man with 2 eyes and 1 ear
look at my name nn6v6nn
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". 🤯 🙃
amazing , I like it
Thanks <3 it's beautiful, keep it up
Thanks Jair.
Made with ♥ in Earth
Quite awesome.
Thanks Raj. I hope you like it. 😌
Really nice project, good luck maintaining it!
Thanks for the good wishes Puka. 🤞
Another one is that
t.yctin.com/en/excel/to-php-array/
Excel to PHP array
Added. ✅
Amazing.
Thanks Justin.