DEV Community: Sarthak Chhabra

Top 11 GitHub Repos for Internal Tool Developers

Sarthak Chhabra — Mon, 07 Jul 2025 11:45:00 +0000

When it comes to building internal tools, speed, scalability, and ease of integration matter more than ever. Open-source internal tool platforms can save you weeks or even months of development work, whether you're a startup founder seeking to manage customer data quickly or a backend developer trying to empower your operations staff.

The top 11 GitHub repositories that help developers build internal tools faster are listed here. Each has benefits, unique features, and different appeal depending on your goal and workflow.

1. Refine

Refine is a React-based framework for building data-intensive applications, such as admin panels, dashboards, and internal business applications. Unlike traditional low-code tools, Refine provides you with full control over your stack, with extensibility built in. Also, it provides you with 150+ component libraries and 50+ connector options.

Key Features

Full control using familiar React, TypeScript, and Ant Design components
Integrates with backend frameworks and identity providers like Firebase and Keycloak
Perfect for dev teams that prefer code-first approaches
Excellent performance for complex, data-heavy apps
Open and extensible with adapter-based architecture

Cons

Not beginner-friendly: assumes React/TypeScript knowledge
UI building requires more manual effort than drag-and-drop platforms

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
31.4k	2.1k	24	2	258

Github Link | Documentation | License - MIT

2. Appsmith

Appsmith is a well-established open-source low-code platform that helps developers and product teams build internal tools quickly with drag-and-drop widgets and seamless data integration. There are developer-friendly and production-ready platforms out there.

Key Features

Comes with a powerful widget library for building dashboards, CRUD UIs, and admin panels
Supports Git sync, version control, RBAC, audit logs, and other enterprise needs
Easy integration with REST APIs, GraphQL, PostgreSQL, MongoDB, and more
Great documentation and active community support
Offers self-hosting and cloud options

Cons

The initial load time for the builder can be a bit slow on lower-end machines.
Complex workflows may require understanding Appsmith-specific scripting syntax (JavaScript)

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
37.3k	4.1k	3.7k	108	315

Github Link | Documentation | License - Apache-2.0

3. N8N

N8N is a powerful open-source low-code platform designed for workflow automation. Its drag-and-drop interface allows developers and teams to integrate APIs, SaaS tools, and databases with minimal code. Unlike rigid automation platforms, n8n gives you full control over your logic and data flow, making it ideal for internal operations teams.

Key Features

Visual workflow builder to automate repetitive tasks across apps and APIs
Native integrations with over 400+ services like Slack, Airtable, Stripe, Google Sheets
Self-hosting support for full data control and privacy
Conditional logic, loops, and error handling to build complex automation
CLI tools, environment variables, and webhooks for dev workflows

Cons

UI can feel less polished for beginners
Initial setup for self-hosting may require technical experience
Some advanced workflows still require JavaScript knowledge

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
42.7k	4.9k	752	98	328

Github Link | Documentation

4. ToolJet

ToolJet is another popular low-code builder focused on internal tool creation. It’s known for its modern UI, automation capabilities, and growing AI features, making it an excellent choice for rapidly building and deploying business apps with smart functionalities.

Key Features

Drag-and-drop editor with a modern feel
Supports workflow automation and real-time collaboration
Easy connection to APIs and databases like MySQL, MongoDB, and Airtable
Self-hosting is supported, making it a good fit for privacy-conscious orgs
Frequent updates and feature enhancements from the community

Cons

Fewer third-party templates and widgets compared to Appsmith
Performance may lag with very large datasets or deeply nested UI components
AI features are still evolving and may not match the depth of dedicated AI dev tools

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
35.9k	3.5k	757	179	541

Github Link | Documentation | License - AGPL-3.0

5. Noco DB

NocoDB is an open-source Airtable alternative that instantly turns any SQL database into a spreadsheet-style interface perfect for fast CRUD dashboards and lightweight internal apps.

