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.

1. NextJS and ReactJS
2. Google Analytics
3. Figma (for designing purpose)

Start developing locally.

Fork the repository. then clone the repo locally by doing -

git clone https://github.com/harshptl14/toolpool.git

cd into the directory

cd TOOLPOOL

In the root folder do npm install.

npm install

In _app.js comment out the Google analytics related code. Your _app.js should look like this,

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 dev

A 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