NextTool CRM

You can comfortably watch the video at 2x speed. Alternatively, choose your preferred playback speed.

Watch Time : 4m 24s

Hey! Here's NextTool CRM. I made it to help businesses work better. It's a place where you can manage appointments, chat with customers, check your business performance, and even handle billing. Think of it as a handy helper for your day-to-day work.

I built this all by myself, and it took me about four months working part-time. It wasn't always easy, but I learned a lot along the way. I wanted to make something useful for businesses, and I'm proud of how it turned out. Have a look and see what my hard work created!


  • Reactv.18.2.0

    I chose React for the front-end because of its component-based architecture. It helped me in crafting the interactive parts of the app and create reusable components for various features.
  • NextJSv.13.1.2

    I integrated NextJS for enhanced performance. It provides server-side rendering, ensuring faster page loads and offers features like hot-reloading that saved me development time.
  • @next/fontv.13.1.2

    This package is essential for efficient font loading. It optimized the app's performance by ensuring crucial text appears promptly while other text can load in the background.
  • @heroicons/reactv.2.0.13

    For icons in the app, I utilized @heroicons as It offers a wide range of icons that are easy to use and customize.
  • react-hook-formv.7.42.1

    This package is a lifesaver for form validations. With react-hook-form, I ensured data input accuracy and showcased errors, if any, making user interactions seamless. It also reduce re-renders,which means improved performance.
  • date-fnsv.2.29.3

    I needed a tool to format and display dates consistently, especially for features like customer invoices. date-fns made this task simple and intuitive.
  • rechartsv.2.3.2

    For the dashboard visuals, recharts was my go-to. It facilitated the creation of informative and appealing graphs to represent data.
  • react-big-calendarv.1.6.5

    The appointment section relies on react-big-calendar. It provides users with a visual representation of their schedules in multiple formats.
  • react-datepickerv.4.8.0

    Scheduling appointments needed a user-friendly date picker, and react-datepicker fit the bill. It ensures smooth date selections for users.
  • html2pdf.jsv.0.10.1

    Whenever the app needs to generate downloadable PDFs, like invoices, I use html2pdf.js. It provides users with an easy way to convert app details to PDF.
  • react-to-printv.2.14.11

    Printing features, especially for invoices, were made possible using react-to-print. It's efficient and offers users a direct printing option.
  • react-toastifyv.9.1.1

    For better user feedback, react-toastify was integrated. It provides timely notifications, confirming users' actions like booking appointments, invoice send, information updates and so on.
  • @tanstack/react-queryv.4.22.0

    Managing data fetching was made efficient with @tanstack/react-query. It caches queries, ensuring the app always presents fresh data.
  • @tanstack/react-query-devtoolsv.4.22.0

    Although hidden from users, this tool is crucial for development. It lets me monitor and optimize data fetching operations.
  • axiosv.1.2.3

    For all my server requests, I relied on Axios. It streamlines the communication between the app and the backend, ensuring fast and reliable data fetching.
  • react-transition-groupv.4.4.5

    The subtle animations users see when navigating the app are powered by react-transition-group. It elevates the user experience by making interactions smooth.
  • next-themesv.0.2.1

    I wanted to give users the ability to customize their viewing experience. With next-themes, they can effortlessly switch between light and dark modes.
  • eslintv.8.32.0

    To maintain a clean and bug-free codebase, I integrated ESLint. It's a guardian ensuring the app runs without hiccups.
  • eslint-config-nextv.13.1.2

    Being a NextJS app, I brought in eslint-config-next. It further refines the ESLint configurations, making sure the code quality is top-notch.


  • expressv.4.18.2

    The backbone of my app. I use this Node.js framework to manage routes and handle HTTP requests & responses.
  • body-parserv.1.20.1

    Helps me read HTTP post data. With this, I parse incoming request bodies to get the data in a usable form.
  • corsv.2.8.5

    This is important for security. I use it to control which websites can access my API.
  • dotenvv.16.0.3

    I keep my environment variables safe in a `.env` file. dotenv helps me to load them into my Node.js app.
  • ejsv.3.1.8

    All email templates were designed with ejs making it easy to include customer name, dates or other information.
  • mongoosev.6.7.5

    This assists me in managing relationships between data, provides schema validation, and is used to translate between objects in code and their representation in MongoDB.
  • jsonwebtokenv.9.0.0

    Security is key. I use this to generate tokens that authenticate users to secure parts of my app.
  • bcryptjsv.2.4.3

    Passwords should always be protected. I use bcryptjs to hash and verify passwords in my app.
  • multerv.1.4.5-lts.1

    Handling file uploads can be tricky, but with multer, I easily managed `multipart/form-data` for generating the invoice on client side and sending via email.
  • node-cronv.3.0.2

    To keep the dashboard data updated every business hour, marking appointment canceled, sending notifications, I schedule tasks in Node.js using node-cron.
  • nodemonv.2.0.20

    In development, I don’t like restarting the server manually. Nodemon watches for changes and does it for me.
  • twiliov.2.5.2

    Communicating with users via SMS? That's Twilio’s job in my app. From reminders to notifications, it covers it.
  • validatorv.13.7.0

    To ensure data integrity, I rely on validator for string validation and sanitation.
  • @sendgrid/mailv.7.7.0

    Every email sent from my app, whether it’s an invoice or reminder, is powered by SendGrid.
  • date-fnsv.2.29.3

    Dealing with dates can be messy, but date-fns provides me with handy utilities to format and manipulate them with ease.
  • date-fns-tzv.2.0.0

    On top of date-fns, I use this to ensure time zones are correctly handled in my scheduling features.