Key Features

Grid, Kanban, Gallery & Calendar views
Auto-generated REST and GraphQL APIs
Role-based permissions and audit logs
Self-hosted (Docker, Helm) or cloud SaaS options
Import/export CSV, Excel; webhook & Zapier hooks

Cons

Slower on multi-million-row tables
Advanced formulas/roll-ups are still limited
Some enterprise features (SSO, audit) feel beta-level

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
55.5k	4k	668	46	21

Github Link | License - AGPL-3.0

6. Budibase

Budibase markets itself as a low-code platform for building internal tools in minutes. It’s ideal for teams needing quick CRUD apps or approval flows without diving deep into code. Its standout feature is the built-in database, which makes it great for simple apps.

Key Features

All-in-one app builder with its own built-in database
Offers automation workflows and email triggers
Clean UI for building basic tools like inventory systems, HR apps, etc.
Can be self-hosted or deployed to Budibase Cloud
Supports CSV uploads and external data sources like CouchDB, MySQL, and REST APIs

Cons

Advanced use cases often require workarounds.
The UI editor isn’t as smooth as ToolJet or Appsmith in more complex layouts.

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
24.8k	1.8k	431	14	98

Github Link | Documentation | License - GPLv3

7. Node-RED

Node-RED is a low-code, flow-based development tool famous in IoT circles, but equally handy for wiring together APIs and internal automations with a browser drag-and-drop UI.

Key Features

Visual “wiring” of nodes for HTTP, MQTT, SQL, etc.
Runs anywhere Node.js runs—from Raspberry Pi to Kubernetes
3000+ community nodes for third-party services
Built-in debug panel and deploy-in-place editing
Strong community under the OpenJS Foundation

Cons

UI feels dated for newcomers
Big JSON payloads can choke the runtime
Limited out-of-the-box RBAC (handled via reverse proxy/SO auth)

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
21.5k	3.6k	336	88	13

Github Link | Licence - Apache-2.0

8. Noco Base

NocoBase is an “extensibility-first” no/low-code core with a plug-in micro-kernel, aimed at teams that need fully custom business systems (CRMs, ERPs, workflow apps).

Key Features

Plug-in architecture—add auth, UI themes, and workflows as modules
Data-model-driven design (not just forms/tables)
Drag-and-drop page builder plus JSON schema editing
Self-host via Docker; Chinese and English docs
RBAC and audit logs baked in

Cons

Docs skew Chinese-first; English catching up
Smaller template ecosystem than Appsmith/ToolJet
Early plug-ins occasionally break with core upgrades

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
16k	1.8k	80	72	29

Github Link | License - AGPL-3.0

9. Rowy

Rowy offers a spreadsheet-style UI on top of Firebase/Firestore, letting teams manage data and cloud functions without jumping into the console.

Key Features

Airtable-like grid with inline editing & validation
Low-code Cloud Functions (JS/TS) right from the browser
Built-in auth roles and row-level security
Import/export CSV, trigger workflows, and cron jobs
Deploys to your Firebase project in minutes

Cons

Firestore-only (for now) limits multi-DB setups
Less active lately; fewer new integrations
Large datasets may hit Firestore query limits

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
6.7k	531	760	13	40

Github Link | License - GPL-3.0

10. Open blocks

Openblocks bills itself as an open-source Retool alternative— a modern drag-and-drop builder for dashboards and admin tools with a growing JS-based extension SDK.

Key Features

50+ ready UI components; custom React blocks supported
Native connectors: Postgres, MongoDB, Redis, REST, SMTP, etc.
JS everywhere for data transforms and actions
Role-based access, audit logs, and deployment history
Embed pages as React components (avoids iframes)

Cons

Smaller community than Appsmith/ToolJet—fewer templates
Docs & road-map are still catching up with feature pace
Occasional breaking changes between minor releases

GitHub Stars	GitHub Forks	GitHub Issues	Pull Requests	Contributors
6k	381	121	9	18

