ToolPool is a one-stop solution for your day to day needs. ToolPool contains various helper tools like, Image resizer, CSS generators, Social media tools, etc. It contains ample amount of tools in various categories like Text, Image, Development, etc.
This website is for everyone whether a normal person who just wants to compress an image or a developer who wants to generate CSS for his website.
The aim to build this website is to reduce the number of tabs open in your browser to do some tiny tasks. This tool will also lower your burden to find a tool from bookmarks that you saved years ago. Now, you just have to bookmark one website and done.
How to use it?
- Head over to the TOOLPOOL
- Search for the tool you wanna use
- Most of the tools are user friendly so there won't be any confusion, still if you find them diffcult to use, we have provided a small desciption for every tool
Text tools
- Lorem-Ipsum generator
- Case-Converter
- Letter counter
- Multiple Whitespace remover
- Text to Binary and vice-versa
- Unique words finder
Image tools
- Image Resizer
- Image color picker
Developer tools
- CSS Box Shadow generator
- CSS Glass-morphism generator
- CSS Transition Generator
- Size Converter(px, em, rem, pt, pr)
Color tools
- Color code converter (Hex-RGBA)
Social Media tools
- Tweet generator
Miscellaneous Tools
- QR Code Generator
- NextJS and ReactJS
- Google Analytics
- Figma (for designing purpose)
Start developing locally.
Fork the repository. then clone the repo locally by doing -
git clone https://github.com/harshptl14/toolpool.gitcd into the directory
cd TOOLPOOLIn the root folder do npm install.
npm installIn _app.js comment out the Google analytics related code. Your _app.js should look like this,
_app.js
import Layout from "../components/Layout";
import Script from "next/script";
import * as gtag from "../lib/gtag";
import { useRouter } from "next/router";
import { useEffect } from "react";
function MyApp({ Component, pageProps }) {
// const router = useRouter();
// useEffect(() => {
// const handleRouteChange = (url) => {
// gtag.pageview(url);
// };
// router.events.on("routeChangeComplete", handleRouteChange);
// return () => {
// router.events.off("routeChangeComplete", handleRouteChange);
// };
// }, [router.events]);
return (
<>
{/* <Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/> */}
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}
export default MyApp;npm run devA quick look at the folder structure of this project.
.
├── components
| ├──HomeScreen
| ├──Toast
| ├──Tools
| | ├──[CATEGORY-WISE FOLDERS]
| ├──ToolScreen
├──hooks
├──lib
├──pages
├──public
| ├──assets
| ├──icons
| ├──svg
├──static
| ├──helpers
| ├──icons
| ├──toolDescriptions
| ├──utils
├──styles
.
We love your input. You can contribute to this project in many ways like,
- Raise an issue or bug
- Prapose or Create a new feature
- Improve the documentation
- Submitting a fix
Refer CONTRIBUTING.MD before you start contributing.
We open-sourced almost everything we can, and we try to reply to everyone needing help using these tools. Obviously, this takes time. You can use this service for free.
However, if you are using this project and are happy with it or just want to encourage us to continue creating stuff, there are few ways you can do it :-
- Starring and sharing the project 🚀
- Buy us a kofi
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent