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.