Github Link | License - AGPL-3.0

11. DronaHQ

DronaHQ is a low-code platform purpose-built for internal tools, dashboards, and workflow apps. It combines a visual drag-and-drop builder with Veda AI, an AI assistant that can scaffold UI screens, generate SQL/JS logic, and create complex workflows. With over 150 pre-built UI components and multiple pre-built templates, DronaHQ enables teams to ship production-grade business apps in days, not weeks.

Key features

Veda AI for instant UI generation from images, natural-language queries, and smart logic suggestions
Action Flows: point-and-click logic builder with conditions, loops, JavaScript blocks, and error handling
50 + built-in connectors including REST APIs (MySQL, MongoDB, Postgres, REST/GraphQL, Google Sheets, etc.)
Visual drag-and-drop UI builder with 150 + responsive components (tables, charts, forms, Kanban, maps, etc.)
Scheduler & Automation for cron-style triggers, SLA reminders, and background jobs
Role-based access & environments (dev/staging/prod) with audit logs
One-click deployment to the cloud or self-host in your own VPC for full data control

Cons

AI features are still maturing, and effective results often depend on proper prompt crafting.
Advanced custom control requires JavaScript knowledge.

Github Link | Documentation

Conclusion

Whether you’re a solo founder, a backend developer, or part of an enterprise team, these 11 open-source repositories provide powerful foundations to build modern internal tools. From low-code automation in n8n to code-first precision in Refine, or fully visual builders like DronaHQ and Appsmith, each tool shines in different contexts.

The key is to match the platform with your team’s workflow, technical comfort, and long-term scalability.
Did we miss any repositories that you use for internal tools? Drop them in the comments below, we’d love to discover more!

React Version Upgrade

Sarthak Chhabra — Wed, 18 Jun 2025 08:55:38 +0000

React is one of the most popular tools available for building user interfaces. From small personal projects to major enterprise programs, it’s utilised because of its reusable components and robust community support.

With each new release, React continues to evolve to stay modern and efficient. These modifications are meant to make programs easier to develop and maintain, as well as speedier.

In this Article, we’ll break down some key points about React 18, which include what’s new in React 18?, how it’s different from version 17?, why upgrading is worth it?, how you can upgrade?, and the problems that can be faced while upgrading.

Need for Upgrade

You may ask yourself, "Why bother upgrading?" if your project functions properly with React 17. Here's why React 18 is worthwhile, though:

Offers Better Performance
When UI updates are ready, React 18 can display them after preparing them in the background. Your app feels quicker and more responsive as a result.
Provides a Smoother Experience
Multiple re-renders occurred in React 17 as a result of adjustments made outside event handlers (such as inside setTimeout). React 18 boosts efficiency by batching them into a single update.
Smarter State Management
UseTransition and useDeferredValue are two hooks that make it easier to control loading and slow renderings.
Future-Ready
Future technologies such as React Server Components are built on top of React 18. By staying current today, you can avoid headaches later.

React 18 features compared to React version 17

Some of the major upgrades include concurrent rendering, a powerful enhancement that allows React to prepare multiple versions of the UI at the same time without blocking the main thread. This can be accessed by developers through the new startTransition API, which designates updates as non-urgent. For instance, it can wrap state updates for search results to maintain typing responsiveness even when processing intensive data.

Another major addition is automatic batching, which groups multiple state updates—even across asynchronous events—into a single render. React 18 also introduced new hooks like useTransition, which gives developers control over pending UI states (e.g., showing a loading spinner), and useId, which solves issues with generating consistent IDs between server and client renders. All of these are supported out of the box when using ReactDOM.createRoot instead of the older ReactDOM.render, unlocking these improvements with minimal changes.

Things to remember while upgrading

Upgrading from React 17 to 18 is simple and involves just two steps, but the major challenge lies with the peer dependencies & version error occurs. Before migrating your app to React 18 check these steps

Step 1 - Check Compatibility

Verify that your current dependencies are prepared for React 18 before upgrading.
To look for out-of-date packages, run “yarn outdated or npm outdated”.
To verify React 18 support, check the official documentation for each library.
Update any incompatible packages or look for safer substitutes.

Step 2 - Review and Refine Your code

In React 18, several outdated React patterns won't function properly ( example. - react-spring@9.4.3 was not compatible with React 18, so I had to remove it ).
Look out for deprecated lifecycle methods like componentWillMount, componentWillReceiveProps, and componentWillUpdate. These have functional alternatives now.
Refactor to make advantage of functional components and hooks, which are React 18-friendly patterns.

Step 3 - Test Wisely and Carefully

Establish a robust testing environment to identify problems early.
Make use of end-to-end, integration, and unit tests.To ensure nothing breaks, run tests prior to, during, and following the upgrade.

Step-by-Step Migration Roadmap

Step 1 – Update Dependencies
Run in your project root:
npm install react@18 react-dom@18

Step 2 – Replace ReactDOM.render
Find where ReactDOM.render is called (usually index.js).
Migrate to reateRoot
Before (React 17)

import ReactDOM from ‘react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

After (React 18)

import { createRoot } from ‘react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

Step 3 – Run Codemons(optional)
This step fixes the deprecated APIs automatically
Terminal output –
npx react-codemod rename-unsafe-lifecycles npx react-codemod update-react-imports

Step 4: Handle Breaking Changes
Check for legacy lifecycles methods and replace them

componentWillMount → useEffect
componentWillReceiveProps → getDerivedStateFromProps

Testing automatic batching by wrapping async state updates if needed

import { flushSync } from 'react-dom';
flushSync(() => {
  setState(newValue); // Forces immediate update
});

Step 5: Verify & Test
Run tests on your Terminal
npm test

Do Manual Checks

Concurrent Mode: Test UI responsiveness (e.g., type in a search bar).
SSR: Verify hydration errors.

Step 6: Optimize for React 18
Example: useTransition for slow renders

import { useTransition } from ‘react’;
function Search() {
  const [isPending, startTransition] = useTransition();
  const handleSearch = (query) => {
    startTransition(() => {
      setResults(fetchResults(query)); // Non-urgent update
    });
  }
  return (
    <>
      {isPending && <Spinner />}
      <input onChange={(e) => handleSearch(e.target.value)} />
    </>
  );
}

Step 7: Troubleshooting Tips
Issue – useEffect runs twice in development
Solution –

// Option 1: Make effect idempotent (safe to run multiple times)
// Option 2: Use for layout effects

import { useLayoutEffect } from 'react';
useLayoutEffect(() => { /* code */ }, []);

Issue – Third-party libraries break (e.g., react-spring)
Solution –
npm install react-spring@latest # Check for React 18 compatible versions

Reddit’s Comments

"React 18 has made useEffect fetching slightly worse… I had to switch to useLayoutEffect in places just to get the same experience."

"I love how React 18 makes apps feel smoother. useTransition is a game changer when dealing with slow data loads."

"Streaming SSR is 🔥. My site loads much faster now."
In short, the feedback is mixed: developers love the performance benefits but are cautious about ecosystem changes and subtle behavior shifts.

About React 19

React 19 is out, thankfully, it has been released with few breaking changes. Most of the core experience remains the same.

However, many libraries haven’t fully caught up yet. If you upgrade and something breaks, you might need to either: Downgrade temporarily
Or wait for library updates

New capabilities like Server Components and the React Compiler are exciting but haven’t been widely tested yet. Keep them out of long-term production apps for the time being.

Conclusion

More than just an update, React 18 represents a significant advancement towards a more rapid and adaptable React. It is worthwhile to upgrade your software if you are working on a new project or want to make sure it is future-proof.

Although there may be some hiccups along the way, the improvements in performance, the improved user experience, and the preparedness for upcoming advancements make the shift valuable.

If you’re spending too much time wiring up UI and state logic from scratch, DronaHQ gives you a faster way forward. With pre-built components, a visual builder, and AI to help scaffold React-style UIs instantly, you can skip the boilerplate and focus on delivering features. You’ll be shipping internal tools in hours, not weeks... Try it free or explore the component library to see what’s possible.

Be a part of the React 18 wave by starting small and properly testing!
Should I write about React version 19?

References -
https://react.dev/versions#react-18
https://www.geeksforgeeks.org/reactjs/how-to-upgrade-to-react-18/
https://www.reddit.com/r/reactjs/
https://react.dev/blog/2022/03/29/react-v18

DronaHQ Design System: A New UI Toolkit for Scalable Internal Tools

Sarthak Chhabra — Tue, 13 May 2025 12:56:09 +0000

Are you building internal tools or admin panels that need a cohesive, scalable design? The DronaHQ Design System is now available on Figma, and it’s ready to help you accelerate your development process. Whether you’re in charge of an internal product or trying to streamline low-code app creation, this design system has got you covered.

Key features include:
• Customizable UI Components: Everything from tables to modals, cards, and more.
• Scalability: Designed to grow with your project as the team expands.
• Speed: Get your internal tools off the ground in no time, without worrying about the frontend.

Check out the full system here: DronaHQ Design System on Figma. Fork it and start building today! 💻

ToolJet - AI Integrated Low-Code Platform

Sarthak Chhabra — Tue, 22 Apr 2025 14:57:29 +0000

Recently, I got a chance to explore ToolJet.AI, an open-source low-code platform made for building and deploying custom internal tools. What makes it different is its built-in AI capabilities. Instead of dragging and dropping every element manually like in typical low-code platforms, here you just give it a prompt — a few words — and ToolJet starts creating the app structure for you. It uses AI to generate the UI and suggest layouts, which really speeds up the building process. What impressed me the most was how clean and usable the auto-generated screens were. It even picked a good color palette and gave me a working dark mode layout without me even asking for it.

For my first try, I built a simple Stock Management Application that sends alerts when inventory gets low. ToolJet AI generated not just the UI but also created backend queries that I could directly edit and link with my database. I did all this using their free plan, and honestly, for anyone looking to build quick MVPs or internal apps, it’s more than enough. The free plan includes two builders, fifty end users, two apps, thirty AI credits per month, and community support via Slack. As you grow, you have the option to upgrade, but for small projects and testing ideas, the free tier is very practical.

Here are some things I liked while working with ToolJet:

AI-driven app building through simple prompts
Drag-and-drop interface that feels quick and intuitive
Backend queries that are editable without leaving the builder
Auto-generated dark mode for the app UI
Easy database and API integrations
Open-source platform, so you can tweak the code if needed
A very usable free plan to start building right away

Of course, like any tool, it’s not perfect. ToolJet is still growing in popularity, and while the community is positive, it’s smaller compared to more established platforms. A few users (and even I) noticed that after major updates, minor bugs sometimes pop up, and the app can get a little heavy on the browser if you keep building non-stop for long hours. Another thing I felt missing was a built-in scheduler to automate repetitive tasks like sending stock alerts. If there’s a way to do it and I missed it, I’d love to know — otherwise, it would be a great feature to have in future updates.

There are also a few things to keep in mind when using ToolJet. While it’s low-code, you’ll still need some basic tech understanding to make the most out of it, especially when dealing with custom integrations or database connections. If you’re planning to self-host ToolJet, managing the server setup and security requires solid knowledge too. Making deep customisations beyond the standard components usually needs developer-level skills. On G2, ToolJet holds a 4.8-star rating, although it’s based on fewer reviews compared to bigger players. Still, most users highlight how fast and simple the development process feels, which matches my experience too.

Overall, I really liked working with ToolJet.AI. It feels like a powerful tool for developers and teams who want a flexible, cost-effective, open-source platform but also want to move fast with some AI help. If you’re into building internal tools, dashboards, or admin panels, and you like tweaking things when needed, ToolJet is definitely worth checking out.

Cursor AI: The Future of Coding or Just Another Hype

Sarthak Chhabra — Mon, 31 Mar 2025 04:08:20 +0000

As a developer, I am always curious to try new tools that helps to boost productivity of our tasks, in my last posts where I talked about creating the CRUD app from scratch and also using the AG grid for the first time, I was curious that in today's world isn't there any tools or technology through which we can directly use AI to help in coding, and then I got to know about CURSOR.AI.

Cursor.AI is an AI-powered code editor designed to enhance developer productivity. Here are some features described about the cursor -

Inline Suggestions & Chat Assistance – Provides AI-driven code completions, real-time suggestions, and chat-based help.
AI-Based Code Reviews – Analyzes and reviews code for improvements, helping optimise development workflows.
Workflow Understanding – Understands the project structure and provides context-aware assistance.
Multi-Language Support – Works with various programming languages, allowing seamless interaction with AI via commands and prompts.

All this sounds quite interesting and even helpful so I decided to give it a go, implementing cursor was very simple - install it for your OS and it will directly install the extension for VS code and connect with it, which makes it very efficient to use. It provides a chat option on the right-hand side of your screen and the same familiar VS code screen with all your existing files on the left-hand side.

My goal was simple, I was creating a given block of code, functional and responsive. Basically, I need to apply JavaScript for validation, error-success message, field refresh timeout and mobile responsiveness. While applying JS cursor worked very well creating functions efficiently but when it comes to CSS designing for responsiveness, it was not as per my expectations.
Issues That I face while using Cursor:-

Too many unnecessary changes – One big issue I faced was that the Cursor overwrites too much when given a prompt. It doesn’t always limit itself to the specific section of code I want to modify.
Requires multiple prompt attempts – It took several iterations to get the mobile responsiveness right, which sometimes felt like it was slowing me down instead of saving time.
Not ideal for large-scale projects – While it worked decently for small tweaks when I tried using it in a more complex project with multiple dependencies, it struggled to understand the overall code structure and context.

In the above screenshot, you can see how easily it gave a JS function as per my requirement for validating the email and showing messages for valid and invalid email input but this was not the case while applying CSS. It took so many prompts to make a responsive media query for the mobile view as per my requirements that after a point I realised I could have done it on my own with less effort and less time

CONS -

Not beginner-friendly – If you don’t know how to code, you can’t just ask Cursor to build an entire app. It’s more of a coding assistant than a full-fledged AI developer.
Paid & expensive – Unlike other AI tools (some of which are open-source), Cursor comes with a subscription model that isn’t cheap. If you’re on a budget, there are alternatives.
Lacks full control – AI-generated code needs human intervention, especially in complex projects. Accepting AI-generated changes blindly can lead to hidden bugs.

PROS -

Great for quick fixes & small projects – If you need AI assistance for a single-file code generation or want to quickly generate boilerplate code, Cursor is useful.
Precise prompts = better output – The more detailed your input, the better the AI’s response. A vague prompt leads to unpredictable results.
Code explanations & suggestions – If you understand coding basics, Cursor can help improve your workflow by explaining code and suggesting optimizations.

Overview -
Cursor AI is a great tool for specific use cases, but it’s not a replacement for real development skills. If you’re a developer with good coding knowledge, you can use Cursor to speed up repetitive tasks. However, for large-scale, real-world projects, its limitations start showing up quickly.

Would I recommend it? For quick POCs and single-file edits—yes. But if you’re expecting an AI to handle a complex project from start to finish, Cursor is not there yet. This was what I thought about Cursor after using it for some days, maybe at some points I am lacking, so feel free to comment.

My 1st Experience with AG Grid

Sarthak Chhabra — Wed, 12 Mar 2025 04:04:19 +0000

I recently shared my first experience with creating a CRUD application from scratch. I used a CSS grid to design a visually appealing card-based view that showcased the data.
(you can see it here: https://dev.to/sarthak_chhabra_123/building-my-first-crud-app-for-marvel-database-from-scratch-4hn9)

While working more on that project I faced a challenge in implementing search and filter features, so I came up with a solution to create a tabular view for easier navigation, filtering, and organising data
While it seems there are a ton of tools to choose from , AG Grid kept coming up everywhere, so I decided to give it a shot.
My main goal was to convert a JSON file containing data into a tabular format with search, filter, and sorting options—all while keeping the setup as simple and efficient as possible.
Setting Up AG Grid with Sample Data to understand its working :
Here’s how I got AG Grid up and running:

Created a Grid.js file for a modular setup.
Defined columnDefs with properties such as field, headerName, width, and editable.
Managed API responses using useState() and useEffect().
Used onGridReady() to store references to the grid and column API for future use.
Mounted the App component in index.tsx using ReactDOM.render(). (you can see it here: Git Hub link)

What I achieved:

Successfully converted JSON data into a functional table with AG Grid.
Optimized data display view into a tabular format.
Improved data organization and accessibility for better user interaction.
Gained hands-on experience with AG Grid’s API and customization options.

Features I Loved:

Custom cell rendering – allowed me to use my components inside cells.
Column & row visualization – made structuring large datasets easier.
vPre-applied themes & styling** – looked good and easy to understand.
Multi-framework support – works with React, Angular, and Vanilla JavaScript.

Roadblocks I Hit:

Some features are locked behind a paid license on the enterprise version.
The documentation was tough to understand at times.
It will take time to grasp and use it effectively in projects fully.

While troubleshooting these issues, I realised I wasn’t alone. I found Reddit discussions (screenshots attached) where many developers shared similar struggles with AG Grid.

I’d love to hear your thoughts! Since this is my first project using AG Grid, I might have missed something or taken a longer route. Do you have any better solutions or AI-powered approaches Let’s discuss!

Building my First CRUD app for Marvel Database from Scratch

Sarthak Chhabra — Thu, 27 Feb 2025 10:41:40 +0000

Recently, I decided to build my first CRUD application just for the experience of creating something from scratch, so I decided to create a Marvel Heroes related application for fun. My goal wasn't grand; I simply wanted to explore how everything fits together practically and also I didn't want to follow the same path by creating an e-commerce website , or blog website like everyone else.

So, the idea was simple - an app where I could display a bunch of superheroes in a card format with an image and some details about them . And it needed to have full CRUD functionalities so that users could view the card in full-screen, edit it, delete it, and even add a new superhero.

It sounds pretty simple right , but as I got deeper into it, I realised there’s so much that goes into making even a simple CRUD app work smoothly.

MySQL database of the Heros

I built the app using Technologies -

HTML CSS and Javascript for the front end in which HTML was used inside EJS files(NPM package)
NodeJs & ExpressJs for backend handling and routing
EJS, it is a simple templating language that lets you generate HTML markup with plain JavaScript.
MySQL as the database to store superhero data.
And along with all these there were some more npm packages that I used such as method-override , nodemon , uuidv4 and more for making tasks easy.

So after spending so much time I finally built an application which fetches the data from the mySQL database of the marvel heroes whose details are stored in Database and we can perform all CRUD operations on that .

Some screenshots of Website ->

Building this app significantly enhanced my understanding of how frontend, backend, and databases interact in real-world scenarios. There's certainly room for further improvements, and one immediate enhancement I'm planning is to implement a table grid layout. While the card layout looks great, adding a table format would make searching, filtering, and managing superhero data much easier.

Since this was my first proper CRUD app, I'd love to hear your thoughts and suggestions. I'm always eager to learn from the community—any recommendations for a table view / data grid suitable for this use-case would be greatly appreciated!
Thank you...